Dynamically loaded content with jQuery load clears the existing html

Go To StackoverFlow.com

1

At the moment I am trying to create a setup where page content is loaded within the main to avoid having to refresh the page for every link.

I am using jQuery load as follows for every link that is clicked so that the link is loaded into the #main. (Obviously it won't be all links when complete.)

Pages visited directly work fine but if you try and use this load link then it will load the content correctly but only shows the loaded html in view source, am I doing something wrong here?

$("body").on("click", "a", function(){

    $("#footer, #main").fadeOut('fast');

    $("#main").load($(this).attr("href"), function(){

        $("#main, #footer").fadeIn('slow');

    });

    return false
});
2012-04-03 21:50
by Dan
Did you only edit the question, or you even try it? I got the feeling you just "fixed" the question.. - gdoron 2012-04-03 21:57
Yes that helped, was a problem I hadn't spotted! The actual cause of the above was script tags in the include .php file, always forget you can't do that - Dan 2012-04-03 22:00
Is the question the text in bold ? You say it loads correctly but view source don't show changes? That is the expected behavior as view source is at load time.use firebug or other to view altered conten - Steen 2012-04-03 22:01
@Steen. The other way around. Read it again please - gdoron 2012-04-03 22:02


2

The issue that causes this problem with .load() is when the file you are including contains <script></script> tags.

These interfere with the Javascript and it can't cope causing the page to error.

To stop the issue you must remove the <script></script> tags from within the loaded file.

2012-04-03 22:06
by Dan


1

You faded out the main, and didn't fade it in again...
Use this:

$("body").on("click", "a", function(){    
    $("#footer, #main").fadeOut('fast');    
    $("#main").load($(this).attr("href"), function(){    
        $("#main").fadeIn('slow'); // <======================
        //$(this).fadeIn('slow'); this isn't the main object!
        $("#footer").fadeIn('slow');    
    });    

    return false
});

this inside the callback isn't the DOM element!!!

2012-04-03 21:53
by gdoron
@Silver89. $(this) is NOT the dom element! it's the ajax object - gdoron 2012-04-03 21:55