Triggering multiple javascripts nested inside AJAX page

Question

[A] I am using the splendid Highslide script to open a modal window (via its built-in AJAX functionality).

[B] So I will use 'main' to refer to the top/main page and 'insert' to describe the page being inserted into the 'main'.

[C] The 'insert' page being loaded into the Highslide window contains 4 external scripts that I must run as the modal is expanded.

[D] The scripts are included at the bottom of the 'insert' page -- right before the </body> tag -- since AJAX mode causes Highslide to ignore the <head> section.

[E] So my scripts look like this:

    <script src="/js/jquery-1.7.1.min.js"></script>
    <script src="/js/jQuery.thumbfx.js"></script>
    <script src="/js/jQuery.easing.js"></script>
    <script src="/js/jquery.masonry.min.js"></script>
    <script>
    $(function(){var $container = $('#IMAGES');$container.imagesLoaded( function(){$container.masonry({itemSelector : '.BLOCK',columnWidth: 200,isFitWidth: true,gutterWidth: 0});});});
    </script>
</body>

[F] Highslide is activated in the head of the 'main' page -- and by including the code below, it is supposed to trigger these scripts as the modal window is fetched and expanded.

hs.Expander.prototype.onAfterExpand = function() {
    var scripts = this.content.getElementsByTagName('script');
    for (var i = 0; i < scripts.length; i++) {
        eval(scripts[i].innerHTML);
    }
};

[G] The problem is two fold... First: I cannot seem to activate all the scripts. Masonry works perfectly in this scenario, but I can't get ThumbFX to work at all. Second: In trying to work out this problem I've discovered that eval() is evil, and it should be avoided like rabid zombies.

QUESTION: Is there a better (more secure) function that I can run at that hs.Expander.prototype.onAfterExpand event -- perhaps one that will actually work for ALL of the scripts?

Thank you.

EDIT: By the way... my paths are correct, and I can get all the scripts to work perfectly when I go directly to the 'insert' page. But only Masonry works when the 'insert' page is AJAX'd by Highslide. Thanks again.

Hiya RoadRash. Thank you for looking at this with me. The code is too long for this comment, so I pasted a simplified version of it here: [link](http://jsfiddle.net/6sR9M/) The author of ThumbFX — the script I can't get to fire — said that I should call it with AJAX directly like so: $.ajax({ url: "page.html", context: document.body }).done(function() { $('[data-overlayer]').overlayer(); }); But I don't understand any of that at all — especially in relation to Highslide. — JJ., Feb 12 '13 at 19:21

score 0 · Accepted Answer · answered Feb 13 '13 at 20:23

The below code will only read script blocks inside a Highslide ajax popup, not included JavaScript files. That’s why the Masonry works and the ThumbFx doesn’t, since the code for the Masonry is placed in a script block. The script files for the Masonry is picked from the included files in the main page (jquery-1.6.1.min.js and jquery.masonry.min.js).

hs.Expander.prototype.onAfterExpand = function () {
    var scripts = this.content.getElementsByTagName('script');
    for (var i = 0; i < scripts.length; i++) {
        eval(scripts[i].innerHTML);
    }
};

Solution without JavaSript block in the Highslide ajax popup:
You can call the functions directly from the onAfterExpand event instead of using script block in the “insert” page. All necessary JavaScript files must be included in the head section of the main page. The code you got from the author of ThumbFx requires that all the opening anchors in the main page have a unique ID so we can tie together the opening anchor with the correct “insert” page with the code in the onAfterExpand event.

HTML markup with ID:

<a id="link1" href="insert-page/image/1/" rel="highslide-ajax" class="BLOCK">
    <img src="thumbs/image1.jpg" alt="" /></a>
<a id="link2" href="insert-page/image/2/" rel="highslide-ajax" class="BLOCK">
    <img src="thumbs/image2.jpg" alt="" /></a>

Call the functions in the onAfterExpand event (requires highslide-full.js):

hs.Expander.prototype.onAfterExpand = function () {
    // for jQuery Masonry
    var $container = $('#IMAGES');
    $container.imagesLoaded(function () {
        $container.masonry({
            itemSelector: '.BLOCK',
            columnWidth: 200,
            isFitWidth: true,
            gutterWidth: 0
        });
    });
    // for ThumbFx
    if (this.a.id == 'link1') {
        $.ajax({
            url: "insert-page/image/1/",
            context: document.body
        }).done(function () {
            $('[data-overlayer]').overlayer();
        });
    }
    if (this.a.id == 'link2') {
        $.ajax({
            url: "insert-page/image/1/",
            context: document.body
        }).done(function () {
            $('[data-overlayer]').overlayer();
        });
    }
//  add more calls for ThumbFx here
};

Solution with JavaScript block in the Highslide ajax popup:
Put this code in the main page together with your highslide settings (requires highslide-full.js):

hs.Expander.prototype.onAfterExpand = function () {
    var scripts = this.content.getElementsByTagName('script');
    for (var i = 0; i < scripts.length; i++) {
        eval(scripts[i].innerHTML);
    }
};

This also requires that the necessary JavaScript files are included in the main page, but you don’t need to add ID to the opening anchors in the main page.
Place the script block in the body tag in the “insert” pages:

<script>
$(function () {
    // for jQuery Masonry
    var $container = $('#IMAGES');
    $container.imagesLoaded(function () {
        $container.masonry({
            itemSelector: '.BLOCK',
            columnWidth: 200,
            isFitWidth: true,
            gutterWidth: 0
        });
    });
    // for ThumbFx
    $.ajax({
        context: document.body
    }).done(function () {
        $('[data-overlayer]').overlayer();
    });
});
</script>

RoadRash! I am dazzled and amazed that you invested so much time and care to provide me with such a clear (and absolutely awesome) answer. The second solution that you posted is exactly what I needed and it works beautifully! You are a class act, and it is a pleasure to work with your software. Thank you. — JJ., Feb 14 '13 at 07:56

Triggering multiple javascripts nested inside AJAX page

1 Answers1