Loading an external html-file which includes an external javascript-file to a div

Question

So I have a page which contains links to external project-pages. These project-pages get loaded into a div through a function:

function clickEv(foo) {
    $('#loadContent').load('sub/'+foo+'.html').fadeIn('fast');
    window.location.hash = foo;
}

These project-pages all have the same template, text-div on the left and an image div on the right. What I want to do is include a slider for the image-div. This slider is an external javascript file:

$(function() {
var sliderUL = $('.imageBrowser').children('ul'),
    imgs = sliderUL.find('img'),
    imgWidth = imgs[0].width, 
    imgsLen = imgs.length, 
    current = 1,
    totalImgsWidth = imgsLen * imgWidth;

$('#sButtons').find('div').on('click', function() {
    var direction = $(this).data('dir'),
        loc = imgWidth;

    // update current value
    ( direction === 'next' ) ? ++current : --current;

    // if first image
    if ( current === 0 ) {
        current = imgsLen;
        loc = totalImgsWidth - imgWidth;
        direction = 'next';
    } else if ( current - 1 === imgsLen ) {
        current = 1;
        loc = 0;
    }

    transition(sliderUL, loc, direction);
});

So first I find the images in the unordered list within div 'imageBrowser' and then determine where I'm going with the prev and next buttons within div 'sButtons'. Again all the project-pages use the same template with the div's and lists.

I've tried including this slider.js file by attaching it with <script> tags in the beginning of the project-page files as well as by including .getScript() within the initial clickEv(foo) function. However, it doesn't seem to work with the first .load(), I believe this is because the div's imageBrowser and sButtons dont exist yet within the original html file? If I press the same project-page link again, loading the files for the second time, the slider works as intended. It is the same for every project-page, e.g. I open project-page1 - slider doesn't work, I open project-page2 - slider doesn't work, I open project-page1 again - slider works, I open project-page2 again - slider works. If I now switch back to page1, slider still works but if I open page3 it doesn't work again.

Am I trying something that's not feasible or what am I doing wrong?

// EDIT

I think I got it working now, the problem was that the script was getting executed before the content was loaded. Thus the variables which tried to get information off the elements only started working when they got loaded off the cache.

What I did was add onload="$.getScript('src/slider.js')" to the first <img> file within a project-page. Thus the script gets executed after the required elements have been loaded! Thanks to all off you and I will still consider that iframe due to performance.

You should avoid loading html content dynamically in this manner, IMHO. It causes too many headaches and discrepancies. Have you considered caving in and just using an iframe? I know iframes suck, but they were actually designed for loading external html content. — Jeffrey Sweeney
– Jeffrey Sweeney, Commented Apr 4, 2012 at 13:57
I didn't think about it but I guess I could give it a shot. The thing is that the project-page links are displayed in a div which is directly under loadContent which is set as display: none;. The wanted page is then brought in with fadeIn which makes for a nice effect and looks quite crisp but I take iframe is the wiser decision then, thank you. — kile
– kile, Commented Apr 4, 2012 at 14:07
Sure. An iframe might not work for you either (which is why I didn't provide it as an answer). Someone may have a more direct answer for your problem. — Jeffrey Sweeney
– Jeffrey Sweeney, Commented Apr 4, 2012 at 14:10

Zack Newsham · Accepted Answer · 2012-04-04 14:58:55Z

1

If you include the javascript in the file you are importing (the raw javascript, not a link to a file) you can eval the code within the script tags as follows:

var scripts = document.getElementByTagId("loadContent").getElementsByTagName("script");
for(i = 0; i < scripts.length; i++){
  eval(scripts[i].innerHTML);
}

I haven't tested in all browsers, but it works in Chrome and FF

In theory, because the loaded content is already added to the page, before you eval the script it should work.

answered Apr 4, 2012 at 14:58

Zack Newsham

3,0022 gold badges27 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Loading an external html-file which includes an external javascript-file to a div

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related