Question

I’ve been working on this project for a few days and I really haven’t found any solid information, other than a co-worker saying I should use a iframe. Hopefully others could chime in and help me out.

Problem:

I have a index page with various links that once clicked will perform a slidedown and reveal content from another page (subpage). However, the subpage has a image rotator which works fine when you view it on it’s own, but doesn’t work when you view in the index page. The jQuery is not being called, so the image rotator dies. What would be the best method of allowing the content from the subpages to be viewed with it’s rotator on the index page?

Sorry if this is confusing, I’ve worded it the best I could, but if anyone can help, I’d really appreciate it. I have no experience with jQuery and am a total novice. Thank you guys in advance!

Answer 1

It sounds like you just need to load the proper JavaScript after the HTML for the “image rotator” is loaded into the DOM.

While you make the AJAX call for the “image rotator” use $.getScript() to get the include file for the “image rotator”:

var XHRs = [];
XHRs.push($.get('<URL TO HTML>', function () {...}));
XHRs.push($.getScript('<URL TO JAVASCRIPT>', function () {...}));
$.when(XHRs).then(function () {
    //here is where you initialize the "image rotator" because the HTML and the JS will be loaded into the DOM
});

If you want to keep your “image rotator” initialization script external you can make another $.getScript() call inside the anonymous function in the .then function call.