jQuery AJAX with remote HTML containing JS

Question

I have a page setup that uses jQuery + AJAX to load content into an accordion frame. It works fine for loading straight text/HTML but I now need to load Javascript along with the HTML.

To elaborate, I'm using GalleryView to display images in a photo gallery section of the accordion. When I load the HTML file, however, the scripts aren't being executed and I'm just seeing straight images. No gallery.

Is there a cleaner method of .load()'ing the HTML file then eval()'ing it? I've tried putting the GalleryView code into the main page (with the accordion) in the load() functions callback in hopes it could then initialize the GalleryView plugin, but no go.

Answer 1

You can use the LiveQuery plugin. In your original or "master" file that the other content is being loaded into, you bind your code to those elements being loaded in. The plugin will detect when the content is loaded in and execute the code.

jQuery:

$(document).ready(function(){
    $('#gallery').livequery(function(){
        $(this).galleryView();
    });
});

The plugin is available: http://plugins.jquery.com/project/livequery/

Answer 2

Load will automatically filter out all but the body tag in the document. If you have your javascript in the head of the document, it won't be loaded with the document. Try moving your javascript into the body tag and see if that works.

In jQuery 1.2 you can now specify a jQuery selector in the URL. Doing so will filter the incoming HTML document, only injecting the elements that match the selector. The syntax looks something like "url #some > selector". Default selector "body>*" always applies. If the URL contains a space it should be escape()d. See the examples for more information.

Updated based on comments

You'll need to load your CSS with your base page. Since the link tag must be in the head element, there isn't any (easy) way to load it via AJAX. You could add a link to the head of your document, but getting the href for the link would probably require a separate call or changing to return the link and html wrapped as a json object. Better to just include the CSS in the main document.

I think if you returned just the following content from your AJAX call it ought to work.

<ul id="gallery">
   <li><span class="panel-overlay">This is an overlay</span><img src="img1.jpg" alt="test1" title="test1" /></li>
   <li><span class="panel-overlay">This is an overlay</span><img src="img2.jpg" alt="test2" title="test2" /></li>
   <li><span class="panel-overlay">This is an overlay</span><img src="img3.jpg" alt="test3" title="test3" /></li>
   <li><span class="panel-overlay">This is an overlay</span><img src="img4.jpg" alt="test4" title="test4" /></li>
</ul>

<script type="text/javascript">
$(function() {
    $('#gallery').galleryView(
    {
        panel_width: 474,
        panel_height: 353,
        frame_width: 50,
        frame_height: 50,
        transition_speed: 350,
        easing: 'easeInOutQuad',
        transition_interval: 0
    });
});
</script>

Answer 3

My new answer...

No livequery necessary. Your browser was lagging because for some reason that galleryView plugin and livequery were causing an infinite loop. Probably just some incompatibility there (I didn't look to deeply at that once i realized it was causing an infinite loop).

Use this:

$(document).ready(function(){

    $('#content').load('theOtherFile.html', function(){

        $(this).find('#gallery').galleryView(); 

    });

});

This takes advantage of the callback method that the .load() function allows you to implement. When the ajax call is complete and the content has been loaded, it will call the callback function. Then you can search "this", which is the #content div, for your now loaded #gallery UL. I also noticed that you had two $(document).ready(function(){}); uses. You should really only use one of those.