balupton/0-readme.txt

## 0-readme.txt
This gist documents the ways you can include scripts and styles into your page using ajaxy.

But the most recommended way is to include all your scripts and styles in your initial pages header. You get a big initial load, but all future loads are quick and fast.

The other ways are documented below with the apricots-body and apricots-head examples. The apricots-body would then be the second recommended, and the apricots-head example is not recommended.

## apricots-body.html
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jQuery Ajaxy - Apricots</title>
</head>
<body>
	<div id="apricots">
		<link type="text/css" rel="stylesheet" media="screen" href="./styles/apricots.css" />
		Apricots are small and orange.
	</div>
</body>
</html>

## apricots-body.js
// No change than usual

## apricots-head.html
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jQuery Ajaxy - Apricots</title>
	<link type="text/css" rel="stylesheet" media="screen" href="./styles/apricots.css" />
</head>
<body>
	<div id="apricots">
		Apricots are small and orange.
	</div>
</body>
</html>

## apricots-head.js
/**
 * jQuery Aliaser
 */
(function($){

	// Load in our resources from
	// http://github.com/balupton/jquery-sparkle/blob/master/scripts/resources/jquery.appendscriptstyle.js

	/**
	 * Append a Stylesheet to the DOM
	 * @version 1.1.0
	 * @date July 23, 2010
	 * @since 1.0.0, June 30, 2010
     * @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle}
	 * @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
	 * @copyright (c) 2009-2010 Benjamin Arthur Lupton {@link http://www.balupton.com}
	 * @license GNU Affero General Public License version 3 {@link http://www.gnu.org/licenses/agpl-3.0.html}
	 */
	$.appendStylesheet = $.appendStylesheet || function(url, overwrite){
		// Check
		if ( !(document.body||false) ) {
			setTimeout(function(){
				$.appendStylesheet.apply($,[url,overwrite]);
			},500);
			// Chain
			return $;
		}

		// Prepare
		var id = 'stylesheet-'+url.replace(/[^a-zA-Z0-9]/g, '');;
		var $old = $('#'+id);
		if ( typeof overwrite === 'undefined' ) {
			overwrite = false;
		}

		// Check
		if ( $old.length === 1 ) {
			if ( overwrite ) {
				$old.remove();
			}
			else {
				// Chain
				return $;
			}
		}

		// Create
		var bodyEl = document.getElementsByTagName($.browser.safari ? 'head' : 'body')[0];
		var linkEl = document.createElement('link');
		linkEl.type = 'text/css';
		linkEl.rel = 'stylesheet';
		linkEl.media = 'screen';
		linkEl.href = url;
		linkEl.id = id;
		bodyEl.appendChild(linkEl);

		// Chain
		return $;
	};

	/**
	 * Append a Script to the DOM
	 * @version 1.1.0
	 * @date July 23, 2010
	 * @since 1.0.0, June 30, 2010
     * @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle}
	 * @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
	 * @copyright (c) 2009-2010 Benjamin Arthur Lupton {@link http://www.balupton.com}
	 * @license GNU Affero General Public License version 3 {@link http://www.gnu.org/licenses/agpl-3.0.html}
	 */
	$.appendScript = $.appendScript || function(url, overwrite){
		// Check
		if ( !(document.body||false) ) {
			setTimeout(function(){
				$.appendScript.apply($,[url,overwrite]);
			},500);
			// Chain
			return $;
		}

		// Prepare
		var id = 'script-'+url.replace(/[^a-zA-Z0-9]/g, '');;
		var $old = $('#'+id);
		if ( typeof overwrite === 'undefined' ) {
			overwrite = false;
		}

		// Check
		if ( $old.length === 1 ) {
			if ( overwrite ) {
				$old.remove();
			}
			else {
				// Chain
				return $;
			}
		}

		// Create
		var bodyEl = document.getElementsByTagName($.browser.safari ? 'head' : 'body')[0];
		var scriptEl = document.createElement('script');
		scriptEl.type = 'text/javascript';
		scriptEl.src = url;
		scriptEl.id = id;
		bodyEl.appendChild(scriptEl);

		// Chain
		return $;
	};


	// ...
	// start our ajaxy code

						response: function(){
							// Prepare
							var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state;
							// Log what is happening
							window.console.debug('$.Ajaxy.configure.Controllers.page.response', [this,arguments], data, state);
							// Adjust Menu
							$menu.children(':has(a[href*="'+state+'"])').addClass('active').siblings('.active').removeClass('active');
							// Fetch
							var $dataContent = $(data.content);
							var $dataHead = $(data.head);
							// Import scripts and styles
							$dataHead.find('script[src]').each(function(){
								$.appendScript($(this).attr('src'));
							});
							$dataHead.find('script:not([src])').each(function(){
								$dataContent.append(this);
							});
							$dataHead.find('link[href]').each(function(){
								$.appendStylesheet($(this).attr('href'));
							});
							$dataHead.find('style').each(function(){
								$dataContent.append(this);
							});
							// Show Content
							var Action = this;
							$content.html($dataContent).fadeIn(400,function(){
								Action.documentReady($content);
							});
							// Return true
							return true;

	// ...
	// finish our ajaxy code

})(jQuery);
	This gist documents the ways you can include scripts and styles into your page using ajaxy.

	But the most recommended way is to include all your scripts and styles in your initial pages header. You get a big initial load, but all future loads are quick and fast.

	The other ways are documented below with the apricots-body and apricots-head examples. The apricots-body would then be the second recommended, and the apricots-head example is not recommended.
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jQuery Ajaxy - Apricots</title>
	</head>
	<body>
	<div id="apricots">
	<link type="text/css" rel="stylesheet" media="screen" href="./styles/apricots.css" />
	Apricots are small and orange.
	</div>
	</body>
	</html>
	/**
	* jQuery Aliaser
	*/
	(function($){

	// Load in our resources from
	// http://github.com/balupton/jquery-sparkle/blob/master/scripts/resources/jquery.appendscriptstyle.js

	/**
	* Append a Stylesheet to the DOM
	* @version 1.1.0
	* @date July 23, 2010
	* @since 1.0.0, June 30, 2010
	* @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle}
	* @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
	* @copyright (c) 2009-2010 Benjamin Arthur Lupton {@link http://www.balupton.com}
	* @license GNU Affero General Public License version 3 {@link http://www.gnu.org/licenses/agpl-3.0.html}
	*/
	$.appendStylesheet = $.appendStylesheet \|\| function(url, overwrite){
	// Check
	if ( !(document.body\|\|false) ) {
	setTimeout(function(){
	$.appendStylesheet.apply($,[url,overwrite]);
	},500);
	// Chain
	return $;
	}

	// Prepare
	var id = 'stylesheet-'+url.replace(/[^a-zA-Z0-9]/g, '');;
	var $old = $('#'+id);
	if ( typeof overwrite === 'undefined' ) {
	overwrite = false;
	}

	// Check
	if ( $old.length === 1 ) {
	if ( overwrite ) {
	$old.remove();
	}
	else {
	// Chain
	return $;
	}
	}

	// Create
	var bodyEl = document.getElementsByTagName($.browser.safari ? 'head' : 'body')[0];
	var linkEl = document.createElement('link');
	linkEl.type = 'text/css';
	linkEl.rel = 'stylesheet';
	linkEl.media = 'screen';
	linkEl.href = url;
	linkEl.id = id;
	bodyEl.appendChild(linkEl);

	// Chain
	return $;
	};

	/**
	* Append a Script to the DOM
	* @version 1.1.0
	* @date July 23, 2010
	* @since 1.0.0, June 30, 2010
	* @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle}
	* @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
	* @copyright (c) 2009-2010 Benjamin Arthur Lupton {@link http://www.balupton.com}
	* @license GNU Affero General Public License version 3 {@link http://www.gnu.org/licenses/agpl-3.0.html}
	*/
	$.appendScript = $.appendScript \|\| function(url, overwrite){
	// Check
	if ( !(document.body\|\|false) ) {
	setTimeout(function(){
	$.appendScript.apply($,[url,overwrite]);
	},500);
	// Chain
	return $;
	}

	// Prepare
	var id = 'script-'+url.replace(/[^a-zA-Z0-9]/g, '');;
	var $old = $('#'+id);
	if ( typeof overwrite === 'undefined' ) {
	overwrite = false;
	}

	// Check
	if ( $old.length === 1 ) {
	if ( overwrite ) {
	$old.remove();
	}
	else {
	// Chain
	return $;
	}
	}

	// Create
	var bodyEl = document.getElementsByTagName($.browser.safari ? 'head' : 'body')[0];
	var scriptEl = document.createElement('script');
	scriptEl.type = 'text/javascript';
	scriptEl.src = url;
	scriptEl.id = id;
	bodyEl.appendChild(scriptEl);

	// Chain
	return $;
	};


	// ...
	// start our ajaxy code

	response: function(){
	// Prepare
	var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state;
	// Log what is happening
	window.console.debug('$.Ajaxy.configure.Controllers.page.response', [this,arguments], data, state);
	// Adjust Menu
	$menu.children(':has(a[href*="'+state+'"])').addClass('active').siblings('.active').removeClass('active');
	// Fetch
	var $dataContent = $(data.content);
	var $dataHead = $(data.head);
	// Import scripts and styles
	$dataHead.find('script[src]').each(function(){
	$.appendScript($(this).attr('src'));
	});
	$dataHead.find('script:not([src])').each(function(){
	$dataContent.append(this);
	});
	$dataHead.find('link[href]').each(function(){
	$.appendStylesheet($(this).attr('href'));
	});
	$dataHead.find('style').each(function(){
	$dataContent.append(this);
	});
	// Show Content
	var Action = this;
	$content.html($dataContent).fadeIn(400,function(){
	Action.documentReady($content);
	});
	// Return true
	return true;

	// ...
	// finish our ajaxy code

	})(jQuery);