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>
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}