problem with dynamic loading content with javascript

Question

I'm working on a website that is dynamically loading content in a DIV. Everything works fine except when the content contains a jquery plugin (f.e. a twitterfeed) the jquery plugin doesn't work..anybody knows how to get the plugins to work?

$(function() {

    var newHash      = "",
        $mainContent = $("#main-content"),
        $pageWrap    = $("#page-wrap"),
        baseHeight   = 0,
        $el;


    $("nav").delegate("a", "click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });

    $(window).bind('hashchange', function(){

        newHash = window.location.hash.substring(1);

        if (newHash) {
            $mainContent
                .find("#guts")
                .fadeOut(200, function() {
                    $mainContent.hide().load(newHash + " #guts", function() {
                        $mainContent.fadeIn(200, function() {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("nav a").removeClass("current");
                        $("nav a[href="+newHash+"]").addClass("current");
                    });
                });


        };

    });

    $(window).trigger('hashchange');


});

Rafael · Accepted Answer · 2011-04-04 15:00:05Z

2

If you use $.load with a selector ($(target).load("url #selector")), jQuery removes all SCRIPT tags from response.

Some solutions that come to my mind are:

changing the back-end to return only the content required by the script
do a $.get request, treat the reponse as plain text, do string manipulation to extract only the parts you need and then convert the result to DOM nodes. To do it right, a HTML parser is needed.

edited Apr 4, 2011 at 15:00

answered Apr 4, 2011 at 14:22

Rafael

18.5k5 gold badges60 silver badges67 bronze badges

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

7 Comments

Pointy Over a year ago

Actually, it always removes the <script> tags, but the difference is that when you ".load()" with a selector it doesn't execute the scripts. The bug.

Bojangles Over a year ago

+1 - didn't know this. I take it the solution would be to split them at source (into <scr ipt> maybe), and then get jQuery to regex them back together once it's been loaded?

Rafael Over a year ago

I'd suggest your backend should return only the content required by your script, so jQuery wouldn't have to search for #guts.

Jeroen Over a year ago

how you mean change the back-end?

Rafael Over a year ago

The script is doing a HTTP request, so you can have a script on the server side that will just reply with contents of <div id="guts"> and not with the whole page content. Just send some additional params (eg. using the URL) that will tell the server-side script that you want to have only part of the content.

|

Collectives™ on Stack Overflow

problem with dynamic loading content with javascript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related