[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 569
  • Last Modified:

Coldfusion + Javascript Question about Lists

Hi Folks,

I have a query below that outputs a list of cities.

<UL id="list">
<cfoutput query="getresults" group="City_ID" >

<LI><a href="somepage.cfm?City_ID=#City_ID#">#Cityname#</a></LI>

 </cfoutput>

</UL>

[RESULT]

Amstad
Alron
Adderson
Belleview
Banneris
Brentwood
Charstone
Cimbran
..
...
...
Zanker


I am wondering if if were possible to use javascript combined such that the output will look like that below:

[Desired Output]
A
B
C
..
..
Z

The desired output above shows the list like a simple alphabatized list, and when the user clicks on the letter A, the list will 'expand' and will show all the cities starting with 'A' as seen below:

A
Amstad
Alron
Adderson

B
C
D
.
..
Z

I have searched high and low around the internet and saw someone use a javascript code like such below to make an alphabatized list.....but I am not familiar with javascript and cannot seem to get it to work. In addition, I am hoping to make it work as an 'expanding' list as examplified above.

It would be awesome if someone could help me make this a reality! Thanks so much!

[Javascript code below]


var list = { letters: [] };    //object to collect the li elements and a list of initial letters
$("#list").children("li").each(function(){
    var itmLetter = $(this).text().substring(0,1).toUpperCase();
    if (!(itmLetter in list)) {
        list[itmLetter] = [];
        list.letters.push(itmLetter);
    }
    list[itmLetter].push($(this));    //add li element to the letter's array in the list object
});
 
list.letters.sort();    //sort all available letters to iterate over them
$.each(list.letters, function(i, letter){
    list[letter].sort(function(a, b) {
        return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());    //sort li elements of one letter
    });
    var ul = $("<ul/>");    //create new dom element and add li elements
    $.each(list[letter], function(idx, itm){
        ul.append(itm);
    });
    $("#list").append($("<li/>").append($("<a/>").attr("name", letter.toLowerCase()).addClass("title").html(letter)).append(ul));    //add the list to a new li and to #list ul
});
0
CFbubu
Asked:
CFbubu
3 Solutions
 
lwadwellCommented:
Worked fine for me.  Plus I added extra logic for the hide/show.
Note:
  a) the list is static in this example.
  b) some better CSS would go a long way.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Quick Test</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
* {
    font-family: Arial;
}
ul li {
    list-style-image: none;
    list-style-type: none;
    padding: 3px;
}
.title {
    color: #FFF;
    margin: 0;
    padding: 2px 10px;
    font-weight: bold;
    background-color: #000;
    width: 200px;
}
</style>
<script type="text/javascript">
    $(document).ready(function(){
        var list = { letters: [] };    //object to collect the li elements and a list of initial letters 
        $("#list").children("li").each(function(){ 
            var itmLetter = $(this).text().substring(0,1).toUpperCase(); 
            if (!(itmLetter in list)) { 
                list[itmLetter] = []; 
                list.letters.push(itmLetter); 
            } 
            list[itmLetter].push($(this));    //add li element to the letter's array in the list object 
        }); 
        list.letters.sort();    //sort all available letters to iterate over them 
        $.each(list.letters, function(i, letter){ 
            list[letter].sort(function(a, b) { 
                return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());    //sort li elements of one letter 
            }); 
            var ul = $("<ul/>").css("display", "none");    //create new dom element and add li elements, start hidden
            $.each(list[letter], function(idx, itm){ 
                ul.append(itm); 
            }); 
            $("#list").append($("<li/>").append($("<p/>").attr("name", letter.toLowerCase()).addClass("title").html(letter)).append(ul));    //add the list to a new li and to #list ul 
        });
        // Add click events to show/hide
        $(".title").click(function(){
            var ul = $(this).next("ul");
            if (ul.is(":hidden")) {
                ul.slideDown();
            } else {
                ul.slideUp();
            }
        });
    });

</script>
</head>
<body>

    <ul id="list">
        <li><a href="somepage.cfm?City_ID=#City_ID#">#Cityname#</a></li>
        <li><a href="somepage.cfm?City_ID=Amstad">Amstad</a></li>
        <li><a href="somepage.cfm?City_ID=Alron">Alron</a></li>
        <li><a href="somepage.cfm?City_ID=Adderson">Adderson</a></li>
        <li><a href="somepage.cfm?City_ID=Belleview">Belleview</a></li>
        <li><a href="somepage.cfm?City_ID=Banneris">Banneris</a></li>
        <li><a href="somepage.cfm?City_ID=Brentwood">Brentwood</a></li>
        <li><a href="somepage.cfm?City_ID=Charstone">Charstone</a></li>
        <li><a href="somepage.cfm?City_ID=Cimbran">Cimbran</a></li>
        <li><a href="somepage.cfm?City_ID=Zanker">Zanker</a></li>
    </ul>


</body>
</html>

Open in new window

0
 
ProculopsisCommented:





A pure
jQuery solution could help.




0
 
_agx_Commented:
The 1st option is probably slicker. But you can also generate the first "initial" in sql. Then use cfoutput group to generate the output. Note you must order the results by initial first.  

Here's a quick and dirty example based on this article

<!--- string functions are DB specific. change as needed ... --->
<cfquery name="someQuery" ...>
    SELECT  LEFT(CityName,1) AS CityInitial, CityName, City_Id
    FROM    YourTable
    ORDER BY CityInitial, CityName
</cfquery>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  	$(".content").hide();
  	$(".header").click(function() {
    	     $(this).next(".content").slideToggle(40);
  	});
});
</script>

<body>
	<ul><cfoutput query="someQuery" group="cityInitial">
		<li>
			<div class="header">#CityInitial#</div>
			<div class="content">
			<cfoutput>
				<a href="somepage.cfm?City_ID=#City_ID#">#Cityname#</a><br/>
			</cfoutput>
			</div>
		</li>
		</cfoutput>
	</ul>
</body>
</html>

Open in new window

0
 
CFbubuAuthor Commented:
OMG.....you guys are ALL awesome! Thanks so very much for your generosity in helping with my question :)

I wish I could award everyone here who posted solutions all the full award points!

I think all 3 posted solutions were very viable, and I will be implementing all your different suggestions. It will take a little time to decide which would suit my style and purpose best, but I am thrilled at the options given here.

And _agx_ , why does it not surprise me that you are always there to help me out. I wish I had a way to contact you ...and no, I would not harass you with my issues:P I think I have an interesting proposition that may turn up in the near future, and I am hoping that I could tell you more about it...:) Anyways, no worries if you so decide for our contact to remain here. I am just glad to have you around!

Thank you everyone!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now