jQuery ajax problem with div refresh and new content

Question

I would like to refresh the #calendar div with the new content sent to calendar.php
I'm getting a success alert, but the content isn't refreshing. How do I get the new calendar.php to show up with the POSTed data?

$(document).ready(function(){
 $('#next').click(function() {
  $.ajax({
       type: "POST",
       url: "calendar.php",
       data: 'year=2012',
       target: '#calendar',
       success: function(html){
          alert("Success");

       }
     });
   });

The relevant HTML code is here: #next is the id on a div tag in calendar.php

<div id="calendar">
    <?php include('calendar.php'); ?>
</div><!-- /#calendar -->

Answer 1

You could just set it explicitly in your handler:

success : function (html) {
    $('#calendar').html(html);
}

Also, since you'll be replacing the contents of the calendar div (which contains the #next link), you'll probably need to use .live('click', function() { instead of .click(function(), since you'll lose the event handlers.

Answer 2

jQuery offers the following easier method:

$('#next').click(function(){

    $('#calendar').load('calendar.php', {year: 2012}, function(){

        // The response html was loaded into the calendar div already
        // You could use this area to display a success message
        alert("Done!");

    });

});