Coldfusion Example: Using jQuery UI Accordion with a ColdFusion Query
Join the DZone community and get the full member experience.
Join For FreeA 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>
Published at DZone with permission of Raymond Camden. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments