Using AJAX to change months in a PHP calendar

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!

score 0 · Accepted Answer · answered Aug 06 '11 at 22:57

0

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?

answered Aug 06 '11 at 22:57

Timur

6,668
1
28
37

Would everyone quit using `live()` already? They made `delegate()` for a reason. – Levi Morrison Aug 06 '11 at 23:07
I didn`t know about this. Thanks for the information, `delegate()` is a good way to do this too – Timur Aug 06 '11 at 23:11
@Peter, `delegate()` seems to be more flexible and functional – Timur Aug 06 '11 at 23:12
Thank you! I used `delegate()` to bind the events and it works well! – Geoff Aug 06 '11 at 23:17
See http://stackoverflow.com/questions/4579117/jquery-live-vs-delegate for why you should use delegate instead of live. – Levi Morrison Aug 07 '11 at 14:13

score 0 · Answer 2 · answered Aug 06 '11 at 23:08

0

If you want things to refresh on the client, then you really need a client-side solution.

There are lots of Javascript calendars available: both in toolkits, as well as standalone modules. For example:

CalendarView

jsDatePick

Dojo Widgets

answered Aug 06 '11 at 23:08

paulsm4

114,292
17
138
190

Using AJAX to change months in a PHP calendar

2 Answers2