Spry's HTML Panel (2)

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> </code>

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> </code>

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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for Extend by Auth0. He focuses on serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.

Lafayette, LA https://www.raymondcamden.com

Comments