Dynamically loaded content with jQuery load clears the existing html

Question

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

Did you only edit the question, or you even try it? I got the feeling you just "fixed" the question... — gdoron
– gdoron, Commented Apr 3, 2012 at 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
– Dan, Commented Apr 3, 2012 at 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 content — Steen
– Steen, Commented Apr 3, 2012 at 22:01

Dan · Accepted Answer · 2012-04-03 22:06:40Z

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.

answered Apr 3, 2012 at 22:06

Dan

12.2k14 gold badges56 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gdoron · Accepted Answer · 2012-04-03 21:53:52Z

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!!!

answered Apr 3, 2012 at 21:53

gdoron

151k59 gold badges302 silver badges376 bronze badges

1 Comment

gdoron Over a year ago

@Silver89. $(this) is NOT the dom element! it's the ajax object.

Collectives™ on Stack Overflow

Dynamically loaded content with jQuery load clears the existing html

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related