Question

I’m currently working on a website that you’ll find here: http://steadfastdesignfirm.com/rgw/. I used an ajax effect that I found online at CSS-Tricks to dynamically load content from another php page and animate it (fade in and fade out) when a navigation tab is clicked.

I have managed to get this working fine, as you will see (please note the only two working pages are “Home” and “Experience RGW”), however, all of the jQuery scripts in my document that apply to elements within the div that reloads are broken when the content is dynamically generated.

As a quick example, take a look at the text resize tool beneath the image rotator on the home page and try changing the font size. Now, click on the “Experience RGW” tab and scroll down to the text resize tool again. Notice that now that we’ve loaded in experience.php dynamically within the “#ajax” div, the script doesn’t work. Also, if you click on the “Home” link now, you will also notice that the image rotator doesn’t work.

I’ve looked high and low online and through multiple forums to try and figure out how to fix this, and I believe I have to incorporate the jQuery .live function, to apply the script to any element, whether it’s currently visible or not. Otherwise, document.ready only runs the scripts once after the DOM loads and will not affect the ajax loaded content. Is that correct? If so, how do I apply that to multiple jQuery files executed on my page?

Well, this is totally driving me crazy and I’ve tried hard to get it, but I just can’t quite figure it out. I’m fairly new to jQuery, but am trying to learn fast. I would post some of the code here, but there is a lot involved in this question. 🙂

If anyone would be willing to shoot out a quick answer, or a few lines of code, I’d greatly appreciate it.

FYI: The script that runs the ajax effect is in ./scripts/page.js. Also, please remember that I currently have only the Home page and Experience RGW page working correctly, so please don’t waste time trying to diagnose problems on the other pages. I haven’t gotten to them yet. 🙂

Here is a link to some of the code on jsfiddle: http://jsfiddle.net/taylortsantles/R33YV/.

Thanks,
Taylor

Answer 1

You need to rebind any events after dynamically loading in elements to a page, as Javascript sees these as totally new DOM elements.

You can achieve this by modifying the code you use to update the page:

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

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

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

                    // Rebind any events
                    documenttextsizer.setup("text-resize");

                });
            });
    };

});

This applies to any events that happen WITHIN the updated elements in the page. So after the comment “//Rebind any events” you can add others as they are required! Hope that helps 🙂