Forum Moderators: open

Message Too Old, No Replies

AJAX & jquery w/ Calendar

         

lbombardier

12:24 am on Mar 21, 2009 (gmt 0)

10+ Year Member



I'm new to AJAX so bear with me....

I'm using an ajax based calendar (qcalendar) which displays a link inside days that have events. When clicking on one of these events i use jquery to dynamically create a table. This is the link:

1

When clicked it uses the following js included in the header.

jQuery(document).ready(function(){
$('.calendarLink').click(function(ev) {
var prefix = 'date_';
var date = this.id.substring();
$.ajax({
type: "POST",
url: "calendar/script.php",
data: "date="+date,
success: function(msg){
$('#result').html(msg);
}
});
});
});

So this works fine when I'm on the month that loaded by default. (The current month) However, after moving to the next month (using XMLHttpRequest) the link is no longer active when being clicked.

My though is that the jquery needs to be re-instantiated (if that's the right word) because the page hasn't reloaded...but I could be wrong.

Any thoughts?

Cheers.

lbombardier

2:29 pm on Mar 21, 2009 (gmt 0)

10+ Year Member



Just to add some closure to this in case anyone else (ie. another noob like me) runs into a similar issue...

The issue was, of course, that when making an ajax call to update the calendar to the next month, the DOM is not reloaded, so another ajax call from within the newly generated html doesn't work.

Simple work around was to eliminate the use of jquery's (document).ready(function() and simply call a function by adding an onclick event to the newly generated html.

html onclick event: onclick="getValue(this)" --passes newly generated id
js function: function getValue(control)
{
var date = (control.id);
// do your ajax call
}