On a recent consulting gig, a client had the requirement that a JavaScript deliverable needed to run in a self-enclosed script tag that would be arbitrarily placed within the body of a page. In other words, I needed to deliver a JavaScript file such that the following code snippet would work:

<!-- somewhere in the page... -->
<div id="specialContainer">
    <script type="text/javascript" src="foo.js"></script>
</div>
<!-- ... -->

So, in the end, it’s a pretty routine chore. A special container needs to exist at an arbitrary place in the page, the self-enclosed script tag will do some DOM building within it, and all of the magic happens therein. Well, hopefully, it goes without saying that I wanted to streamline the time it took me to complete this task with the help of Dojo.

Fortunately, version 1.1 added a new parameter you can pass into djConfig called afterOnLoad that allows you to safely inject Dojo into the page after onload hooks have occurred. In case you missed it, this feature was mentioned in the Dojo 1.1 release notes.

Here’s a snippet from how the aforementioned foo.js file that appears in the script tag might look:

//protect our handiwork within the scope of an anonymous function...
(function() {
    //load Dojo (after the page's onload event has already occurred)
    djConfig = {afterOnLoad : true, require:['dojo.date','dojo.cookie']};
    var e = document.createElement("script");
    e.type = "text/javascript";
    e.src= "http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js";
    document.getElementsByTagName("head")[0].appendChild(e);

    /* Whenever Dojo has loaded, go about your business. */
})()

In a nutshell, you define djConfig, and then append a script tag into the head of the page that will load Dojo from AOL’s CDN. In this particular case, the dojo.date and dojo.cookie would be automatically loaded as well. The tricky part is in regards to the “Whenever Dojo has loaded…” comment: as of version 1.1 there isn’t a built-in way of determining when Dojo has actually loaded, and since the script tag that loads Dojo is asynchronous, you can’t necessarily use anything in the dojo.* namespace until whenever it is finally available. In other words, you don’t have the safety or convenience of a dojo.addOnLoad block in this case, so when should you actually start using stuff inside of the dojo.* namespace?

Well — let not your heart be troubled; until version 1.2 is released that introduces the ability to provide an afterOnLoad parameter directly to djConfig, you might get by with this simple hack as a stop gap:

/* Right after you have appended the script tag into the head of the page... */

/* Check every second to see if it's safe to kick things off... */
var _interval = setInterval(function() {
    if (window.dojo !== undefined) { // && window.dojo.date !== undefined && ...
        clearInterval(_interval);

        /* Whatever it is you're actually setting out to do... */

    }
}, 1000);

By the way, all it took was a ping to JavaScript hacker extraordinaire James Burke to get the addOnLoad featured added to version 1.2 so that everything will work a little more conventionally. (Sweet!)

You may not have realized it, but the intent of this column was multipurpose. Yes, I wanted to show you how you could use Dojo as part of a self-enclosed script tag after page load, which is useful for employing Dojo as part of an application that might appear on a social networking site or a bookmarklet, but I also wanted to illustrate at least two other things: 1) While Dojo may not drop a turn-key solution right into your lap 100% of the time, JavaScript’s incredible dynamism and some ingenuity can still usually get you to where you need to go in short order, and 2) all it might take is a filing a ticket on Trac or asking someone in #dojo (IRC over at freenode.net) for help to get that turnkey solution you may be looking for delivered in the next dot release if it’s a good feature. You’ll hear me say time and time again that Dojo’s community is second to none.

If you find yourself in need of a good desktop reference on Dojo, please checkout my upcoming book, Dojo: The Definitive Guide. I’m completing the final edits this week, and it’ll be off to the printers soon thereafter.

Last but not least — if you’re going to OSCON, you might also register for my session entitled Web Graphics & Animations Without Flash (Or gfx Deliciousness with Dojo) or otherwise drop me a line if you want to get together and chat at some point during the week. The chances are pretty good that I’ll be shifting gears in the coming weeks and run a few columns on the dojox.gfx module as I prep my slides.