Question

I have a PHP built calendar that displays dates for each month. Now what I want to do is to be able to navigate between months without having to refresh the page.

Normally, the script takes parameters in the URL so I tried to pass that information through the AJAX load request. It works for one month forwards and one month backwards. However after that, the link stops working and the “#” goes back into the URL.

Here is my code:

$(document).ready(function(){

//Calendar "next"
$("#db-cal-next").click(function(){     
    var get_params = $(this).attr("rel");
    $("#db-calendar-wrap").load("../template/db-calendar.php", get_params);
    return false;
});

//Calendar "previous"
$("#db-cal-prev").click(function(){
    var get_params = $(this).attr("rel");
    $("#db-calendar-wrap").load("../template/db-calendar.php", get_params);
    return false;
});
});

I had the PHP script pass on the required parameters needed to create a request for the next and previous months and had it pass that information through the “rel” attribute. I think the problem lies with the fact that the rel attribute isn’t changing when the calendar script runs so a new set of parameters aren’t generated.

Any help would be greatly appreciated, thanks!

Answer 1

If your #db-cal-next and #db-cal-prev are inside of #db-calendar-wrap, than, when you loading HTML via AJAX to wrapper, new elements with ids “db-cal-next” and “db-cal-prev” created. SO, new elements are not in your jQuery set. You need to use jQuery .live() event binder function: http://api.jquery.com/live/
But, may be functionality of jQuery UI Datepicker is all you need?