Execute jQuery block last

Question

Before calling my question a duplicate of this one, please read my question through.

I have a set of demo pages for my blog posts. These pages can have CSS, HTML, jQuery/JS, or any combination of the three. The page is organized as follows:

<div id="page-wrapper">
<style type="text/css">
//CSS here.
</style>

<!--Include jQuery here-->
<script type="text/javascript">
//JS here
</script>

<!--Demo HTML would go here-->
</div>

(I know style tags in the body are bad, I have my reasons.)

After the page-wrapper div, I include a JavaScript source file that creates a "View Source" link/button.

The problem arises because the demo JavaScript may contain changes to CSS, and these changes show up in the demo HTML (e.g. style="color: #ff0000; ") since the code is being "gotten" by the JavaScript source file at the end, as follows:

var sourceCode = "<!DOCTYPE HTML>\n<html>" + $('html').html() + "\n</html>";

I want the demo jQuery to execute last; that is, after the source file inclusion is executed. I can't do the following things:

Move the source-file inclusion/reference to the <head> tags because jQuery is included in the body. This is so that source code viewers know I'm using jQuery.
Add code to the demo JavaScript for it to wait, since source code viewers would be confused.
Make the demo JavaScript wait too long since viewers are impatient :)

Is there a solution?

Solution = Don't code yourself into a corner. – nathan hayfield Nov 07 '12 at 21:05 — nathan hayfield, Nov 07 '12 at 21:05
haha I wish it were that easy... – apparatix Nov 07 '12 at 21:11 — apparatix, Nov 07 '12 at 21:11

score 1 · Accepted Answer · answered Nov 07 '12 at 21:13

It looks like you're creating something like jsFiddle or jsBin.

What you can do is make sure that the JS code that you want to inject into your template gets injected into a function callback. The onload event sounds like it should do what you want.

<div id="page-wrapper">
    <style>
        <!-- ### demo CSS -->
    </style>
    <script>
        (function ($) {
            $(window).load(function () {
                <!-- ### demo JS -->
            });
        })(jQuery);
    </script>
    <!-- ### demo HTML -->
</div>

Depending on your implementation, that may not work, so you can try triggering a custom event callback instead, if onload doesn't cut it.

<script>
    (function ($) {
        $(window).on('my.custom.event', function () {
            <!-- ### demo JS -->
        });
    })(jQuery);
</script>
<!-- ### demo HTML -->
<script>
    jQuery(window).trigger('my.custom.event');
</script>

That was easier than I expected, although what's the difference between `$(document)` and `$(window)`? — apparatix, Nov 07 '12 at 21:58
`document` and `window` are native Javascript objects; the former being the representation of the HTML document, and the latter generally representing the browser from which you're viewing it. Chucking them into a jQuery function (e.g. `$(document)`) just wraps jQuery functionality on them, just as if you'd selected something from the DOM using `$('#foo')` or something similar. — Richard Neil Ilagan, Nov 08 '12 at 14:26

Execute jQuery block last

1 Answers1