Using jQuery and ColdFusion to create an auto-link for definition application (2)

This post is more than 2 years old.

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:


//get the text from the div
var content = $("#content").text()
//split into words
var words = content.split(/\b/)
//store unique words
var uWords = new Object()
for(var i=0; i<words.length;i++) {
	var word = words[i]
	word = word.replace(/[\s\n]/g,'')
	if(word != '' && uWords[word] == null) uWords[word] = '' 		
//convert to array
var aWords = new Array()
for(var w in uWords) aWords.push(w)
if(aWords.length) $.post('term.cfc?method=filteredTermList&returnFormat=json',{termList:aWords.toString()},highlightWords,"json")


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:

<div style="display: none;" id="example" title="Definition"></div>

The next change was simpler. First - here was the code I had used for cfwindow support:

<cfajaximport tags="cfwindow" /> (deletia here...) <script> function showTerm(term){ ColdFusion.Window.create('term','Definition of '+term,'term.cfc?method=definition&term='+escape(term)+'&returnformat=plain', {center:true,modal:true}) ColdFusion.Window.onHide('term',winClosed); return false } function winClosed() { ColdFusion.Window.destroy('term',true) } (more code here...)

I removed the cfajaximport of course, and dropped winClosed. showTerm is now somewhat simpler:

function showTerm(term){ $("#example").load('term.cfc?method=definition&term='+escape(term)+'&returnformat=plain').dialog("open") // $("#example").data("title.dialog", "Definition of "+term) return false }

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: As always, don't forget you can View Source to see the complete code behind the client side stuff.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Richard D. Worth posted on 2/3/2009 at 11:05 PM

Thanks for all of these informative posts. Just a quick note: the syntax you used

$("#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.

Comment 2 by Raymond Camden posted on 2/3/2009 at 11:14 PM

Ah thanks. I noticed this isn't documented yet. Will it be when 1.6 is released?

Comment 3 by Richard D. Worth posted on 2/3/2009 at 11:16 PM

I appreciate the reminder. I'll make sure it is :)