DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Securing Your Software Supply Chain with JFrog and Azure
Register Today

Trending

  • Future of Software Development: Generative AI Augmenting Roles and Unlocking Co-Innovation
  • Grow Your Skills With Low-Code Automation Tools
  • Hiding Data in Cassandra
  • Microservices With Apache Camel and Quarkus (Part 3)

Trending

  • Future of Software Development: Generative AI Augmenting Roles and Unlocking Co-Innovation
  • Grow Your Skills With Low-Code Automation Tools
  • Hiding Data in Cassandra
  • Microservices With Apache Camel and Quarkus (Part 3)
  1. DZone
  2. Data Engineering
  3. Databases
  4. Coldfusion Example: Using jQuery UI Accordion with a ColdFusion Query

Coldfusion Example: Using jQuery UI Accordion with a ColdFusion Query

Raymond Camden user avatar by
Raymond Camden
·
Nov. 13, 14 · Interview
Like (0)
Save
Tweet
Share
4.17K Views

Join the DZone community and get the full member experience.

Join For Free

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>   
JQuery UI Database

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

Opinions expressed by DZone contributors are their own.

Trending

  • Future of Software Development: Generative AI Augmenting Roles and Unlocking Co-Innovation
  • Grow Your Skills With Low-Code Automation Tools
  • Hiding Data in Cassandra
  • Microservices With Apache Camel and Quarkus (Part 3)

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: