A few days ago I blogged about Spry's HTML panel. This is a rather cool, and simple, way to load content into a region of your web page via Ajax. Kin Blas of the Spry team pointed out that I missed one of the cooler features - States. Spry's Data Set feature includes a simple way to handle error and loading states. You can use some specially named DIVs and Spry will handle hiding/showing what it needs to. Turns out - the HTML panel system supports the same thing! Let's look at an example.

First off - here is a simple HTML page, based on the versions I worked on in the earlier example:

<html>

<head> <script src="/spryjs/SpryHTMLPanel.js" language="javascript" type="text/javascript"></script> <link href="/sprycssSpryHTMLPanel.css" rel="stylesheet" type="text/css"> <style type="text/css"> .HTMLPanelLoadingContent, .HTMLPanelErrorContent { display: none; } </style> </head>

<body>

<h2>State Test</h2>

<p> <b> <a href="htmltest.cfm?slow=likeparis" onClick="panel.loadContent(this.href); return false">Test Slow</a> / <a href="htmltest.cfm?bad=likelindsey" onClick="panel.loadContent(this.href); return false">Test Error</a> / <a href="htmltest.cfm" onClick="panel.loadContent(this.href); return false">Test Good</a> </b> </p>

<div id="panel"> <p> Please click something! </p> <div class="HTMLPanelLoadingContent">Plesse stand by - loading important content...</div> <div class="HTMLPanelErrorContent">Something went wrong. I blame Microsoft.</div> </div>

<script type="text/javascript"> var panel = new Spry.Widget.HTMLPanel("panel"); </script> </body> </html>

The first thing I want to point out is 2 new CSS elements: HTMLPanelLoadingContent and HTMLPanelErrorContent. I manually set their display to none. (I'm not sure why these aren't defined in SpryHTMLPanel.css) Next look at my links:

<a href="htmltest.cfm?slow=likeparis" onClick="panel.loadContent(this.href); return false">Test Slow</a> / <a href="htmltest.cfm?bad=likelindsey" onClick="panel.loadContent(this.href); return false">Test Error</a> / <a href="htmltest.cfm" onClick="panel.loadContent(this.href); return false">Test Good</a>

For my demo I linked to the same page 3 times, with different URL parameters in each one. I've got a 'slow' test, an error test, and a simple good test. Next look in my panel. I added 2 new DIVs:

<div class="HTMLPanelLoadingContent">Please stand by - loading important content...</div> <div class="HTMLPanelErrorContent">Something went wrong. I blame Microsoft.</div>

The rest of the code is not changed. Spry will notice these 2 classes on load and when the specific state occurs (loading content, or an error), it will show and hide the divs. Pretty simple, right? The CFM code is nothing complex:

<cfif structKeyExists(url, "slow")> <cfset sleep(2000)> </cfif>

<cfif structKeyExists(url, "bad")> <cfthrow message="Holy errors, Batman!"> </cfif>

<cfoutput> Here is the CFM page. It's Business Time! </cfoutput>

As you can see, I simply check for the URL parameters and either intentionally slow the page down or throw an error. You can see a live demo of this here.