Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Coldfusion Example: Using jQuery UI Accordion with a ColdFusion Query

DZone's Guide to

Coldfusion Example: Using jQuery UI Accordion with a ColdFusion Query

· Java Zone
Free Resource

Just released, a free O’Reilly book on Reactive Microsystems: The Evolution of Microservices at Scale. Brought to you in partnership with Lightbend.

A reader pinged me yesterday with a simple problem that I thought would be good to share on the blog. He had a query of events that he wanted to use with jQuery UI's Accordion control. The Accordion control simply takes content and splits into various "panes" with one visible at a time. For his data, he wanted to split his content into panes designated by a unique month and year. Here is a quick demo of that in action.

I began by creating a query to store my data. I created a query with a date and title property and then random chose to add 0 to 3 "events" over the next twelve months. I specifically wanted to support 0 to ensure my demo handled noticing months without any data.

01. <!---
02. Create some fake data withdates
03. --->
04. <cfscript>
05. q = queryNew("date,title");
06. for(i=1; i<12; i++) {
07.     //for each month, we add 0-3 events (some months may not have data)
08.     toAdd = randRange(0, 3);
09.      
10.     for(k=0; k<toAdd; k++) {
11.         newDate = dateAdd("m", i, now());
12.         queryAddRow(q, {date:newDate, title:"Item #i##k#"});   
13.     }
14. }
15. </cfscript>

To handle creating the accordion, I had to follow the rules jQuery UI set up for the control. Basically - wrap the entire set of data in a div, and separate each "pane" with an h3 and inner div. To handle this, I have to know when a new unique month/year "block" starts. I store this in a variable, lastDateStr, and just check it in every iteration over the query. I also need to ensure that on the last row I close the div.

01. <!doctype html>
02. <htmllang="en">
03. <head>
04.     <metacharset="utf-8">
05.     <title>jQuery UI Accordion - Default functionality</title>
06.     <linkrel="stylesheet"href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
07.     <scriptsrc="//code.jquery.com/jquery-1.10.2.js"></script>
08.     <scriptsrc="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
09.     <script>
10.     $(function() {
11.     $( "#accordion" ).accordion();
12.     });
13.     </script>
14. </head>
15. <body>
16.     <divid="accordion">
17.  
18.         <cfsetlastDateStr= "">
19.         <cfloopquery="q">
20.             <cfsetthisDateStr= month(date) & "/" & year(date)>
21.              
22.             <!--- Is this datestr different? --->
23.             <cfifthisDateStr neq lastDateStr>
24.                 <!--- We only 'close' a div if not on the first iteration --->
25.                 <cfifcurrentRow neq 1>
26.                     </div>
27.                 </cfif>
28.                 <cfoutput>
29.                 <h3>#thisDateStr#</h3>
30.                 </cfoutput>
31.                 <div>
32.                 <cfsetlastDateStr= thisDateStr>
33.             </cfif>
34.              
35.             <cfoutput>
36.             #title#
37.  
38.             </cfoutput>
39.              
40.             <cfifcurrentRow is recordCount>
41.                 </div>
42.             </cfif>
43.              
44.         </cfloop>
45.     </div>
46. </body>
47. </html>

And the end result: 


So, not rocket science, but hopefully helpful to someone. Here is the entire template if you want to try it yourself.

01. <!---
02. Create some fake data withdates
03. --->
04. <cfscript>
05. q = queryNew("date,title");
06. for(i=1; i<12; i++) {
07.     //for each month, we add 0-3 events (some months may not have data)
08.     toAdd = randRange(0, 3);
09.      
10.     for(k=0; k<toAdd; k++) {
11.         newDate = dateAdd("m", i, now());
12.         queryAddRow(q, {date:newDate, title:"Item #i##k#"});   
13.     }
14. }
15. </cfscript>
16.  
17. <!doctype html>
18. <html lang="en">
19. <head>
20.     <meta charset="utf-8">
21.     <title>jQuery UI Accordion - Default functionality</title>
22.     <link rel="stylesheet"href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
23.     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
24.     <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
25.     <script>
26.     $(function() {
27.     $( "#accordion").accordion();
28.     });
29.     </script>
30. </head>
31. <body>
32.     <div id="accordion">
33.  
34.         <cfset lastDateStr = "">
35.         <cfloop query="q">
36.             <cfset thisDateStr = month(date) & "/"& year(date)>
37.              
38.             <!--- Is thisdatestr different? --->
39.             <cfif thisDateStr neq lastDateStr>
40.                 <!--- We only 'close'a div ifnot on the first iteration --->
41.                 <cfif currentRow neq 1>
42.                     </div>
43.                 </cfif>
44.                 <cfoutput>
45.                 <h3>#thisDateStr#</h3>
46.                 </cfoutput>
47.                 <div>
48.                 <cfset lastDateStr = thisDateStr>
49.             </cfif>
50.              
51.             <cfoutput>
52.             #title#
53.  
54.             </cfoutput>
55.              
56.             <cfif currentRow is recordCount>
57.                 </div>
58.             </cfif>
59.              
60.         </cfloop>
61.     </div>
62. </body>
63. </html>  

Strategies and techniques for building scalable and resilient microservices to refactor a monolithic application step-by-step, a free O'Reilly book. Brought to you in partnership with Lightbend.

Topics:

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}