ajax calendar navigation with jquery

Question

I have next and previous links in the html

<a href="/event-sort/calendar/2009/9/sports/">prev</a>
<a href="/event-sort/calendar/2009/11/sports/">next</a>

When they are clicked, I want the page to make an ajax call to load a php script that will update the calendar's html

now when the calendar updates, the arrows have been removed and added to the dom again, so I'm having trouble binding these events

this is what I have now

function url_to_array(string)
{
 var url = string;
 var url_array = url.split('/');
 return url_array;
}

function update_cal(evt)
{
 var url_array = url_to_array(evt.data);

 $('#master-calendar').css({
  background:'url(/images/ajax-load.gif) no-repeat left top',
  height:'600px'
 }).html('');

 $.get('/ajax_events.php',
  {
   view:url_array[2],
   year:url_array[3],
   month:url_array[4],
   category:url_array[5]
  },
  function(returned_data)
  {
   $('#content').html(returned_data);
   var element_id = $(evt.target).attr('id');
   var element_href = $('#' + element_id).attr('href');
   $('#' + element_id).unbind('click', update_cal).bind('click', element_href, update_cal);
  }
 );

 evt.preventDefault();
}

// Document Ready $(document).ready(function(){

var prev_link = $('#cal_nav_previous').attr('href');
$('#cal_nav_previous').bind('click', prev_link, update_cal);

var next_link = $('#cal_nav_next').attr('href');
$('#cal_nav_next').bind('click', next_link, update_cal);

});// End Document Ready

I really would like to use the one update_cal function for both my next and previous buttons

I wanted the calendar to be accesible with js, that's the reason for the hrefs and date numbers in the urls, any help would be appreciated

i had experimented with jquery live events, but didn't have much success

can I bind the update_cal function to both the next and previous links at once?

Answer 1

It seems there are several questions here, so I´ll try to answer a few of them.

To avoid the default behaviour of the links you can use jquery:

$('a').click(function(event){
    event.preventDefault();
});

Of course you have to specify the right links...

To pass a variable from the link to your script, you can use the rel attribute:

<a href="/event-sort/calendar/2009/9/sports/" rel="200909">prev</a>
<a href="/event-sort/calendar/2009/11/sports/" rel="200911">next</a>

and read the rel attribute with jquery.

To automatically bind the events, you can put the bind part in the ajax_events.php script

That seems about it, or am I missing something?

By the way, I was trying to numerate my answers, but that messes up the code, so bold it is...