Getting Calendar on main page to switch months without refreshing page - php

Question

I have a main page with lots of content, one piece of content is a small calendar.
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.

Answer 1

Maybe try putting e.preventDefault() first, i.e.:
$('#cal_wrapper a.selector').click(function(e){
e.preventDefault();
$('#cal_wrapper').load( $(this).attr('href') );
});

Answer 2

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();
});