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

Microservices! They are everywhere, or at least, the term is. When should you use a microservice architecture? What factors should be considered when making that decision? Do the benefits outweigh the costs? Why is everyone so excited about them, anyway?  Brought to you in partnership with IBM.

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>  

Discover how the Watson team is further developing SDKs in Java, Node.js, Python, iOS, and Android to access these services and make programming easy. Brought to you in partnership with IBM.

Topics:

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

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}