Posted in jQuery, ColdFusion | Posted on 02-03-2009 | 3,415 views
A few days ago I blogged an experiment where I used jQuery and ColdFusion to dynamically hot link certain words on a web page to a definition. At the end of the article I talked about how I had trouble using jQuery UI and decided to use cfwindow instead. Later in the week I dug deeper into jQuery UI (see related articles below) and got things working nicely. I thought it would be nice to return to the original application and update it to use the jQuery Dialog widget.
Turns out the modifications were pretty minor. If you remember my last entry on jQuery Dialog, we can use the constructor function to prepare a div to be used as the widget. I took the existing $(document).ready function add modified it:
2
3 $("#example").dialog({autoOpen:false,modal:true});
4
5 //get the text from the div
6 var content = $("#content").text()
7 //split into words
8 var words = content.split(/\b/)
9 //store unique words
10 var uWords = new Object()
11 for(var i=0; i<words.length;i++) {
12 var word = words[i]
13 word = word.replace(/[\s\n]/g,'')
14 if(word != '' && uWords[word] == null) uWords[word] = ''
15 }
16 //convert to array
17 var aWords = new Array()
18 for(var w in uWords) aWords.push(w)
19 if(aWords.length) $.post('term.cfc?method=filteredTermList&returnFormat=json',{termList:aWords.toString()},highlightWords,"json")
20});
The only change here is the very first line. Note too that I'm now using modal for the dialog. The div was added to the bottom of my HTML page like so:
The next change was simpler. First - here was the code I had used for cfwindow support:
2(deletia here...)
3<script>
4function showTerm(term){
5 ColdFusion.Window.create('term','Definition of '+term,'term.cfc?method=definition&term='+escape(term)+'&returnformat=plain', {center:true,modal:true})
6 ColdFusion.Window.onHide('term',winClosed);
7 return false
8}
9function winClosed() {
10 ColdFusion.Window.destroy('term',true)
11}
12(more code here...)
I removed the cfajaximport of course, and dropped winClosed. showTerm is now somewhat simpler:
2 $("#example").load('term.cfc?method=definition&term='+escape(term)+'&returnformat=plain').dialog("open")
3//http://groups.google.com/group/jquery-ui/browse_thread/thread/4bbffbeb4b506d1d/de1c4f8bb05c8b67?lnk=gst&q=dialog+title#de1c4f8bb05c8b67
4 $("#example").data("title.dialog", "Definition of "+term)
5 return false
6}
The first line uses the tip I showed before to load content into a div via Ajax and then create a dialog with it. The second line sets the title. This was based on a listserv thread documented in the comment.
Anyway, you can see it all here: http://www.coldfusionjedi.com/demos/term/test.cfm As always, don't forget you can View Source to see the complete code behind the client side stuff.
$("#example").data("title.dialog", "Definition of "+term)
is correct for UI 1.5 but in later versions has been deprecated. The new API for getting and setting plugin options after init is
$("#example").dialog("option", "title", "Definition of "+term)
So each jQuery UI plugin has an option method. You pass the name of the option as the first argument. If you pass a second argument it's a setter. Otherwise it's a getter.