Getting Calendar on main page to switch months without refreshing page

I have a main page with lots of content, one piece of content is a small calen开发者_JAVA百科dar.

For the Calendar I have a Previous month and next month link. What I want to do is switch between months without having to refresh the page.

<div id='cal_wrapper'>
  <a href='main.php?month=$m&year=$y' class='selector'>Previous month</a>
  <a href='main.php?month=$m&year=$y' class='selector'>Next month</a>
  <?PHP          
   echo $calendar;     
  ?>
</div>

Javascript is as follows:

<script type="text/javascript">
$(document).ready(function() {
$('#cal_wrapper a.selector').click(function(e){
    $('#cal_wrapper').load( $(this).attr('href') ); 
    e.preventDefault(); 
}); 
});
</script>

What is happening is when I click on either prev/next link the entire page is reloaded into the cal_wrapper div..??? I'm stuck.

Maybe try putting e.preventDefault() first, i.e.:

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

If I understand your question right, I think you want $(this).attr('href') to refer to the href attribute of $('#cal_wrapper a.selector'). Instead what is happening, is that $(this), at that point, actually is referring to the $('#cal_wrapper') element, not the $("#cal_wrapper a.selector') element.

If this is correct, what you may want to do is store $('#cal_wrapper') in a temporary variable, i.e,

$('#cal_wrapper a.selector').click(function(e) {
    var o = $(this);
    $('#cal_wrapper').load($(o).attr('href')); 
    e.preventDefault(); 
});