Wednesday 20 Aug 2014   
Add Comment

ColdFusion jQuery Introduction Part 3

ColdFusion Tutorial #44

This is part 3 of a 3 part series:

So we’ve now loaded a number of football teams from the server, after the page has loaded... without a page refresh. But wouldn’t be useful if clicking on one of those team names displayed a list of players on that team?

script.cfm

Inside of our $(document).ready(function() {}); we’re going to add the following:



demo.cfm

The first line of our newly added script refers to any <a> element that’s inside an <li> element within the <ul> whose id is “teamList”. This is the data that we loaded with our previous piece of the script.

Notice that instead of simply using a click event handler, we’re using jQuery’s live() method. This is new in jQuery 1.3, and binds an event handler to an element that was created after the DOM initially loaded.

Because our list of teams was loaded via our script (e.g. after the initial page load), we need to use live() to tell jQuery to listen for events on these elements.

So, what happens on this click:

1) We’re going to show() the element with id=”players”. In this case, it’s a div that’s initially set to display:none; via our <style> block.

2) On any <a> element inside an <li> element within the <ul> with id=”teamList” (again, these are the links we created with our initial script), remove the css class “activeLink”. The “activeLink” class is declared as bold, with no underline. Because we don’t know which element might have this class assigned at any time, we simply remove it from all elements.

3) $(this) refers to the link that triggered the click handler. We’re going to do 2 things to this element:
a) Add the css class “activeLink” (make it bold)
b) Use the jQuery blur() method to remove focus from it. This will remove the outline that some browsers leave on a link element after it’s been clicked.

3) This spans 3 lines, and makes use of “method chaining” in jQuery. The same thing could have been written as: $(this).addClass(‘activeLink’); $(this).blur(); But method chaining saves you from having to create a new reference to $(this) for each method you want to call on the element.

4) For the element with the id="playerList" attribute, which is a <ul> containing a list of player names, first hide that element and then empty it (effectively remove all <li> elements from it). Again, we’re using method chaining to avoid having to create multiple references to $(‘#playerList’).

5) Our getJSON() call, which is very similar to the getJSON() call we used previously. However, in this instance we want to pass an argument to the method (getPlayersByTeam). The argument name is "team", and the value is the value of the text of the element that was clicked.

6) Again, we have a callback function that loops over the returned JSON. In this case, we’re doing 2 things:
a) Prior to the loop: there is one <p /> element inside of the element
with id=”players”. Modify the text inside of that <p> via jQuery’s text() method. The text() method is an implicit getter/setter. If you don’t pass data, it retrieves the text. If you do pass data, which we are doing in this case, it sets the text. In this case, we’re setting it to be the team name (dynamic), plus the static string “ Players”. Because we only need to set this once, we do it before the .each().
b) Within the loop: Create an <li> element that contains the current player’s name. Each <li> is appended to the <ul> with id=”playerList”.

7) The <ul> with the id=”playerList” is currently hidden (step #4 above). Use jQuery’s fadeIn() method to gradually bring it into view over a time span of 1000ms.

8) Because we clicked on an <a href> element to trigger this script, we want to return false in order to prevent the browser from trying to follow the link.

That’s it. You can save the following as an .html file, and along with the code for the CFC ( http://tutorial43.learncf.com/ ), test on your own machine. Because there’s no ColdFusion happening on the client side, you can safely name the file .html (as opposed to .cfm). However, you do need to have ColdFusion running in order to handle the getJSON() request (handled by the CFC). Remember, for the code to run as-is, both the .html and the .cfc must reside in the same directory/folder.



Demo

See this code running!


Download

Download this code as a zip!


Comments

There are no comments!

Click button to add a comment


Author

Charlie Griefer


Published

Monday 21 Sep 2009

Tags

cfoutput