Global Javascript vars in jQuery selector callback function

Go To StackoverFlow.com

0

I am trying to call Ajax with jQuery and need to pass a variable that is set with PHP on the page load, to two separate functions to either move my calendar forward or backwards by the months.

var ajax_load = "Loading...",
    loadUrl = "calendar_backend.php",
    month = parseInt(<?php echo $month ?>);
    console.log(month);
    month = <?php echo $month ?>;

$("#calendar_box").on("click",'#next_month',function(){  
    console.log(month);
    $("#calendar")  
        .html(ajax_load)  
            .load(loadUrl, "month=" + month + "&go=next");
    var month = ++month;

    console.log(month);
});

$("#calendar_box").on("click",'#previous_month',function(){  
    $("#calendar")  
        .html(ajax_load)  
            .load(loadUrl, "month" + month + "&go=previous");  
    var month = --month;
});

I have the console calls in there to try to debug this and I get 4 from the first .log() undefined from the second one, and NaN from the third. From those three I can see that the variable is not getting passed into the .on() handler function.

The calender generating page is included_once on the index page and then the AJAX would be used to regenerate the correct data for the month. I need the month passed in the get string to know how far from the current month i need to offset.

Thanks for the help!!

2012-04-05 20:23
by Rockstar04
You need to get rid of the var keyword in the functions. Also, when you use the increment/decrement operators, you should not also use an assignment; just ++month or --month by itself is all you need - Pointy 2012-04-05 20:25


0

Simply don't use the var keyword inside the function body. var will instanciate a new variable inside the success function. And you using the decress/incresse operator wrong, its only month++; and month--;

var ajax_load = "Loading...",
    loadUrl = "calendar_backend.php",
    month = parseInt(<?php echo $month ?>);
    console.log(month);
    month = <?php echo $month ?>;

$("#calendar_box").on("click",'#next_month',function(){  
    console.log(month);
    $("#calendar")  
        .html(ajax_load)  
            .load(loadUrl, "month=" + month + "&go=next");
    month++; // Removed var and incressing

    console.log(month); 
});

$("#calendar_box").on("click",'#previous_month',function(){  
    $("#calendar")  
        .html(ajax_load)  
            .load(loadUrl, "month" + month + "&go=previous");  
    month--; // Removed var and decressing
});
2012-04-05 20:26
by Simon Edström
Ok, did it work? Or do you have more errors - Simon Edström 2012-04-05 20:57
I updated with your suggestions and suggestion from the jQuery site How jQuery Works and set up functions to call in the jQuery.on("click"), function next_month(month){ console.log(month); $("#calendar").html(ajax_load).load(loadUrl, "month=" + month + "&go=next");month++;console.log(month);} $("#calendar_box").on("click",'#next_month',function(){next_month(month);});) But when I click again its still using the original value for month, and is not updating - Rockstar04 2012-04-05 20:59
Got is sorted! Thanks a bunch! - Rockstar04 2012-04-06 19:26
Ads