Javascript variable not changing correctly on click event

Question

I have the following script.

$(function () {

    $('#slider').slider({
        value: 50,
        min: 10,
        max: 100,
        step: 10,
        slide: function (event, ui) {
            $("#slider-value").html(ui.value);
            $("#hiddenbox").val(ui.value);
        },
        change: function (event, data) {

            $("#slider-value").html($('#slider').slider('value'));

            var sliderValue = hiddenbox.value;
            $("#div1").load(bob, {sliderValue: sliderValue}, function(responseTxt,statusTxt,xhr){
                if(statusTxt=="error")
                    alert("Error: "+xhr.status+": "+xhr.statusText);
            }); 
        }
    });

    $("#show-slider").click(function() {
        $('#slide').toggle("slow");
    });
});

I am determining which file to load using the variable (bob). This should then cause the JquerySlider to alter the contents of Div1 to the page specified in bob.

A click event on another menu option should reassign the variable :

$(document).ready(function(){
    $("#sport").on("click", function(){
        var page = "sport.php";
        var sliderValue = hiddenbox.value;
        var bob = "sport.php";
        $("#div1").load("sport.php", {sliderValue: sliderValue, page: page}, function(responseTxt,statusTxt,xhr){
            if(statusTxt=="error")
                alert("Error: "+xhr.status+": "+xhr.statusTexe. t);
        });
    });
});

However at the moment all that happens is the slider does nothing. If you move it and page transition then changes occur but apart from that it's unresponsive.

Have declared bob using:

$(document).ready(function(){
    var bob;
});

declare bob outside that function, otherwise it will disappear after the function block. Try declaring bob in the first line of javascript. — diynevala, May 01 '14 at 04:27
Each of your functions creates a new scope, and variable declared inside one of them is not visible to the others. If you want a variable to be visible to all of them, it has to be declared outside them all. — Barmar, May 01 '14 at 04:28
Don't do `var bob = "sport.php"`, just do `bob = "sport.php"`. Otherwise, you're declaring a local variable and it doesn't access the global one. — Barmar, May 01 '14 at 04:29
See http://stackoverflow.com/questions/500431/javascript-variable-scope — Barmar, May 01 '14 at 04:30

score 0 · Accepted Answer · answered May 01 '14 at 04:33

First declare bob, and later DO NOT declare bob again with var:

var bob;
$(document).ready(function(){

   $("#sport").on("click", function(){
      var page = "sport.php";
      var sliderValue = hiddenbox.value;
      bob = "sport.php";
      $("#div1").load("sport.php", {sliderValue: sliderValue, page: page}, function(responseTxt,statusTxt,xhr){
        if(statusTxt=="error")
            alert("Error: "+xhr.status+": "+xhr.statusTexe. t);
      });
   });
   $('#slider').slider({
      value: 50,
      min: 10,
      max: 100,
      step: 10,
      slide: function (event, ui) {
        $("#slider-value").html(ui.value);
        $("#hiddenbox").val(ui.value);
    },
    change: function (event, data) {

        $("#slider-value").html($('#slider').slider('value'));

        var sliderValue = hiddenbox.value;
        $("#div1").load(bob, {sliderValue: sliderValue}, function(responseTxt,statusTxt,xhr){
            if(statusTxt=="error")
                alert("Error: "+xhr.status+": "+xhr.statusText);
        }); 
    }
});

$("#show-slider").click(function() {
    $('#slide').toggle("slow");
});
});

Be careful though, I re-arranged your code but I did NOT test it.

Javascript variable not changing correctly on click event

1 Answers1