Question

I’m making a calendar with 2 links, one to go back a month and the other to go forward a month.

This is my cal.php File:

<div class='cal_wrapper' id='cal'>
 <?php
   echo "<a href='cal.php?month=m&year=y'>Prev Month</a>";
   echo "<a href='cal.php?month=m&year=y'>Next Month</a>";

   echo $calendar;

 ?>
 </div>

What I’m trying to do is to use jquery/ajax to update the what’s inside the cal_wrapper div without having to refresh the page. I’ve look hard but can’t find any examples of getting this done without using an HTML form. How can I send 2 variables through a GET request, month and year, should be pretty basic..but I’m going cross eyed trying to find something on the internets..

Answer 1

First give your link classes

echo "<a class='month_selector' href='cal.php?month=m&year=y'>Prev Month</a>";
echo "<a class='month_selector' href='cal.php?month=m&year=y'>Next Month</a>";

Then load the contents of the ajax request into the wrapper div whenever one of those links has been clicked.

$('#cal_wrapper a.month_selector').live(function(e){
     $('#cal_wrapper').load( $(this).attr('href') ); 
     e.preventDefault(); 
}); 

EDIT you can use .load to load page fragments using the #wrapper_div

$('#cal_wrapper a.month_selector').live('click', function(e){
     $('#cal_wrapper').load( $(this).attr('href') + ' #wrapper_div' ); 
     e.preventDefault(); 
}); 

So wrap your cal_wrapper div in #wrapper_div and the code above will only load the contents of wrapper div. Use live instead of click since you are dynamically inserting the links.