views:

201

answers:

5

I have a main page with 2 links that load external files via .load(). The first file has a simple JavaScript rollover, which works when the content is loaded. The second file has a jQuery plug-in that does not work when loaded via .load() - but works fine when the data file is viewed by itself.

Main file: http://gator1105.hostgator.com/~carc/test-load.html

Second data file that works by itself, but not from .load(): (same URL as above, but the file is test-load-two.html - StackOverflow will allow me to create only 1 hyperlink) Rather than paste my source code here, you can just view it from the pages themselves.

How can I get the second file with the slideshow to work when loaded with .load()?

A: 

Ignore this answer

Your second file does its initialization in a "document.ready" block. That's not going to be run when your content loads via AJAX. Try taking the code in the second page that's inside "document.ready" out of that, so that it's just a bare script block.

[edit] Oh I see - not only is the script inside a "document.ready" block (well, it's not anymore), but that second page is a complete HTML document. You can't really load a complete HTML document into the middle of another document; it doesn't make sense, and jQuery is only going to grab what's in the body. Thus, try moving your script tag into the body and see what happens. (You still don't want "document.ready", I don't think.)

[edit again] actually I take that back - I don't think jQuery strips anything out; I just bet the browser gets confused.

[edit yet again] ok, ok I see that you've changed it again - let me take a really close look.

Pointy
I removed the document.ready block and it still fails.
jac
I updated the answer.
Pointy
No good. I changes the main document to pull in just the #content-area div (not the whole HTML file) and moved the scripts inside that div. Still fails.
jac
I'm looking at the 1.4.2 jQuery source, and it certainly seems to me as if it should be running the scripts. Furthermore, I know from my own code that dropping HTML fragments containing scripts into the middle of the DOM definitely will run the scripts. Thus I'm not yet sure what's going on, but I'll see if I can figure it out.
Pointy
still working on it but I just wanted to say that I want to live in that house :-)
Pointy
A: 

That is because .load just load and set the HTML into the element you say and the script tag is outside from all of this

ElAlecs
No, he's moved the scripts into the body of the result. The way that the jQuery "html()" function works is that it strips out the script elements, holds onto them while updating the DOM, and then it runs the scripts.
Pointy
I think you are wrong, jQuery only take the part you need, so, the script is out and is not process
ElAlecs
You're right - when you give load() a selector after the URL, the scripts are not executed. When you **don't** provide a selector, however, the scripts **are** executed. That's a strange way for the API to behave in my opinion, and I'd call it a bug.
Pointy
A: 

OK here's a better answer: for reasons I don't understand, when you load a fragment (or a whole page; whatever) with jQuery using the special "selector" trick to pluck out just a portion of the document:

var showThisContent = this.id;
$('#content').load('test-load-' + showThisContent + '.html #content-area');

the jQuery library strips out the scripts completely from the content, and doesn't ever run them. Why? I don't know.

I know that you probably don't trust me anymore, but here's what I did with your source code: I took that second file (test-load-two) and stripped out the head and stuff; basically I made it a fragment containing only the "content-area". (I also got rid of the script tag that loads jquery, as you don't really need that since the outer page already has it.) Then I changed the main page (test-load) so that when it calls "load" it just passes in the URL without that '#content-area' selector. That works.

[edit] I just posted a question to the jQuery forum: http://forum.jquery.com/topic/the-load-function-and-script-blocks

Pointy
That works. http://gator1105.hostgator.com/~carc/test-load.html Thank you!
jac
No problem. Sorry to have led you astray originally; I've used "load()" but I never noticed this particular weirdness before. Seems like a bug to me, especially since this little detail is not documented.
Pointy
+2  A: 

I acutally did something similar with a site I'm working on. What you'll want to do is make a callback function for each page for the $.load() call on the main page.

See the following code from the jquery.load() documenation:

$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});

In your particular case, you'd want something like this on the main test-load.html page.

$(document).ready(
    function(){ 
    $('li').click(function(){ 
        var showThisContent = this.id;
        $('#content').load('test-load-'+showThisContent+'.html', function(){
              if (showThisContent == "one"){
                  //Do logic for test-load-one.html

                  //Pre-load your images here.

                  //You may have to assign a class to your anchor tag
                  //and do something like:
                  $('a.assignedClass').mouseover(function(){});
                  $('a.assignedClass').mouseout(function(){});
              } //end if
              if (showThisContent =="two"){
                  //Do logic for test-load-two.html here
                  $('.slideshow').cycle({
                      fx: 'fade',
                      speed: 500,
                      timeout: 0,
                      next: '.nextSSimg',
                      prev: '.prevSSimg',
                      pager: '#SSnav',
                      cleartype:  true,
                      cleartypeNoBg:  true
                  }); //end .cycle()
               } //end if
            ); //end .load(location, callback function())
    }); //end $('li).click()
}); //end $(document).ready()

Now, obviously I didn't convert all your code, but what's happening here is that once document.ready is complete, the callback function will run, and since the elements like '.slideshow' are now loaded into the DOM, you're callback code will bind to them appropriately.

You could switch this code around in several ways to have the same result (i.e., wrap 2 $.load()s into conditions rather than doing the conditional logic in the .load callback, and/or put a callbackOne() and callbackTwo() function above document.ready and then call them appropriately) but that's your preference. You should be able to do what you want to using the callback function argument of the $.load().

JustinP8
A: 

Don't go for $.load. Try $.get instead, which might seem less comfortable, but it worked for me in a different case. Sample code as following.

$(li).click(function() {
   // your code for finding the id
   $.get('test-load-' + id + '.html', function(responseHtml){
       $('div#content-area').empty().append($(responseHtml)); // remove all elements from #content-area
       // $('...').html(responseHtml) will not work
   });
});

I hope this solves your problem.

Daniel