• View
  • Source

Fragment-1 | Fragment-2 | Fragment-3 | Fragment-4 | Non-Existent-Fragment

This is some static content within an HTMLPanel container. It will disappear once content is loaded into the panel via one of the links above.

Almost any block or inline element can be an HTMLPanel container.

This is an example of some content that will only show when the HTML Panel loads content.

This is an example of some content that will only show when the HTML Panel fails to load content.

Handler

<cffunction name="dspHTMLPanel" access="public" returntype="void" output="false">
    <cfargument name="Event" type="coldbox.system.beans.requestContext">
    <cfset var spry = getPlugin("Spry",true)>
    <cfset spry.setHTMLPanel("HTMLPanel1")>
    <cfset Event.setView("spryExample/HTMLPanel")>        
</cffunction>

View

<p>
    <a href="?event=spryExample.dspFragment&fragId=1" onclick="HTMLPanel1.loadContent(this.href); return false;">Fragment-1</a> |
    <a href="?event=spryExample.dspFragment&fragId=2" onclick="HTMLPanel1.loadContent(this.href); return false;">Fragment-2</a> |
    <a href="?event=spryExample.dspFragment&fragId=3" onclick="HTMLPanel1.loadContent(this.href); return false;">Fragment-3</a> |
    <a href="?event=spryExample.dspFragment&fragId=4" onclick="HTMLPanel1.loadContent(this.href); return false;">Fragment-4</a> |
    <a href="http://www.coldboxframewo" onclick="HTMLPanel1.loadContent(this.href); return false;">Non-Existent-Fragment</a>
</p>
<div class="HTMLPanel" id="HTMLPanel1">
    <p>This is some static content within an HTMLPanel container. It will disappear once content is loaded into the panel via one of the links above.</p>
    <p>Almost any block or inline element can be an HTMLPanel container.</p>
    <div class="HTMLPanelLoadingContent">
        <p>This is an example of some content that will only show when the HTML Panel loads content.</p>
    </div>
    <div class="HTMLPanelErrorContent">
        <p>This is an example of some content that will only show when the HTML Panel fails to load content.</p>
    </div>
</div>

</body>
</html>