Spry :: Dynamic Panels Within Dynamic Accordions
July 31 2006 by 
Andrew Powell
For the last week or so, my holy grail has been a dynamic content panel in a dynamic accordion via Spry. Well, I have finally achieved this goal! I started with the region observer/dynamic accordion example on Adobe Labs. I then modified the file so that I had a detail dataset (which could return multiple rows), and then put the output for that dataset in the PanelContent section of the accordion. When you click on the panelTab, the current row of the master dataset is set, and the region observer sees that the region has changed. The region observer then reads the current row of the master dataSet and sets the current panel to the same index.
The code is a bit hard to follow, but here it is:
<script language="JavaScript" type="text/javascript">
dsOrders = new Spry.Data.XMLDataSet("/spry/?event=orderSummaryList", "/orders/row", {useCache:false});
dsOrderDetail = new Spry.Data.XMLDataSet("/spry/?event=orderStatusDetail&orderNumber={dsOrders::ORDERNUM}", "/orderDetail/order", {useCache: false});
var regObserver = new Object;
regObserver.onPostUpdate = function(notifier, data)
{
var acc = new Spry.Widget.Accordion("orders", {defaultPanel: dsOrders.getCurrentRowNumber()});
};
Spry.Data.Region.addObserver("orders", regObserver);
function clicker(rowNum)
{
dsOrders.setCurrentRow(rowNum);
}
</script>
<div id="orders" class="Accordion" spry:region="dsOrders dsOrderDetail">
<div class="AccordionPanel" spry:repeat="dsOrders">
<div class="AccordionPanelTab" spry:hover="AccordionPanelLabelHover" onclick="clicker({dsOrders::ds_RowID});"><b spry:content="{dsOrders::ORDERNUM} - {dsOrders::ORDERDATE}"></b></div>
<div class="AccordionPanelContent">
<div spry:state="loading"><img src="/assets/images/ajax-loader.gif"/></div>
<div spry:state="error"><span spry:content="Error loading data..."></span></div>
<div id="details" spry:state="ready">
<span spry:content="{dsOrderDetail::ORDERNUMBER}"></span><br/>
<span spry:content="{dsOrderDetail::PONUMBER}"></span><br/>
<span spry:content="{dsOrderDetail::SHIPPED}"></span><br/>
<span spry:content="{dsOrderDetail::BACKORDERED}"></span><br/>
<span spry:content="{dsOrderDetail::SKU}"></span><br/>
<span spry:content="{dsOrderDetail::PARTNUM}"></span><br/>
<span spry:content="{dsOrderDetail::SHIPDETAIL}"></span><br/>
</div>
</div>
</div>
</div>
Please, as always, leave any and all questions in the comments.
Posted in ColdFusion | Spry | 
0 comments