Creating a Dialog with jQuery UI (2)

This post is more than 2 years old.

Yesterday I blogged about my experience working with jQuery UI and the Dialog widget. In general it went well (after a slightly rough start), but I was able to get things working nicely and even played around with the themes a bit. I thought things were working fine. I could click my link, and the dialog would show up. (See the exciting, thrilling demo here.) However, there was a bug with how I used the code. If you click on the link it will load the dialog, but if you close it, you can't reopen it. Here is how I fixed the problem.

First, let's take a quick look at how the dialog was set up:

<script> function showDialog(){ $("#example").dialog(); return false; } </script>

The function showDialog was tied to a simple link on the page. Clicking it once works fine, but any subsequent link would do nothing. Checking the docs a bit closer, I discovered that the .dialog() call was mostly meant to be used to setup the Dialog, not show it. It certainly will show a dialog of course, as you can see in the demo, but really it should only have been used once. Here is a modified version that works nicer:

<script> function showDialog(){ $("#example").dialog("open"); return false; }

$(document).ready(function() { $("#example").dialog({autoOpen:false}); });

</script>

In this version, I use the $(document).ready to set up the dialog box when the page loads. Notice the use of autoOpen:false. This will set up my dialog but not show it. Now my showDialog function can run dialog("open") to pop open the dialog no matter how many times it is closed.

You can see a demo of this, and the amazing 'Swanky Purse' theme, here: http://www.coldfusionjedi.com/demos/jqueryuitest2/test4.html Remember you can View Source for the complete page.

I will also point out two other fixes by posters on the last blog entry. One by Akira and one by Joel Cox.

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 https://www.raymondcamden.com

Archived Comments

Comment 1 by Neil Bailey posted on 2/2/2009 at 9:22 PM

Ray,

Hopefully you'll excuse my ignorance: I have never worked w/ JQuery. Is their UI package the same sort of thing as ExtJs, and if so, is it a package of the same caliber? We have been using EXT for about a year and a half now, but are always on the prowl for new stuff.

Comment 2 by Raymond Camden posted on 2/2/2009 at 9:27 PM

Neil, I'm probably the worst person to ask. My experience with jQuery UI is now 2 days old. ;) My early impression is no - Ext seems to have the best UI stuff so far. But I don't find Ext as friendly as jQuery (and you know I've had trouble w/ jQuery so that is saying a lot). I've got Cutter's Ext book but haven't had a chance to read it yet though.

I'd say jQuery's UI stuff is early yet, but the team is definitely working hard on it.

Nice and vague? :) Hopefully other readers who have used both will chime in.

Comment 3 by Raymond Camden posted on 2/2/2009 at 9:28 PM

Oh, and you asked if it is the 'same sort of thing'. Not quite sure what you mean there. If you mean a package of things to support UI widgets/effects, then I guess so.

Comment 4 by Neil Bailey posted on 2/2/2009 at 9:31 PM

I had no idea there WAS an EXT book - on Amazon? I'll buy it now.

In my opinion, EXT is the best available so far. When I just read your post, I immediately googled the JQuery UI, and was looking thru their widgets, and the tabs widget blew up _badly_ on the ajax content functionality - it seemed to be in a loop that just kept throwing errors, and I had to actually shut the browser via task manager.

Ext can definitely be a pain in the behind, and I would like tot hink I am fairly capable in JS. However, their forums are pretty active, and while the docs are incomplete and often flat out wrong, if you ask a question on their forums, they'll usually give you an answer PDQ.

Comment 5 by Raymond Camden posted on 2/2/2009 at 9:34 PM

This is it:

http://www.amazon.com/Learn...

If you give me another minute, I'll post a referral link. That way if you do buy it, I get a few cents. ;)

Comment 6 by Raymond Camden posted on 2/2/2009 at 9:36 PM

Lets see if this works:

http://www.amazon.com/gp/pr...

Comment 7 by Neil Bailey posted on 2/2/2009 at 9:53 PM

what they need to put together - in my useless opinion - is a complete reference book. This book looks like its geared more towards people who are just picking EXT up.

You said you have the book? We've been using EXT for about 18 months - do you think we could use a copy, or is it written more for people who have never used EXT before?

And if you know of a complete EXT reference book (or even semi-complete)?

Comment 8 by Raymond Camden posted on 2/2/2009 at 9:55 PM

I've only read the first few pages, but I believe you are right - geared toward the beginner (which I am, so that makes it perfect ;). To be honest, I don't think a reference makes sense in print form. Stuff like that should be online.

Comment 9 by Edward Beckett posted on 2/2/2009 at 9:58 PM

Nice ... GoodBye to the el Generic-O looking JavaScript Alerts ...

I think I'll try this on my contact form messaging ... good examples Ray ...

:)

Comment 10 by Raymond Camden posted on 2/2/2009 at 10:01 PM

@EB: Note that I didn't show any of the other options, like resizing, dragging, etc. Although to be fair, I probably wouldn't use resizable dialogs very often. I'd use em like alerts, like you suggest, and for those I probably wouldn't want them moved/sized. I should have shown the modal option though.

Comment 11 by Neil Bailey posted on 2/2/2009 at 10:02 PM

its funny that you say that, Ray - we buy every friggin reference book we can get our hands on, but I can't even remember the last time I opened one. CfQuickDocs, the EXT API, and the ASP.Net online docs are tabs that open in IE on start up...

Comment 12 by Raymond Camden posted on 2/2/2009 at 10:03 PM

@NB: Save a tree man! ;)

Comment 13 by Neil Bailey posted on 2/2/2009 at 10:05 PM

Excellent advice, sir. I will be sure to pass that advice along at the next dev meeting :)

Comment 14 by Kumar posted on 2/3/2009 at 12:19 AM

I am wondering, can you pass in a "url" parameter to the dialog call, to make it load the content of the dialog through an Ajax call to the URL?

Comment 15 by Raymond Camden posted on 2/3/2009 at 12:25 AM

Kumar, yes, you can. In my post from yesterday I mentioned Richard Worth's tip of a dynamic dialog:

$("<div>I'm in a dialog</div>").dialog()

You could easily change that to use the result of some Ajax call.

Folks want a CF based demo?

Comment 16 by Raymond Camden posted on 2/3/2009 at 12:27 AM

Found this example:

http://groups.google.com/gr...

Looks too easy. ;)

Comment 17 by Kumar posted on 2/3/2009 at 3:53 AM

It surely is.

Comment 18 by Scott Jehl posted on 2/3/2009 at 8:44 AM

Nice update - much improved :)

By the way, we plan to include notes about this with the UI zips, but with themes like the ones you chose which use an em-based global font size, they assume a parent font size of 1em = 10px. If you're going off browser defaults, 1em blows up to around 16px and that's why the text is rather large in these examples. To get it looking how it was intended, you can simply set your body font size to 62.5% (~10px).
body {font-size: 62.5%; }

Comment 19 by Raymond Camden posted on 2/3/2009 at 8:47 AM

Funny - and here I thought the text was a perfect size. ;) I guess I'm getting older. Too much text on the net seems a bit too small for me, so I don't mind things being a bit too big.

Comment 20 by Jade posted on 2/3/2009 at 9:04 AM

My history seems to parallel Raymonds w/ regards to js - wouldn't touch it. 6 mo ago however, started using jQuery and I fell in love.

I'm using the jqModal & love the simplicity. I have one div @ bottom of page:

<div class="jqmWindow" id="cxDialog">
Please wait... <img src="includes/images/busy.gif" alt="loading" />
</div>

The js:
$(document).ready(function(){
$("#noActDlg").jqm({
ajax: "@mTrg",
modal: true,
trigger: ".dlgTrigger"
});
});

I put an attrib of mTrg on the triggering input, usually button. In my situation, I've been using Coldbox & the mTrg=index.cfm?event=someEventHandler.Event

The coldbox event handler returns a view with no layout. I apply the class of "dlgTrigger" to anything that I want to use a modal; give it an an attribute of mTrg & now I can have as many different dialogs in the page as I want only setting a class of .dlgTrigger & setting up the ajax call.

I don't use javascript alerts any longer because I can customize these to tie in visually with my application.

I usually only consume the blogs but I thought I'd share my experience with everyone since I have rejoiced at discovering jQuery and modal dialogs.

Comment 21 by Esmeralda posted on 2/4/2009 at 8:43 PM

Is this better than using CFWindow (as far as size, speed, etc)?

Comment 22 by Raymond Camden posted on 2/4/2009 at 9:21 PM

Better? Um, thats a bit subjective. ;) It should be better size wise. I didn't test it, but it should be. With Ext being a bit more mature on the UI front, the cfwindow version probably has more bells and whistles.

The best thing to do is check the cocs at Ext, compare to jQuery UI, and see which does what you need is the most easy to understand and use format.

How is that for a political answer? ;)

Comment 23 by Neil Bailey posted on 2/4/2009 at 9:28 PM

As I had indicated before on Ray's blog, we have been using EXT for about 18 months (back when it was still YUI-Ext), and if there is a better UI package available, I am unaware of it.

That being said, EXT definitely has a fairly steep learning curve, and sometimes can involve some pretty steep JS programming. But their forums are EXTREMELY active, and the API docs have a higher completion percentage than most packages I have seen (with the obvious exception of the big guns like YUI).

If you're looking for quick-and-easy, I don't know if EXT is for you (of course, I don't know that it isn't either - how's THAT for waffling), but if your looking for a pretty darn complete package w/ decent community support, EXT can't be beat IMO :)

Comment 24 by trent posted on 2/13/2009 at 2:21 AM

jQuery Impromptu is a dialog type plugin which takes dialogs to another level by creating somewhat of a framework for forms. With version 2 which was just released you can have multiple forms within the same dialog, so you can click "Next", "Next", "Finish" or whatever you declare your buttons to be, so you can easily break down the dialog into steps. I've put together a screencast of this new functionality here:
http://trentrichardson.com/...

Comment 25 by Bill Selznick posted on 3/7/2010 at 10:26 AM

Raymond, I just want to thank you. I'd be lost without your example. I'm using ASP.NET with JQuery UI. In my case I have a main form with a "Find Address" button that will call a function to load my FindAddress form. I have a MasterPage that creates a script variable __dlgFindAddress that holds the actual address of my popup form.

Inside a script tag I code the following:

var ajaxContent = null;

// btnFindAddr calls this
function ShowFindAddr() {
ajaxContent.dialog("open");
return false;
}

$(document).ready(function() {

ajaxContent = $('<div></div>');
ajaxContent.dialog({
title: "Address Finder", modal: true, autoOpen: false, height: 300, width: 600, draggable: true,
open: function() {
ajaxContent.load(__dlgFindAddress);
}
});
});

Comment 26 by Raymond Camden posted on 3/7/2010 at 7:57 PM

Glad to help. You could show real appreciation by dropping ASP and switching to ColdFusion though. ;)

Comment 27 by Bourgeois Gentilhomme posted on 6/5/2010 at 12:12 AM

Hey... you know what ?

I am under the impression you are polluting the internet with your so badly written code.

If your code is less than execellent, what is the goal of publishing it on the internet ?

Keep it for you. It is your code.

Some experts will write some code then post it somewhere. Then Google will reference them.

Then when people do search on the Internet, they will not find your code (That have no value) but they will find expert code.

Please keep internet clean. Stop spamming

Comment 28 by Raymond Camden posted on 6/5/2010 at 12:14 AM

Dude. Best. Comment. Ever.

Comment 29 by Jose Galdamez posted on 6/5/2010 at 12:21 AM
Comment 30 by Jason Dean posted on 6/5/2010 at 12:22 AM

@bourgeois

Hey... you know what ?

I am under the impression you are polluting the internet with your so badly written sentences.

If your sentences are less than execellent[sic], what is the goal of publishing them on the internet ?

Keep it for you. They are your sentences.

Some experts will write some sentences then post them somewhere. Then Google will reference them.

Then when people do search on the Internet, they will not find your sentences(That have no value) but they will find expert sentences.

Please keep internet clean. Stop spamming

Comment 31 by Chris Mallinson posted on 6/5/2010 at 12:27 AM

@bourgeois

On the hate mail scale, I give you 3/10. Poor effort. From your sentence structure, I see that you are an ASP programmer. Please stick to those sites.

Comment 32 by Carlos Corredor posted on 6/5/2010 at 12:34 AM

Hey José, great portrait of @BourgeoisGentilhomme

Comment 33 by Michael Stone posted on 6/5/2010 at 12:34 AM

I've been using jQuery and jQuery UI for a while now and I can say that you'd be stubborn to not learn both. Cfwindow works great and is pretty easy to work with, but when you've got a site that's loading a ton of data, you're going to need something that's a bit less. Cfwindow brings a long a huge library and works great against cross browsers, but it's too darn big in regards to it's file size and the amount of work the browser needs to put forth.

jQuery UI dialog window is a much better choice because it's a bit smaller, but only if you download just the dialog itself in the custom download. The UI dialog works awesome and is very easy to interact with, but it's still a little "fluffy" and for a site that needs a smaller size requests, you may want to look for a small jQuery plugin.

I've found that you can take someone's modal window plugin and easily modify to your site's standards and save a lot on file size.

You also have the choice of using the jQuery Tools overlay. It's smaller and more simplified and works just as well. I've had some problems with their actual modal display in cross browser, but it's pretty good and saves you on file size.

Hope this helps.

Keep up the good work Ray.

P.S. EPIC comment above :)

Comment 34 by David Maggard posted on 6/5/2010 at 1:04 AM

Dang!, Jason Dean beat me to it. Don't worry Ray the rest of us love your code, keep "polluting the internet"

Comment 35 by Kristin posted on 6/5/2010 at 1:36 AM

@Jason Dean

Dude. Best. Reply. Ever.

Comment 36 by Bourgeois Gentilhomme posted on 6/5/2010 at 3:06 AM

Hey sorry guys....

My goal was not to insult all of you at the same time.

I just want to tell you that it is useless to post some code that is not working properly... and using accepted pattern.

This is just pollution.... It is smelling like the the gulf of mexico.

@jason dean.... sorry again... I look at your picture ... you seem so upset by my comment ! ;-)

Comment 37 by Raymond Camden posted on 6/5/2010 at 3:15 AM

Ok, so ignoring your rude, trolling comments, perhaps you could elaborate on which parts of my code are not working properly? I will happily fix the code if it is broken.

Comment 38 by Bourgeois Gentilhomme posted on 6/5/2010 at 3:57 AM

It is here .... http://www.coldfusionjedi.c...

where you your own comment to your own blog entry, you were saying:

Comment 1 written by Raymond Camden on 1 February 2009, at 3:56 PM
Forgive me posting a comment to my own blog post. You may notice that if you close one of the dialogs, it won't reopen. That's a bug in how I used the dialog....

You are developing so I am sure you noticed that there is too much junk blogs on the internet. Problem is that you are covered by search engines and... yes.... I loose time on your so useless blog entry.

I will not comment on your blog anymore .... but please just be more professional !

Comment 39 by Lu Sancea posted on 6/5/2010 at 4:53 AM

Obviously this guy doesn't believe in leisure coding nor does he believe in sharing mistakes and revelations to the community. So sad. I was under the impression that learning from your mistakes was a good thing. So, letting people know about your mistakes would be an even better thing...

Comment 40 by Jason Dean posted on 6/5/2010 at 5:10 AM

@Bourgeois

Seriously?

You think I seemed upset by your comment? They were your words, so I guess I was only as upset as you.

You must be very sad and lonely cause you're a complete douche bag.

Comment 41 by Bourgeois Gentilhomme posted on 6/5/2010 at 3:53 PM

Hey Jason,

Yeap... they are words. I am sure your are upset by words. And this is probably why you have this face on your picture: You feel easily offensed by words, so you take this facial expression ! ;-)

Kiss you.

Comment 42 by Bourgeois Gentilhomme posted on 6/5/2010 at 6:22 PM

Hey Lu Sancea :-)

I love it!

So you share your mistake now ? What a looser you are !

You said "So, letting people know about your mistakes would be an even better thing" !

Yup... This is probably a new program at school. Mistake-101: Learn how to do errors !

Hey guys... your country is in bankrupcy.... maybe it is time to do something that makes sense.... isnt ?

Comment 43 by Jose Galdamez posted on 6/5/2010 at 7:27 PM