loading content into a div with jquery

Hey All - I am having a bit of trouble with a jquery function. I have a nav bar and I want when a user clicks on the nav bar to have the page load into a div (#content)

The code I have works for the first click, but when I try to click on another item it shows the loading image, but does not put the new content in the div (it leaves the old content). Any thoughts?

$(document).ready(function() {

   $('.cat').live("click",function() {
        var section = $(this).attr("id");
        $.ajax({
            type: "POST",
            url: "../soccer/nav/" + section + ".php",

            beforeSend:  function() {
                $('div#content').hide();
                $('div#loading').show();
            },

            success: function(html){
                $('div#loading').hide();
                $("div#content").replacewith(html);
            }
        });     
        return false;
    });
}开发者_高级运维);

Any help would be greatly appreciated!

The problem is the .replacewith() method. You are actually replacing the #content div with the new content. Just use .html() instead.

You don't need $("div#content"). You can just do $("#content")

$("#content") means find the node with the id "content".

Try with:

$.post("../soccer/nav/" + section + ".php", null, function(data)
{
   $('#loading').hide();
   $("#content").html(data);
});

Try to use jQuery.Load event to make use of ajax and html populating at the same time.