Posted in jQuery | Posted on 02-02-2009 | 8,628 views
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:
2function showDialog(){
3 $("#example").dialog();
4 return false;
5}
6</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:
2function showDialog(){
3 $("#example").dialog("open");
4 return false;
5}
6
7$(document).ready(function() {
8 $("#example").dialog({autoOpen:false});
9});
10
11</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.
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.
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.
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.
http://www.amazon.com/Learning-Ext-JS-Shea-Frederi...
If you give me another minute, I'll post a referral link. That way if you do buy it, I get a few cents. ;)
http://www.amazon.com/gp/product/1847195148?ie=UTF...
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)?
I think I'll try this on my contact form messaging ... good examples Ray ...
:)
$("<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?
http://groups.google.com/group/jquery-ui/browse_th...
Looks too easy. ;)
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%; }
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.
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? ;)
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 :)
http://trentrichardson.com/2009/02/12/jquery-impro...
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);
}
});
});
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
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
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.
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 :)
Dude. Best. Reply. Ever.
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 ! ;-)
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 !
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.
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.
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 ?
[Add Comment] [Subscribe to Comments]