jQuery getScript() + load() loaded content not working

Question

I have a document with say five buttons. Underneath this row of buttons I generate a placeholder div. When I click on a button I use load() to load into the placeholder a div from another page (each button loads a chunk of HTML into the placeholder div).

Ok, my problem is that the chunks I am loading into the placeholder are slideshows (anythingslider). And they don't work even if I have another slideshow on the main page with all the relevant CSS and JS already loaded.

As far as I've found out I need to use getScript() but I still don't seem to grasp it. Do I need to reload the relevant scripts again?

Thank you in advance for any help - K

I'm confused what exactly the problem is. Can you elaborate on what exactly isn't working? Is javascript not loading? Are you getting js errors? Is the html not loading when you call load? — Max, Apr 13 '11 at 20:33
is this what youre looking for? http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax1 — Trevor Arjeski, Apr 13 '11 at 20:39
I have apage with a perfectly working set of slideshows. further down the page I would like to load in another slideshow via load(); However even though the slideshow I wish to load into the master page is exactly the same as the slideshows that are already on the page the loaded one just won't work i.e it looks the same as if I have javascript disabled in my browser. — Kevin, Apr 13 '11 at 20:43
@Trevor - not really. I am able to load content fine, it's just if the loaded content requires js to function then I have a problem. — Kevin, Apr 13 '11 at 20:44
@Kevin why don't you just keep the scripts on the page that the html is being loaded to then? — Trevor Arjeski, Apr 13 '11 at 20:45
@Kevin and also, make the slideshow divs of the same class so the jquery can style or animate or whatever it does to it — Trevor Arjeski, Apr 13 '11 at 20:47
@Trevor - I am keeping them there (the scripts). Also the class names are the same. — Kevin, Apr 13 '11 at 20:50
@Kevin could you edit your post and add some of the html and scripts? Im interested in seeing them — Trevor Arjeski, Apr 13 '11 at 20:54
@Kevin Have you considered creating iframes on the click of the buttons and just loading the page with the slide show into that? I guess that would solve the problem of you losing the js effect, but may not be the most efficient way to handle things — Trevor Arjeski, Apr 13 '11 at 21:29
@Trevor, iframes are a no-no as far as I know from the other developers.I'll check. But i'd really like to solve this one! :) — Kevin, Apr 13 '11 at 21:32

score 1 · Answer 1 · answered Apr 17 '11 at 07:23

It sounds like you just need to initialize the slider from the callback function (called after the content is loaded). The code would look something like this:

$('div#placeholder1').load('content.html', function() {
  // target the loaded div, find the slider and initialize it
  $('div#placeholder1').find('ul.slider').anythingSlider({ /* options */ });
});

score 0 · Answer 2 · answered Apr 13 '11 at 20:24

0

It sounds like you are loading the html into your page, but are not instantiating the slider after you do. Loading the html from another page, will not bring over the JS objects running on another page.

answered Apr 13 '11 at 20:24

ChrisThompson

1,998
12
17

Nor will any scripts or functions contained within necessarily execute. Nor would you want them to! – Adam Terlson Apr 13 '11 at 20:39
So I need to instanciate even though the appropriate js + css files are already present in the page containing the 'loaded' content? – Kevin Apr 13 '11 at 20:39

score 0 · Answer 3 · edited May 23 '17 at 12:19

I do experience the same problem with loaded content via .load() for all my scripts I use on the loaded content.

Tried to put the script.js on the top, bottom and even on ever loaded content with no solution yet.

How can I fix it in general?

EDIT:

Just found the answer:

$(document).ajaxComplete(function(){
    // fire when any Ajax requests complete
})

LINK: Running JQuery scripts on AJAX loaded content

score 0 · Answer 4 · answered Jan 31 '12 at 17:33

This has worked for me in getting "jquery-dependent content" loaded into a web page document. I personally like to keep things in functions because its easier to maintain when you have other scripts around it. I created a function called globalSections, which can be used on any page as long I keep the following pattern. Within the function I created a div element with an ID called "header". I then loaded my external "jquery-dependent content" into that newly created div. Finally, get the scripts that are needed to make that content run.

$.globalSections = function() {
  $('#wrapper').prepend('<div id="header"></div>');
  $('#header').load('/myfile.html', function() {
  $.getScript("js/jquery.scripts.js");
  });
}

Then run the function

$(function() {
  $.globalSections();
});

Short and simple

jQuery getScript() + load() loaded content not working

4 Answers4