ajax not able to pass variable to php

Question

I have a slider which uses javascript. I am trying to update the display of my web page based on the slider values. I tried to use ajax function to send the data to another PHP page to update the display. But I am not getting anything in my page. Here is my code so far.

  <?php
   $i = 1;
while (++$i <= $_SESSION['totalcolumns']) {
    $range = $_SESSION["min-column-$i"] . ',' . $_SESSION["max-column-$i"];?>
        <br><?php echo "Keyword" ?>
        <?php echo $i -1 ?>
        <br><input type="text" data-slider="true" data-slider-range="<?php echo $range ?>" data-slider-step="1">
        <?php } ?>
        <button type="button" onclick="loadXMLDoc()">Update</button>
 <script>
    $("[data-slider]")

        .each(function () {

            var range;
            var input = $(this);
            $("<span>").addClass("output")
                .insertAfter(input);
            range = input.data("slider-range").split(",");
            $("<span>").addClass("range")
                .html(range[0])
                .insertBefore(input);
            $("<span>").addClass("range")
                .html(range[1])
                .insertAfter(input);
        })
        .bind("slider:ready slider:changed", function (event, data) {
            $(this).nextAll(".output:first")
                .html(data.value.toFixed(2));

        });


</script>

<script>
function loadXMLDoc()
{
        alert "Am I coming here";
              $.ajax({
                    type: "POST",
                    url: 'update.php',
                    data: { value : data.value },
                    success: function(data)
                    {
                        alert("success!");
                    }
                });     
        }
</script>

I read in another post that javascript variables are available across functions and so I am trying to use the variable data.value inside my another javascript function loadXMLDoc() . But I do not see the value getting displayed in my update.php page. My update.php file is as below.

<?php
if(isset($_POST['value']))
{
    $uid = $_POST['value'];
    echo "Am I getting printed";
    echo $uid;
}
?>

Can someone please help me on this?

Answer 1

In the loadXMLDoc function I don't see data defined anywhere. I think that could be one of the problems. Also, when you're doing jquery ajax requests be sure to have a fail callback. The fail callback will tell you if the request fails which can be very informative.

var jqxhr = $.ajax( "example.php" )
.done(function() {
   alert( "success" );
})
.fail(function() {
     alert( "error" );
})
.always(function() {
     alert( "complete" );
});

To make the data variable accessible in the XMLLoadDoc function you could try putting it in the global scope (kind of a 'no-no', but its OK for a use case like this). So, at the top, declare var masterData , then when you have data in the .bind callback set masterData = data; and then in loadXMLDoc refer to masterData