I’ve had the honor of writing for this year’s PHP Advent, blessing you all about Cross-Origin Requests with CORS:

There’s no doubt that Ajax is one of the most exciting, useful, and necessary web technologies available to front-end developers. Unfortunately, it’s also one of the most restrictive — especially when it comes to gathering content from other domains. Web developers are nothing if not persistent, so we’ve come up with a variety of ways to get around cross-origin restrictions, including JSONP, server-side proxies made with PHP, ProxyPass proxying, Flash transports, creative iFrame uses, and more. What many developers don’t know is that there’s a W3C specification called Cross-Origin Resource Sharing, or CORS, which provides a standard for cross-origin Ajax requests with minimal hassle.

That’s my Christmas gift to you all!

PHP Advent 2011: Cross-Origin Ajax with CORS is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

I’ve spent the last two weeks in London, eating fish’n'chips, drinking cup’o'tea, and being a hooligan at the Arsenal. Oh yeah, there was a MooTools hackathon too. The MooTools hackathon was hugely successful and I’ll be providing more detail about what was accomplished and where MooTools is going over the coming weeks. It was also great to meet some of the development team in person instead of simple IRC. MooTools FTW!

Another exciting part of my time in London was presenting at London Ajax. My presentation was called “JavaScript Coding with Class”, preaching the values of class-based JavaScript frameworks like MooTools and Dojo. I kept the talk high-level but I’m confident I got my point across, showing the value of class structures.

This was my first time presenting this deck, so let me know if you see room for improvement (outside of the billion “um’s” I used.)

Due to popular request, my slides have been embedded above.

JavaScript Coding with Class is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

dojo.xhr and handleAs

Making AJAX requests is done with Dojo’s dojo.xhr methods.  Sending a basic GET request would look like:

dojo.xhrGet({
	url: "/ajax.php",
	load: function(result) {
		// Do something with the result here
	}
});

The request above assumes that the response should be handled as plain text, as you would expect.  Dojo’s dojo.xhr methods all accept an object with properties for handling the request, and one property you can add is handleAs.  The handleAs property should be a string representing the type of parsing that should be done to the result before its passed to the load method or deferred callback.  Values for the handleAs property could be json, javascript, xml, or other variants of json.  If I want my request to be handled as JSON, I’d code:

dojo.xhrGet({
	url: "/ajax.php",
	handleAs: "json",
	load: function(result) { // result is a JS object
		// Do something with the result here
	}
});

The resulting object provided to the load handler is text parsed into JavaScript object.  Likewise, if I want the result to be handled as XML, I’d code:

dojo.xhrGet({
	url: "/ajax.php",
	handleAs: "xml",
	load: function(result) { // result is a XMLDocument object
		// Do something with the result here
	}
});

The load callback is provided a XMLDocument object.  One simple parameter changes the way the request response is parsed.  So how is this possible, and how can you create custom handleAs methods?  Simple!

dojo.contentHandlers

The dojo.contentHandlers object acts as dictionary for ajax request parsing.  The handleAs parameter you  supply maps to the key within dojo.contentHandlers.  The dojo.contentHandlers object comes with the following content handlers:  javascript, json, json-comment-filtered, json-comment-optional, text, and xml.  Here’s a snippet containing those “parsers”:

var handlers = dojo._contentHandlers = dojo.contentHandlers = {

	text: function(xhr){ 
		// summary: A contentHandler which simply returns the plaintext response data
		return xhr.responseText; 
	},
	json: function(xhr){
		// summary: A contentHandler which returns a JavaScript object created from the response data
		return _d.fromJson(xhr.responseText || null);
	},
	"json-comment-filtered": function(xhr){ 

		if(!dojo.config.useCommentedJson){
			console.warn("Consider using the standard mimetype:application/json."
				+ " json-commenting can introduce security issues. To"
				+ " decrease the chances of hijacking, use the standard the 'json' handler and"
				+ " prefix your json with: {}&&\n"
				+ "Use djConfig.useCommentedJson=true to turn off this message.");
		}

		var value = xhr.responseText;
		var cStartIdx = value.indexOf("\/*");
		var cEndIdx = value.lastIndexOf("*\/");
		if(cStartIdx == -1 || cEndIdx == -1){
			throw new Error("JSON was not comment filtered");
		}
		return _d.fromJson(value.substring(cStartIdx+2, cEndIdx));
	},
	javascript: function(xhr){ 
		// summary: A contentHandler which evaluates the response data, expecting it to be valid JavaScript

		// FIXME: try Moz and IE specific eval variants?
		return _d.eval(xhr.responseText);
	},
	xml: function(xhr){
		// summary: A contentHandler returning an XML Document parsed from the response data
		var result = xhr.responseXML;
		//>>excludeStart("webkitMobile", kwArgs.webkitMobile);
		if(_d.isIE && (!result || !result.documentElement)){
			//WARNING: this branch used by the xml handling in dojo.io.iframe,
			//so be sure to test dojo.io.iframe if making changes below.
			var ms = function(n){ return "MSXML" + n + ".DOMDocument"; }
			var dp = ["Microsoft.XMLDOM", ms(6), ms(4), ms(3), ms(2)];
			_d.some(dp, function(p){
				try{
					var dom = new ActiveXObject(p);
					dom.async = false;
					dom.loadXML(xhr.responseText);
					result = dom;
				}catch(e){ return false; }
				return true;
			});
		}
		//>>excludeEnd("webkitMobile");
		return result; // DOMDocument
	},
	"json-comment-optional": function(xhr){
		// summary: A contentHandler which checks the presence of comment-filtered JSON and 
		//		alternates between the `json` and `json-comment-filtered` contentHandlers.
		if(xhr.responseText && /^[^{\[]*\/\*/.test(xhr.responseText)){
			return handlers["json-comment-filtered"](xhr);
		}else{
			return handlers["json"](xhr);
		}
	}
};

What if we want to add our own content handler though?  All you need to do is add the key=>parser to the dojo.contentHandlers object!

// CSV parsing found at:  http://stackoverflow.com/questions/1293147/javascript-code-to-parse-csv-data

dojo.contentHandlers.csv = function(xhr) {
	
	// Set the data
	var responseText = xhr.responseText;
	var delimiter = ",";
	
	// Create a regular expression to parse the CSV values.
	var objPattern = new RegExp(
		 (
			  // Delimiters.
			  "(\\" + delimiter + "|\\r?\\n|\\r|^)" +

			  // Quoted fields.
			  "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +

			  // Standard fields.
			  "([^\"\\" + delimiter + "\\r\\n]*))"
		 ), "gi");


	// Create an array to hold our data. Give the array
	// a default empty first row.
	var arrData = [[]];

	// Create an array to hold our individual pattern
	// matching groups.
	var arrMatches = null;


	// Keep looping over the regular expression matches
	// until we can no longer find a match.
	while (arrMatches = objPattern.exec(responseText)){

		 // Get the delimiter that was found.
		 var strMatchedDelimiter = arrMatches[1];

		 // Check to see if the given delimiter has a length
		 // (is not the start of string) and if it matches
		 // field delimiter. If id does not, then we know
		 // that this delimiter is a row delimiter.
		 if (strMatchedDelimiter.length && (strMatchedDelimiter != delimiter)){
			  // Since we have reached a new row of data,
			  // add an empty row to our data array.
			  arrData.push([]);
		 }
		
		 // Now that we have our delimiter out of the way,
		 // let's check to see which kind of value we
		 // captured (quoted or unquoted).
		 if (arrMatches[2]){

			  // We found a quoted value. When we capture
			  // this value, unescape any double quotes.
			  var strMatchedValue = arrMatches[2].replace(
				   new RegExp("\"\"", "g"),
				   "\""
				   );
		 } else {
			  // We found a non-quoted value.
			  var strMatchedValue = arrMatches[3];
		 }
		 // Now that we have our value string, let's add
		 // it to the data array.
		 arrData[arrData.length - 1].push(strMatchedValue);
	}

	// Return the parsed data.
	return(arrData);
}

The code snippet above allows you to have your XHR request’s result be parsed as CSV content;  the result becomes a JavaScript object representing the CSV data.  Here’s how you’d use it:

dojo.xhrGet({
	url: "/ajax.php",
	handleAs: "csv",
	load: function(result) { // result is a JS object
		// Do something with the result here
	}
});

One key to flexibility within JavaScript framework is “dictionaries” or “property bags”, allowing for adding, removing, and modifying of existing properties.  Thanks to Dojo’s use of dojo.contentHandlers and dojo.xhr‘s handleAs property, you can handle the result of your AJAX requests before they are passed to a callback!

Custom AJAX Content Handling with the Dojo Toolkit is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The HTML

The basic setup is the same as a traditional form upload within the browser;  a FORM element with an INPUT of file type:

<form method="post" action="mootools-upload.php" enctype="multipart/form-data" id="uploadForm">
<div>
	<div class="formRow">
		<label for="file" class="floated">File: </label>
		<input type="file" id="file" name="file[]" multiple><br>
	</div>

	<div class="formRow">
		<input type="submit" name="upload" value="Upload">
	</div>
</div>
</form>

This setup allows file uploading even if JavaScript is not enabled.  (Note to IT snobs:  get over yourselves and turn JavaScript back on)

The CSS

The “drop zone” and “progress bar” areas can be easily styled in any fashion you’d like.  My sample CSS looks like this:

.droppable {
	border: #ccc 1px solid;
	border-radius: 8px;
	background: #eee;
	color: #666;
	padding: 20px;
	margin: 10px;
	clear: both;
	text-align: center;
}

.droppable.hover {
	background: #ddd;
}

.uploadList {
	margin: 0;
	padding: 0;
	list-style: none;
}

.uploadItem {
	overflow: hidden;
	border-bottom: #BCBCBC 1px solid;
	margin: 0 20px;
	padding: 3px;
}

.uploadItem span {
	overflow: hidden;
	width: 150px;
	float: left;
	display: block;
}

a.addInputRow,
a.delInputRow,
.uploadItem a {
	display: inline-block;
	background: url(add.png) no-repeat;
	height: 16px;
	width: 16px;
	text-indent: -999px;
}

.uploadItem a {
	float: left;
	display: block;
	padding-left: 20px;
	background-image: url(delete.png);
}

a.delInputRow {
	background-image: url(delete.png);
}

.progress {
	margin: 5px 0;
	height: 15px;
	border-radius: 3px;
	background: #545A74;
}

Since we have (unfortunately) become accustomed to the ugly INPUT type=file, my only CSS advice is to make sure you make not only your “drop zone” apparent but explain that the user should drag and drop.

The MooTools JavaScript

Arian has provided 3 JavaScript classes within his mootools-form-upload repository:

• Form.Upload:  The main worker class, detecting the browser capabilities and building a file uploader based on those features
• Form.MultiFileInput:  A class which builds and manages the list of files to be uploaded.
• Request.File:  Manages the FormData object, sends files, and reports progress.

Another resource, iFrameFormRequest, can be included in case the user is rocking a legacy browser.  With the resources above added to the page, let’s set up our drag and drop file uploader:

window.addEvent('domready', function(){
	
	// Create the file uploader
	var upload = new Form.Upload('file', {
		dropMsg: "Drop files here",
		onComplete: function(){
			alert('Files uploaded!');
		}
	});

	// Use iFrameFormRequest, which posts to iFrame 
	if (!upload.isModern()) {
		new iFrameFormRequest('uploadForm', {
			onComplete: function(response){
				alert('Files uploaded!');
			}
		});
	}

});

We start by creating an instance of Form.Upload, passing it the INPUT node and the class options.  The onComplete option is most important, as it represents the event that fires when all uploads have completed, allowing you to notify the user.

For more customizable uploads, like notifications for progress and success, you can pair Form.MultipleFileInput and Request.File directly:

// From ReadMe.md

// the input element, the list (ul) and the drop zone element.
var input, list, drop;
// Form.MultipleFileInput instance
var inputFiles = new Form.MultipleFileInput(input, list, drop, {
    onDragenter: drop.addClass.pass('hover', drop),
    onDragleave: drop.removeClass.pass('hover', drop),
    onDrop: drop.removeClass.pass('hover', drop)
});

// Request instance;
var request = new Request.File({
    url: 'files.php'
    // onSuccess
    // onProgress
});

myForm.addEvent('submit', function(event){
    event.preventDefault();
    inputFiles.getFiles().each(function(file){
        request.append('url[]' , file);
    });
    request.send();
});

This solution would be good for using detailed progress bars.

Outstanding work once again by Arian.  His contribution to the MooTools JavaScript framework has been priceless, and he continues that effort with his drag and drop file upload system.  These classes prove the power of MooTools and the advancement of browsers today.  Give your users the elegant option of drag and drop uploads!

Drag and Drop MooTools File Uploads is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

So what am I lazy loading within my current design?

• Twitter, Facebook, and Google Plus widgets for single blog posts.
• Page footer;  since the footer content is out of sight during initial page load, it doesn’t need to be loaded right away.
• LighterJS Syntax Highlighter; if no PRE tag is on the page, there’s no reason to grab the syntax highlighter.
• Comment avatar images;  there’s no point to loading these images immediately as they must be scrolled to.  If someone hits the “#comments” portion of the page, my LazyLoad plugin can handle loading the initial images.
• Tweets;  tweet content is non-essential so they needn’t be loaded right away.
• MooTools StarRating;  again, only needed if it’s a post page.

Of course, there needs to be a trigger for these items to load.  I’ve chosen three events to trigger loading of these components:  keydown, mousemove, and scroll.  Each of these events signify a human and “interested” presence.  Let me show you how I’ve implemented this lazy loading.

Load Initial Scripts

Not every script can be asynchronously loaded, so the scripts I do load synchronously are RequireJS and Google’s JSAPI (for Analytics and Google Search):

<!-- JavaScript at the bottom for fast page loading --> 
<script src="http://ajax.cdnjs.com/ajax/libs/require.js/0.23.0/require.min.js"></script> 
<script src="https://www.google.com/jsapi?key=MY_KEY"></script> 
<script> 
	// Load MooTools, Google Search
	function loadScripts() { 
		require(["http://davidwalsh.name/wp-content/themes/klass/js/script.js"]); 
	}
	google.load("mootools", "1.3.0");
	google.load("search", "1");
	google.setOnLoadCallback(loadScripts);
</script>

Once the scripts are loaded, my theme’s main JavaScript resources is required.

Lazy Loading Code

Since there are multiple tasks I want to run when the user “awakens,” I create an onAwaken array that will hold each of the tasks.  A series of functions will be pushed to the array, each representing a sign task.  For example, the task which loads Twitter, Facebook, and Google +1 badges looks like:

// Create the array of awaken functions
var onAwaken = [];

// Get the share URL from this page via the canonical link
var cannons = $$("link[rel=canonical]"), shareUrl;
if(cannons.length) {
	shareUrl = cannons[0].get("href");
}

// If the PROMO DIV exists on the page
var promoDiv = document.id("promo");
if(promoDiv && shareUrl) {
	onAwaken.push(function(){
	
		// Create a SPAN and A for the Twitter share link
		var span1 = new Element("span",{ style:"display:inline-block;float:left;" }).inject(promoDiv);
		new Element("a",{
			href: "http://twitter.com/share",
			"class": "twitter-share-button",
			"data-count": "horizontal"
		}).inject(span1);
		
		// Inject the Twitter SCRIPT tag into the SPAN
		new Element("script",{
			src: "http://platform.twitter.com/widgets.js",
			async: true
		}).inject(span1);
		
		// Create the Facebook IFRAME
		new Element("iframe",{
			src: "http://www.facebook.com/plugins/like.php?href=" + shareUrl,
			scrolling: "no",
			frameborder: 0,
			allowTransparency: true,
			style: "border:none; overflow:hidden; width:500px;"
		}).inject(new Element("span",{style:"display:inline-block;"}).inject(promoDiv));
		
		// Create the G+1 Button
		var el = document.id(document.createElement("g:plusone")).set({
			href: shareUrl,
			size: "medium"
		}).inject(new Element("span",{style:"display:inline-block;"}).inject(promoDiv));
		
		// Get the G+ SCRIPT
		require(["http://apis.google.com/js/plusone.js"],function() {
			// console.warn("G+1 is ready!");
		});
		
		// Fade in all of the lazy loaded content
		promoDiv.fade(1);
	});
}

Note that a require call is within this function, which could probably be considering lazy loading during lazy loading.  In all seriousness though, it’s important to note that entire resources are lazy loaded, not just execution of available functionality.

Another onAwaken function includes loading of my footer and right column content:

// Uses Moo to load and place content
function loadAndPlace(url,where,then) {
	new Request({
		url: url,
		onSuccess: function(content) {
			document.id(where).set("html",content);
			if(then) then();
		}
	}).send();
}

// Load footer and right column upon awakening
onAwaken.push(function() { 
	loadAndPlace(themePath + "footer.html","footer"); 
});
onAwaken.push(function() { 
	loadAndPlace(themePath + "follow-trends.html","contentRightColumn", function(){ 
		$$(".contentRightColumn").fade(1); 
	}); 
});

And then I also lazy load the MooTools StarRating plugin:

// Star ratings
var ratingForm = document.id("ratingForm"),
	themePath = "/wp-content/themes/klass/";
if(ratingForm) {
	// Get the post id
	var postId = document.id("postId").get("value");
	
	// Get star ratings
	require([themePath + "js/ratings/Source/moostarrating.js"], function() {
		// Set image vars
		MooStarRatingImages = {
			defaultImageFolder: themePath + 'js/ratings/Graphics/',
			defaultImageEmpty:  'star_boxed_empty.png',
			defaultImageFull:   'star_boxed_full.png',
			defaultImageHover:  'star_boxed_hover.png'
		};
		// Create star ratings
		var voted = false;
		var rater = new MooStarRating({
			form: ratingForm,
			radios: "rating",
			half: true,
			width: 16
		}).addEvent("click",function(value) {
			if(!voted){
				// Send request
				new Request({
					url: themePath + "rating.php",
					method: "post",
					data: {
						rating: value,
						id: postId
					}
				}).send();
				// Mark as voted
				voted = true;
			}
		});
		// Fix the value...wtf?!
		// Adding 0.5 because it's always showing up short 0.5 short.  WTF.
		rater.setValue((rater.currentIndex * 0.5) + 0.5);
		// Showtime
		ratingForm.setStyle("display","block");
	});
}

There is no limit to the number of functions you can fire when the user awakens, so let’s assume I have a bunch more functions ready to run.  Now it’s time to place JavaScript code into place to listen for the page’s awakening.  Here it goes:

// Set up main register handler
var runEvents = ["keydown","mousemove","scroll"];
var runAwaken = function() {
	onAwaken.each(function(evt,index) {
		evt();
	});
	// Since we've run all items, let's remove the events
	runEvents.each(function(evtType){
		window.removeEvent(evtType,runAwaken);
	});
};
// Set registers in motion
runEvents.each(function(evtType){
	window.addEvent(evtType,runAwaken);
});

First we create an array of events we want the page to awaken on.  Next we create a function which will run upon awakening;  this function will run all awaken events and then remove the event from the window so that the runAwaken function will only run once.

The sky is the limit with the content you can lazy load.  I highly recommend evaluating your website for components which don’t hold search engine value, or may speed up the load of your page (especially synchronous SCRIPT tags!).  As always, have fun with your websites and do what you can to make them load faster!

Lazy Load Content and Widgets with MooTools and RequireJS is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The tradition method of dynamic history/”back button” management has always been hash-based JavaScript technology.  Newer technology, including HTML5′s window.onpopstate and history.pushState methods, allow for more reliable methods for managing history.  MooTools’ History plugin supports modern and legacy methods for history management.  Let me show you how to quickly implement the MooTools History plugin.

HTML Structure

The History plugin doesn’t require any HTML structure adjustments but at least one designated content should be identified; you can, of course, have as many content areas as you like, but you’ll most likely need multiple AJAX requests to retrieve their content, unless you use a Request.JSON request to retrieve content for multiple areas of the page. For this simple demo, we’ll define a header, footer, and menu, and content area:

<div id="body">
	
	<!-- header -->
	<header>
		<a href="/" data-noxhr>David Walsh Blog</a> 
		<div>MooTools History Plugin Demo</div>
		<div>This is a simple example of the MooTools History plugin created by Christoph Pojer</div>
		
	</header>
		
	<!-- menu -->
	<ul id="demoMenu">
		<li><a href="mootools-history.php">Home</a></li>
		<li><a href="mootools-history-david.php">About David Walsh</a></li>
		<li><a href="mootools-history-mootools.php">About MooTools</a></li>
		<li><a href="mootools-history-christoph">About Christoph Pojer</a></li>
	</ul>
	
	<!-- content area -->
	<article id="contentHolder">
		
		<!-- initial page content goes here -->
		
	</article>
	
	
	<!-- footer -->
	<footer>
	
	</footer>
</div>

The content area is the only area which will have its content change. The page should load as usual

The MooTools JavaScript

Assuming that the MooTools History plugin has been included in the page, there are a few functions that should be created upon domready.  The first is a method which will perform the request for content when a link is clicked:

// Content holder (all content placed within this element)
var contentHolder = document.id("contentHolder");

// Create a Request object which will be reused when links are clicked
var request = new Request.HTML({
	onSuccess: function(nodeTree,elements,html) {
		// Set the content into the content holder
		contentHolder.set("html",html);
		// Execute directions that should be executed whenever a page changes
		onPageUpdate();
	}
});

// Create a function that loads the page content
var loadPage = function(url) {
	// Make a HTML request to get the content for this page
	request.send({ url: url });
};

The next step is creating a method (which is theoretically option, but you’ll usually want to do something once content has loaded) which will execute every time content is received:

// Function that will execute whenever a page gets changed
var onPageUpdate = function() {
	
	// Do whatever you'd like here!  
	
	// Possibly manually record a Google Analytics page view?
	
};

History doesn’t request that you do anything when content is received, but you’ll likely want to do something. Why manually record a page view within Google Analytics?

This next piece is important in turning links to static pages into AJAX-ified History triggers. Just one big Element.Delegation event delegation call will do the work for not just the initial page load, but every History AJAX load after that:

// The listener that manages all clicks
var listener = function(evt){
	evt.preventDefault(); // Prevent following the URL
	History.push(this.get('href')); // Push the new URL into History
};

// Add event delegation to add clicks.  Both of these work:
//document.body.addEvent("click:relay(a:not([href=#]):not([href^=http://]):not([data-noxhr]))",listener);
document.body.addEvent("click:relay(a:not([href=#],[href^=http://],[data-noxhr]))",listener);

When any same-site, non-hashed link is clicked, the listener method stops the event and pushes the new URL into History, changing the address bar and managing back/forward button click.

A back function is also created so that we can provide a “back” link and a “forward” link to travel back and forward in page history, if we choose to use it:

// Listener for the "Back" link
var back = function(evt){
	evt.preventDefault();
	History.back(); // Go back
};

// Listener for the "Forward" link
var forward = function(evt){
	evt.preventDefault();
	History.forward(); // Go back
};

// Add to links
document.id("backLink").addEvent("click",back);
document.id("forwardLink").addEvent("click",forward);

The next step is adding a change event to History itself to run our loadPage function when the page URL changes:

// When the history changes, update the content 
History.addEvent('change',loadPage);

If the client doesn’t support the history.pushState method, the History plugin evaluates the hash and loads the page as necessary:

// Handle the initial load of the page if the browser does not support pushState, check if the hash is set
if(!History.hasPushState()) {
	// Check if there is a hash
	var hash = document.location.hash.substr(1);
	if (!hash) return;

	// If the hash equals the current page, don't do anything
	var path = document.location.pathname.split('/');
	path = path[path.length - 1];
	if (hash == path) return;

	// Load the page specified in the hash
	loadPage(hash);
}

Lastly, running the onPageUpdate upon domready load doesn’t hurt since events are only added once within onPageUpdate:

// Update the page
onPageUpdate();

Now the page is ready to support History-based, AJAX-driven content swapping.  Thanks to the onPageUpdate function, links are added to events as they come in so that even AJAX-retrieved content can be managed with History.

Tips and Strategies for Hash/History-Managed Websites

Plugins like Christoph’s History masterpiece are very helpful in enriching the user experience but do require a bit of developer logic:

• Use Event Delegation – Remember that with a History-style system, assigning events to elements directly may not be the best solution because those elements may be gone with the next link click. Using event delegation instead of traditional event assignments may save you a lot of trouble. Read my MooTools Element.Delegation post if you aren’t familiar with event delegation.
• Don’t Assume JavaScript Support – Keep in mind that the client may not support JavaScript.  Search engines have added JavaScript support but it’s important to use URLs that will work with both on a History-managed site and a JavaScript-less website.
• Use AJAX Detection - MooTools provides an AJAX-specific header within the Request class called HTTP_X_REQUESTED_WITH.  Click here to learn how to use it to detect AJAX requests.  You will want to be able to detect AJAX so that those requests simply return the content and not the header and footer (etc.) with it. You could write a client-side script/regex to parse out the content but that’s largely inefficient. My demo uses PHP to store the page content in variables as follows:
  
  

  // Load pages based on querystring
  $qstring = $_SERVER['QUERY_STRING'];
  if($qstring == 'home' || $qstring == '') {
  	$content.= '<h1>Welcome Home!</h1>';
  	$content.= '<p>History Management via popstate or hashchange. Replaces the URL of the page without a reload and falls back to Hashchange on older browsers.</p><p>This demo page aims to teach you how you can use Christoph Pojer\'s outstanding History widget to load only the content you need, dynamically and reliably.</p>';
  }
  elseif($qstring == 'about-david') {
  	$content.= '<h1>About David Walsh</h1>';
  	$content.= '<p>My name is David Walsh. I\'m a 27 year old Web Developer from Madison, Wisconsin. In the web world, I am:</p>
  	<ul>
  	<li>Founder and Lead Developer for Wynq Web Labs.</li>
  	<li>Software Engineer for SitePen.</li>
  	<li>Core Developer for the MooTools JavaScript framework.</li>
  	<li>Co-Founder of Script & Style, a website aimed at making web developers and designers better.</li>
  	</ul>
  	<p>I don\'t design the websites - I make them work.</p>
  	<p>I am also an admirer of the great <a href="?about-christoph">Christoph Pojer!</a>.</p>';
  }
  // and more....
  // Page not found
  else {
  	$content.= '<h1>Page Not Found</h1>';
  	$content.= '<p>The page you were attempting to find could not be found.</p>';
  }
  
  // If request was via AJAX, push it out.
  if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
  	echo $content;
  	exit();
  }
  

  Obviously your content management system would be pulling content from a database or other static files, but you get the point — load content before any page output, sniff for AJAX, and push content out accordingly. If it’s not an AJAX request, push that content into the content area’s HTML via traditional methods.

These tips should set you up well to use a History-based system.  Remember that JavaScript is meant to enhance — keep in mind that your user (or search engine bot) may not support JavaScript, so be sure to test your website thoroughly!

Give the example hell.  Click from page to page, use the back button, refresh the page, etc.  History is rock solid!

Thanks to Christoph Pojer for his outstanding MooTools History plugin.  Many History-style plugins have existed but the browsers haven’t been as feature-rich as they are now.  If you have any suggestions, tips, or experiences to share about creating hash-based websites, please share them.

MooTools History Plugin is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

The HTML

The stock content will be built by javascript but we will have two DIVS created within the page:

<div id="stockIndicator">Retrieving stock information....</div>
<div id="stockContainer"></div>

One DIV is an indicator which fades in an out during data fetch, the other is the container which will hold the stock information.

The CSS

As always, the styling of elements is subject to however you’d like them to look, but here’s a really basic style set:

#stockContainer, #stockIndicator { width:500px; }
#stockContainer		{ background:#343434; padding:10px; }
#stockIndicator		{ text-align:right; visibility:hidden; padding:5px; }
.stockRow			{ padding:5px 10px; clear:both; margin-bottom:5px; }
	.stockName		{ font-size:14px; font-weight:normal; float:left; }
	.stockData		{ font-size:11px; float:right; width:200px; text-align:right; }

/* stock differential */`
.stockSame			{  }
.stockUp			{ background:lightgreen; }
	.stockUp .stockName	{ color:green; }
.stockDown			{ background:pink; }
	.stockDown .stockName { color:red; }

Stocks that are above for the day are green, below are red.  Stocks which have stayed the same are black.  Style however you’d like though.

The MooTools JavaScript

Before attacking an example usage, let’s talk about about Request.Stocks.  This class is an extension of JSONP, setting numerous defaults that correspond to using Yahoo’s YQL service, and adding additional options to customize the data you want to receive from Yahoo.  A few of the custom options include:

• stocks: An array of symbols to retrieve stocks for
• sortBy: The data field to sort by
• display: The data fields to retrieve from Yahoo.  A few of the fields you can retrieve include: Ask, AverageDailyVolume, Bid, AskRealtime, BidRealtime, BookValue, Change&PercentChange, Change, Commission, ChangeRealtime, AfterHoursChangeRealtime, DividendShare, LastTradeDate, TradeDate, and more!

More detail on all of the custom options, some of which are not listed on this blog, can be found here.

So now to the class usage.  The sample code looks long but that’s due to my commenting:

// When the dom is ready...
window.addEvent("domready",function() {
	// Get the stock container and indicator
	var container = document.id("stockContainer");
	var indicator = document.id("stockIndicator");
	// Create the instance
	var request = new Request.Stocks({
		// Stocks to retrieve
		stocks: ["AAPL","GOOG","MSFT"],
		// Formatter upon result
		onComplete: function(result) {
			// Log out the result to see the structure
			console.warn(result);
			// Hide the indicator
			indicator.fade(0);
			// Create a template with which to display the information
			var template = ' \
				<div class="stockRow stock{UpDown}"> \
					<div class="stockName">({symbol}) {Name}</div>\
					<div class="stockData">{Ask} {Change} {ChangeinPercent}</div> \
					<br class="clear" /> \
				</div> \
			';
			// For every stock , display its information in the template
			var html ="";
			Array.from(result.query.results.quote).each(function(quote) {
				// Add an "UpDown" property to the quote object
				var change = Number.from(quote.Change);
				quote.UpDown =  change == 0 ? "Same" : change > 0 ? "Up" : "Down";
				// Update running contnet
				html += template.substitute(quote);
			});
			// Update the content
			container.set("html",html);
		},
		// Show the indicator upon request
		onRequest: function () {
			indicator.fade(1);
		}
	});
	// Send the request every 20 seconds
	(function() {
		request.send();
	}).periodical(20 * 1000);
	// Send right away
	request.send();

Request.Stocks’ onComplete method provides a method to handle the result from Yahoo.  Notice how I build the content string (using MooTools’ string.substitute) and then set the element’s HTML, instead of appending to the element’s innerHTML property — that’s the more efficient way to change a node’s content.  Also, remember that this class contains every method that Request, Request.JSON, and Request.JSONP have.

Request.Stocks is an outstanding utility class for developers looking to create applications based on stock market data.  The mix of flexibility and simplicity are real strong points of this class.  If I had one criticism of this class, it would be that it doesn’t provide a method to add or remove stocks on the fly.  This functionality would allow the developer to create applications which allow users to add their own portfolio stocks without needing them all defined immediately.  Other than that, this class rock solid and I look forward to seeing where it goes in the future!

RealTime Stock Quotes with MooTools Request.Stocks and YQL is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

I’ve said it over and over but I’ll say it again:  JavaScript’s main role in web applications is to enhance otherwise boring, static functionality provided by the browser.  One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over the past five years.  Star rating systems are attractive, allow us to avoid ugly forms, and prevent unnecessary page reloads.  A new plugin by Lorenzo Stanco called MooStarRating has hit the MooTools Forge and I wanted to share with you how to use it.

The HTML

The star rating system uses an HTML form with radio buttons as the base:

<form name="ratingsForm">
    <label>Do you like this post?</label>
    <input type="radio" name="rating" value="0.5">
    <input type="radio" name="rating" value="1.0">
    <input type="radio" name="rating" value="1.5">
    <input type="radio" name="rating" value="2.0">
    <input type="radio" name="rating" value="2.5">
    <input type="radio" name="rating" value="3.0">
    <input type="radio" name="rating" value="3.5">
    <input type="radio" name="rating" value="4.0">
    <input type="radio" name="rating" value="4.5">
    <input type="radio" name="rating" value="5.0">
    <input type="radio" name="rating" value="5.5">
    <input type="radio" name="rating" value="6.0">
    <input type="radio" name="rating" value="6.5">
    <input type="radio" name="rating" value="7.0" checked="checked">
    <input type="radio" name="rating" value="7.5">
    <input type="radio" name="rating" value="8.0">
    <input type="radio" name="rating" value="8.5">
    <input type="radio" name="rating" value="9.0">
    <input type="radio" name="rating" value="9.5">
    <input type="radio" name="rating" value="10.0">
	<span id="htmlTip"></span>
</form>

Note the ID of the form and the name of the radio buttons — we’ll use those when creating our MooStarRating instance.  Also note that I’m creating “half” rating options, as well as using checked to note what the current average rating is.

The CSS

This plugin requires no additional CSS.  That’s a bonus as it’s one less server request.

The MooTools JavaScript

The first step in using MooStarRating is defining the image paths for the stars:

// Configure the image paths
var MooStarRatingImages = {
	defaultImageFolder: "/js/mooStarRating/images",
	defaultImageEmpty:  "empty.png",
	defaultImageFull:   "full.png",
	defaultImageHover:  "hover.png"
};

Once the path and image names are defined, it’s time to create an instance of MooStarRating:

// A fake post ID for the sake of submission
var postId = 10;

// When the DOM is ready....
window.addEvent("domready",function() {	
	// Create our instance
	var starRater = new MooStarRating({
		form: "ratingsForm",
		radios: "rating",
		half: true,
		//imageEmpty: "star_boxed_empty.png", // For setting special images
		//imageFull:  "star_boxed_full.png",
		//imageHover: "star_boxed_hover.png", 
		width: 17, 
		tip: "Rate as <i>[VALUE] / 10.0</i>", 
		tipTarget: document.byId("htmlTip"),
		tipTargetType: "html"
	});
	
	// Listen for star clicks
	starRater.addEvent("click",function(value) {
		// Send ajax request to server
		new Request.send({
			url: "rating.php",
			data: { rating: value, postId: postId }
		});
	});
});

MooStarRating is loaded with options.  Here we pass the form ID and the name we provided to the radio buttons.  As I’m allowing half-stars, the half option is set to true.  MooStarRating also provides a “tip” functionality which allows a message to be displayed along side the star rating. Lastly, the click event provides the user’s rating for which you may send an AJAX request to the server to save the rating. Simple!

That’s it!  I love this plugin because it’s simple and effective.  Big props go to Lorenzo Stanco for his excellent piece of work.  If there’s enough interest, I’ll create a tutorial that includes enough PHP and MySQL to get this rating system working with real data.

MooTools Star Ratings with MooStarRating is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

One of the web components I’ve always loved has been Facebook’s modal dialog.  This “lightbox” isn’t like others:  no dark overlay, no obnoxious animating to size, and it doesn’t try to do “too much.”  With Facebook’s dialog in mind, I’ve created LightFace:  a Facebook lightbox clone for MooTools.  LightFace and its family of classes work well with iFrames, images, AJAX-requested content, static positioning, and static content.

LightFace Features

LightFace has a lot of backed in goodness!

• Five compact classes: LightFace, LightFace.Request, LightFace.IFrame, LightFace.Image, and LightFace.Static
• Constrains image sizes with window resizes
• Provides a host of options to customize each instance
• Responds to designated keyboard events
• Works with MooTools More’s Drag class to make the lightbox movable (Drag is *not* included within the repo)
• Add as many buttons as you’d like
• Adds and removes events as needed to minimize strain on the browser
• Automatically positions and resizes with window resizing and scrolling
• Supports IE6+, Safari, Chrome, Opera, and iPad/iPhone

LightFace Core

LightFace.js is the core piece of LightFace.  All subsequent classes extend the core functionality provided by LightFace.  Creating a new LightFace lightbox is as easy as:

// Create instance
var modal = new LightFace({
	height: 200,
	width: 300,
	title: 'My Profile,
	content: 'Lorem ipsum....'
});

// Open Sesame!
modal.open();

//Update Content
modal.load('This is different content....');

LightFace provides a wealth of flexibility by providing numerous options to customize the lightbox as you’d like:

• width – (*integer|string*, defaults to ‘auto’) The desired width of the of the modal box.
• height – (*string|string*, defaults to ‘auto’) The desired height of the of the modal box.
• draggable – (*boolean*, defaults to false) Should the modal box be draggable by its title?
• title – (*string*, defaults to ”) The modal’s initial title.
• content – (*string*, defaults to ‘<p>Message not specified.</p>’) The modal’s initial content.
• buttons – (*array*, defaults to []) An array containing any number of objects containing button information.
• fadeDelay – (*integer*, defaults to 150) The delay before instructing the overlay to fade in/out.
• fadeDuration – (*integer*, defaults to 150) The duration of overlay fade while content is loading.
• keys – (*object*, defaults to object w/ ‘esc’ key handler) Key handlers to add events to while the modal box is open.
• zIndex – (*integer*, defaults to 9001) The desired zIndex of the modal.
• constrain – (*boolean*, defaults to false) Should the modal box constrain content when the window is resized?
• errorMessage – (*string*, defaults to ‘

  The requested file could not be found.

  ‘) The error message displayed if a resource is not found.
• resetOnScroll – (*boolean*, defaults to true) Keeps the modal box in the same place on the screen if the user scrolls.

LightFace features many methods to let you control the content and flow of each LightFace instance:

• load(content,title?) – loads specified content into the lightbox
• open(fast?) – opens the lightbox
• close – closes the lightbox
• fade – fades in the “loading” overlay
• unfade – fades out the “loading” overlay
• getBox – returns the entire DOM node so you may update the node itself at will
• addButton – adds a button to the lightbox footer
• showButton – shows a button
• hideButton – hides a button

LightFace.Request

LightFace.Request merges the powers of LightFace and MooTools’ Request (AJAX) class to load content into the lightbox when desired.  LightFace features an internal overlay and Facebook-style indicator which elegantly fades in and out during the time the AJAX request is running.  LightFace adds two additional options:  url and request.  The request option represents the object to be passed directly to LightFace’s internal Request class instance.  Here’s what a usage of LightFace.Request would look like:

// Create the instance
var modal = new LightFace.Request({
	width: 400,
	height: 300,
	title: 'User Information',
	url: 'user.php',
	request: {
		method: 'post',
		data: {
			userID: 3
		}
	}
});

// Open!
modal.open();

// Load a different url!
modal.load('content.php','Static Content');

An AJAX request is made to the url provided.  LightFace.Request mixes the settings provided with the internal Request class’ default settings so you always have callbacks once the request is complete!

LightFace.Image

LightFace.Image specializes in loading images within the lightbox.  The advantage to using LightFace.Image is that the lightbox will constrain the images to appropriate height and width with relation to the window size.  If the user resizes their browser, the image will resize appropriately.

var light = new LightFace.Image({
	title: 'Image ' + (index + 1),
	fadeDuration: 100,
	fadeDelay: 400,
	keys: {
		left: function() { //load the previous image
			if(index!= 0) this.load(images[--index],'Image ' + (index + 1));
		},
		right: function() { //load the next image
			if(index != images.length-1) this.load(images[++index],'Image ' + (index + 1));
		},
		esc: function() {
			this.close();
		}
	}
});

If you want certain images to load in an IFrame, with the following HTML format:

<a href="large.jpg" rel="lightface"><img src="thumb.jpg" alt="My Image" title="Click for larger view" /></a>

…you could easily code the following:

var modal = new LightFace.Image();
$$('a[rel="lightface"]').addEvent('click',function() {
	modal.load(this.get('src'),this.get('alt'));
});

LightFace does not internally look for links with specific rel attributes.  My opinion is that those techniques are bad practice.

LightFace.IFrame

LightFace.IFrame provides a simple method for loading content from within an IFrame.  No thrills here, but the original LightFace class has been modified to look more elegant.  An example usage would be:

var modal = new LightFace.IFrame({ 
	height:400, 
	width:800, 
	url: 'http://google.com', 
	title: 'Google!' 
}).addButton('Close', function() { 
	light.close(); 
},true).open();

I recommend setting a fixed height and width when creating LightFace.IFrame instances.

LightFace.Static

All LightFace classes automatically size and center the modal dialog. LightFace.Static bucks the trend by allowing for absolute positioning of the lightbox so you can place dialog anywhere you’d like!  Provide x and y coordinates to place the LightFace and it will appear exactly where you would like it to, plus offsets provided within the instance options:

//Create context menu
var contextFace = new LightFace.Static({
	title: 'Context',
	content: 'Hello!',
	width: 80,
	height: 100
});

//Open when context-link is clicked
document.id('context-link').addEvent('click',function(e){
	if(e) e.stop();
	contextFace.open(false,e.page.x,e.page.y);
});

//Close if clicked outside
var closer = function(e) {
	var parent = document.id(contextFace).getParent('.lightface');
	if(e.target != parent && !parent.contains(e.target)) {
		contextFace.close();
	}
};
document.id(document.body).addEvent('click',closer);

LightFace.Static is a perfect candidate for your next context menu or “toaster” functionality.

More To Come!

Look forward to more demos of how you can use LightFace in the future (like photo tagging).  In the mean time, please feel free to fork on GitHub to help me improve LightFace and file bug reports on LightFace issues.

LightFace: Facebook Lightbox for MooTools is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

It’s often interesting to think about where on a given element, whether it be the page, an image, or a static DIV, your users are clicking.  With that curiosity in mind, I’ve created HeatMap: a MooTools class that allows you to detect, load, save, and display spots on a given area where a user has clicked.

The CSS

There’s really only one CSS declaration you’ll need to make with HeatMap, and that’s the CSS class that represents how a spot should look.  A sample spot CSS class could look like:

.heatmap-spot	{ 
	width:6px; 
	height:6px; 
	margin-top:-3px; 
	margin-left:-3px;
	-webkit-border-radius:4px; 
	-moz-border-radius:4px; 
	background:#fff; 
	position:absolute; /* important! */
	z-index:200; 
}

HeatMap was created to allow spot styling to look however you’d like. Note that you’ll want to add negative margins to the spot depending on how large you create the spot.

The MooTools JavaScript

The class is relatively compact but grew larger than I had expected.  HeatMap allows for easy loading and saving of spots with minimal code.  Here’s the complete class:

var HeatMap = new Class({
	options: {
		event: 'click',
		load: {
			// request settings here
		},
		method: 'get',
		save: {
			// request settings here
		},
		spotClass: 'heatmap-spot',
		zone: ''/*,
		onClick: $empty,
		onSpot: $empty
		*/
	},
	Implements: [Options,Events],
	initialize: function(element,options) {
		this.element = document.id(element).setStyle('position','relative');
		this.setOptions(options);
		this.newClicks = [];
		this.oldClicks = [];
		this.attachEvents();
	},
	attachEvents: function() {
		var self = this;
		this.clickEvent = function(e) {
			var obj = self.getRelativePosition(e.page.x,e.page.y);
			obj.spot = self.createSpot(obj.x,obj.y);
			self.newClicks.push(obj);
		};
		this.element.addEvent(this.options.event,this.clickEvent);
	},
	detachEvents: function() {
		this.element.removeEvent(this.options.event,this.clickEvent);
	},
	getRelativePosition: function(x,y) {
		var position = this.element.getPosition();
		return { x: x - position.x, y: y - position.y };
	},
	load: function() {
		if(!this.loadRequest) this.loadRequest = new Request.JSON(this.options.load);
		if(!this.options.load.onSuccess && !this.loadSuccess) {
			this.loadSuccess = function(json) {
				json.each(function(click,i) {
					json[i].spot = this.createSpot(click.x,click.y);
					this.oldClicks.push(json[i]);
				},this);
			}.bind(this);
			this.loadRequest.addEvent('success',this.loadSuccess);
		}
		this.loadRequest[this.options.method]({
			load: 1,
			zone: this.options.zone
		});
		return this;
	},
	save: function(data) {
		if(!this.sendRequest) this.sendRequest = new Request.JSON(this.options.save);
		if(this.newClicks.length) {
			this.sendRequest.addEvent('success',function() {
				this.newClicks.each(function(click) {
					this.oldClicks.push(this.createSpot({ x: click.x, y:click.y }));
				},this);
				this.newClicks = [];
			}.bind(this));
			this.sendRequest[this.options.method]({
				save: 1,
				zone: this.options.zone,
				data: this.newClicks
			});
		}
		return this;
	},
	createSpot: function(x,y) {
		var spot = new Element('div',{
			'class': this.options.spotClass,
			styles: {
				top: y.toInt(),
				left: x.toInt()
			}
		}).inject(this.element);
		this.fireEvent('spot',[spot,x,y]);
		return spot;
	}
});

Arguments for HeatMap include:

• element: the element with which to listen for clicks on
• options: options for the class instance

Options for HeatMap include:

• event: (string, defaults to event) the event to listen for — defaults to click
• load: (object, defaults to {}) the Request.JSON options object for loading spots
• method: (string, defaults to “get”) the Request.JSON request type
• save: (object, defaults to {}) the Request.JSON options object for saving spots
• spotClass: (string, defaults to ‘heatmap-spot’) the CSS class for styling a spot
• zone: (string, defaults to ”) the “zone” by which the click will be saved under; especially important if more than one spot is one the page.

Events for HeatMap include:

• onSpot: fires when a spot is created.

A relatively simple class.  The class could have more complexity but I’ve chosen to keep it simple for iteration one.

HeatMap Usage

Using HeatMap is as simple as this:

/* usage */
window.addEvent('domready',function() {
	map = new HeatMap('ricci-map',{
		zone: 'cricci',
		save: { url: 'heat-map.php' },
		load: { url: 'heat-map.php' },
		onSpot: function(spot) {
			spot.setStyle('opacity',0).fade(1);
		}
	});
	document.id('loader').addEvent('click',function() {
		map.load();
	});
	document.id('saver').addEvent('click',function() {
		map.save();
	});
});

Much simpler than you had probably imagined!  I’d recommend using click as the event — using other types of events could be confusing to users and could result in massive amounts of data for mouseenter events.

The MySQL Table

My MySQL table looks as follows:

CREATE TABLE `example_heatmap` (
  `click_id` mediumint(6) NOT NULL auto_increment,
  `zone` varchar(60) NOT NULL default '',
  `x` smallint(5) NOT NULL default '0',
  `y` smallint(5) NOT NULL default '0',
  `date_clicked` datetime NOT NULL,
  PRIMARY KEY  (`click_id`)
) ENGINE=MyISAM AUTO_INCREMENT=22 DEFAULT CHARSET=utf8;

How you choose to set up the SQL side of this is entirely up to you.

The PHP Script 

A few thing I’d like to point out about the server-side handling of HeatMap:

1. You can use any server-side language to facilitate the loading of saving of spots — I simply used PHP because it’s what I’m most familiar with.
2. Save your complaints about my usage of PHP’s native mysql functions and the lack of validation — my focus with this post is the JavaScript class.

Without further adieu, here’s a PHP solution for saving and loading spots:

/* load  */
if(isset($_GET['load'])) {
	
	/* vars */
	$spots = array();
	
	/* connect to the db */
	$connection = mysql_connect('localhost','dbuser','dbpass');
	mysql_select_db('dbname',$connection);
	
	/* get spots */
	$query = 'SELECT * FROM example_heatmap WHERE zone = \''.mysql_escape_string($_GET['zone']).'\' LIMIT 2000';
	$result = mysql_query($query,$connection);
	while($record = mysql_fetch_assoc($result)) {
		$spots[] = $record;
	}
	
	/* close db connection */
	mysql_close($connection);
	
	/* return result */
	$json = json_encode($spots);
	echo $json;
	die();
}
/* save */
elseif(isset($_GET['save']) && isset($_GET['data']) && count($_GET['data'])) {
	
	/* vars */
	$query = 'INSERT INTO example_heatmap (zone,x,y,date_clicked) VALUES ';
	$queryRecords = array();
	$records = 0;
	
	/* connect to the db */
	$connection = mysql_connect('localhost','dbuser','dbpass');
	mysql_select_db('dbname',$connection);
	
	/* save! */
	foreach($_GET['data'] as $data) {
		$queryRecords[] =  '(\''.mysql_escape_string($_GET['zone']).'\','.mysql_escape_string($data['x']).','.mysql_escape_string($data['y']).',NOW())';
		$records++;
	}
	
	/* execute query, close */
	$query.= implode(',',$queryRecords);
	mysql_query($query,$connection);
	mysql_close($connection);
	
	/* return result */
	die(count($records));
}

I prefer to use one script for both the saving and loading of spots — using one script cuts down on the number of files you need and the logic to handle multiple functionality isn’t difficult to organize within that one file.

Bring the Heat!

MooTools HeatMap is something I find incredibly fun.  You could use HeatMap on an image, a static DIV, or the entire body.  If you don’t want the user to see spots and simply want to track their clicks, you could hide spots and periodically save clicks.  Have fun with this class and let me know if you have suggestions!

Introducing MooTools HeatMap is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.