Sometimes I want scripts to work as soon as possible, possibly even before document.ready.

For style changes, one option is to add CSS link or style tags to the page. However, if the CSS is tightly married to a JavaScript solution, it’s better to keep the styling changes based in JavaScript.

So here’s my approach: I wrote a jQuery plugin that dynamically adds SCRIPT and LINK tags to the page. That allows me to dynamically load JavaScript or CSS. The added benefit of this method, I utilize the browser’s cache as much as possible (editing web.config works even better if you have access) and all of the files are visible through Firebug as if they were loaded normally. That doesn’t happen when you load files using AJAX.

So, for my example, I want all of the submenu sections of my left nav to start closed, but only if jQuery loads and my other script to open and close those sections will run on document.ready.

As a result of this technique, the navigation behavior completely degrades (to a normal SP behavior) if any part of this does not load. But if it does load, the appearance is seamless to the user–you can’t see the sections contracting as the page loads.

Click “Read more…” to see the new plugin code and the example:

<!-- load jQuery from local library or src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js'-->
<script src="/javascripts/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">/*
 * includeScript plugin
 * Copyright (c) 2009 Paul Grenier (endusersharepoint.com)
 * Licensed under the MIT (MIT-LICENSE.txt)
 */
(function($){
	var _debug = function(msg,type){
		if (window.console && window.console.log){
			if (!type){type="log";}
			console[type](msg);
			return true;
		}
		return false;
	};
	$.fn.includeFile = function(options, callback){
		var defaults = {"tag":"script",
						"url":"",
						"media":"screen",
						"rel":"stylesheet"
						},
			o = $.extend({},defaults,options),
			head = this[0],
			file = document.createElement(o.tag);
		switch (o.tag){
			case "script":
				file.src = o.url;
				file.type = o.type?o.type:"text/javascript";
				if (o.charset){file.charset=o.charset;}
				if (o.defer){file.defer="defer";}
				break;
			case "link":
				file.type = o.type?o.type:"text/css";
				file.rel = "stylesheet";
				file.href = o.url;
				file.media = "screen";
				if (o.target){file.target=o.target;}
				if (o.rev){file.rev=o.rev;}
				if (o.hreflang){file.hreflang=o.hreflang;}
				if (o.charset){file.charset=o.charset;}
				if (callback){_debug("not all browsers support callback for <"+o.tag+">","warn");}
				break;
			default:
				_debug("unknown tag: <"+o.tag+">","error");
				return $(this);
		}
 		file.onload = file.onreadystatechange = function(){
			if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete"){
				if (callback && typeof callback=="function"){callback(o);}
				file.onload = file.onreadystatechange = null;
			}
		};
		head.appendChild(file);
		return $(this);
	};
})(jQuery);
//end plugin

//start instructions
$("head:first")
.includeFile({"url":"/javascripts/accordion-nav.js"},function(){
	$("head:first").includeFile({"tag":"link","url":"/javascripts/leftnav.css"}); //load the css file as a callback
})
.includeFile({"url":"/javascripts/expand-collapse-all.js"}) //another call chained from the first
.includeFile({"url":"/javascripts/ows.js"}); //end with semi-colon

//end instructions
</script>

Paul Grenier