0

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.

2
  • include the code or no one will be able to help
    – tvanfosson
    Nov 13 '09 at 3:12
  • The code is kind of irrelevant. I'm just using load() to pull a HTML file containing static HTML with some javascript. All the code works. I just want a way to load() the html file and evaluate the javascript within it so the gallery will work. I'm after other peoples methods really. Not alterations to my code, per se.
    – panas
    Nov 13 '09 at 3:16
2

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/

0
1

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.

0
0

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>
9
  • two things.. you should include the livequery js file before your gallery js files. Also you are not binding to your #gallery element and you should not have a <head> or <body> tag in your file that gets loaded because it is being loaded into a page that already has that.
    – a432511
    Nov 13 '09 at 3:49
  • all you need is the <ul> // list elements </ul> in the file that is being loaded
    – a432511
    Nov 13 '09 at 3:50
  • I removed everything but the <ul> from the included file. Changed the livequery initializer to $(document).ready(function() { $('#gallery').livequery(function() { $(this).galleryView( {. The images are being included (the UL) but the CSS file doesn't seem to be taking effect on it and there's no gallery. So the livequery call doesn't seem to be working
    – panas
    Nov 13 '09 at 3:53
  • Did you add the $(this).load(function() { } ); ? I left that out of my edit up top by accident... If that doesnt work im out of ideas. Cant say i didnt try though. Like i said before... ive used livequery all over the place... it has never failed. there must be something else going on here
    – a432511
    Nov 13 '09 at 3:56
  • If you want to see if the function inside the livequery event is being called, add console.log("test"); inside the $(this).load(function() {}); Make sure you are using firefox/firebug and have the console open
    – a432511
    Nov 13 '09 at 3:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.