51 Comments
- freexe, on 10/12/2007, -2/+18Please, will people use Ajax to enhance websites, not do things that already can be done (better) by normal HTML.
The second select should have all the options in, they should be hidden by javascript to only show the options that appropriate based on the first select boxes choice. If you are really good you can create the first select box using javascript based on the option groups.
This has the added benefit of WORKING IF YOU DON'T HAVE JAVASCRIPT. - norbiu, on 10/12/2007, -0/+9An example can be found here: http://duvinci.com/projects/ajax/dropdowns/
- jsd8cc, on 10/12/2007, -0/+7"Please, will people use Ajax to enhance websites, not do things that already can be done (better) by normal HTML."
Exactly...this is getting ridiculous. Half of all these purported Ajax modules can be accomplished with CSS or regular JavaScript.
It's like when you first buy something and want to use it on everything.
"Hold on, let me open that bottle for ya with this SuperAutomaticBottleOpener 3000."
"But it's a twist--"
"No wait, I got it, trust me."
"But, I can just twist--"
"Seriously, this is gonna be sweet..." - Bogtha, on 10/12/2007, -1/+7> You say you can do something with Javascript and it will work even if you don't have javascript? How so?
Are you kidding? Consult any decent JavaScript tutorial. As a stop-gap measure until you do so, use this rule of thumb:
* Don't write JavaScript until after your entire website/web application is fully functional. *
If you can't figure out how to go from working HTML to working HTML + JavaScript, then you're a pretty poor developer. - RyeBrye, on 10/12/2007, -0/+6I can think of one VERY BIG application that I wish would (have) implemented this. I don't care much now because I'm graduating - but my University's online registration system has a series of pop-down methods. They used to referesh the page when you would change your selection automatically - but a few years ago they added a gay "GO" button that you have to click.
(So, when you are registering for a class, they made you pick a semester. Click go. Select a department. Clck go. Select a course. Click go. Then click on the section you want to register for... If you want to change to a different department? Yep - you have to click Go. )
Having the browser request the list without having to click go, and without having to refresh the entier page - that's a nice solution. I will send this link in to my university's suggestion box, along with my usual rant against the "Go" button today.
Of course, I guess you have found a BETTER solution. They can just send one big page with over 50,000 courses embedded in Javascript menus that are hidden.
For small applications - you may be right. For large applications - like a university registration system involving a chain of three or more menus - this would be a VERY good idea. - Wasted, on 10/12/2007, -1/+5That might be usefull but if you have to many options it will crash the browser and create a lot of bandwith overhead.
- forrest, on 10/12/2007, -2/+6I'm going to have to disagree, freexe. You say you can do something with Javascript and it will work even if you don't have javascript? How so?
But more importantly, this has the benefit of working for things that have thousands of options. Lets say your first <select> has 20 options and each one of those has another 20 options to fill in the second <select> which then in turn fills a third select with 20 more options. Certainly it is not prudent to preload all this data. AJAX is perfect for this type of scenario. - captaindan, on 10/12/2007, -0/+4A proof-of-concept is usually something you do *before* a concept has been proven. ;-)
- Kirti, on 10/12/2007, -2/+5I agree with freexe.
I've seen a ton of AJAX articles crop up on digg. Each of them seems to be taking a step further to create an entire website based only on AJAX. While AJAX itself is amazing technology and has some significant implications in a certain domain of web programming, it's not the solution to everything! I mean if you were making a google maps like application, then it is useful. But it's not the right tool for making someone's homepage with drop downs, pictures, content all being loaded and manipulated with AJAX. At least that's what I think.
- KRK - freexe, on 10/12/2007, -0/+3@forest I for a large amount of options searches can be used instead of select boxes. I've never been a fan of muliple select boxes being used.
If you do choose to use ajax, at the very least make it work without javascript on
If you write the html like
<select>
<optgroup label="Group Name">
<option>Choice 1</optionn>
</optgroup>
<optgroup label="Group Name2">
<option>Choice 2</optionn>
</optgroup>
<optgroup label="Group Name3">
<option>Choice 3</optionn>
</optgroup>
</select>
Then use javascript to search through the select box and pick up the optgroups labels, then write a new select box above the first select that has the optgroup labels in and hide the options in the orginal box. The currently selected from the select box writen with javascript can then trigger the original select box to show the options that match the label.
It's pretty easy and falls back to work prefectly (at least for small/medium dropdowns) if you don't use javascript (I can't use javascript on my phone/pda for example) - vh1`, on 10/12/2007, -2/+5no, forrest, you are still missing the point
freexe said to populate the select boxes in the html itself, THEN have javascript hide and show options. so if someone who doesn't have javascript comes in, they'll still have all the options to choose from
javascript should be an enhancement, not a requirement - forrest, on 10/12/2007, -0/+2Yes, that would work nicely. I believe I misread your original comment.
- tablatronix, on 10/12/2007, -0/+2Is webmonkey just now getting in on AJAX ? They were always ahead of the curve in the past.
Regardless, this is good, i was just looking for this a few weeks back and gave up cause i didnt want to do it myself. - Bogtha, on 10/12/2007, -3/+5Invalid code.
Doesn't degrade gracefully.
Ignores accessibility guidelines, which contravenes legal requirements for many organisations.
This is broken in almost every respect. Everybody who dugg this should go to their profile page and undigg it immediately, then come back and report it as lame.
Is it too much to ask that publications like Webmonkey actually have somebody on staff competent enough to catch *basic newbie errors* in articles that are meant to teach people things? This guy should be banned from writing any more JavaScript articles until he becomes competent. - LeProgrammeurII, on 10/12/2007, -0/+1Great digg.Thumbs up!
There is also a tutorial walking through the process of creating two drop down list where the second one is populated based on the picked value of the first one using AJAX:
http://www.kynou.com/GetTutorial.aspx?TutorialID=55 - mbreese, on 10/12/2007, -1/+2When will people stop calling things revolutionary just because it uses the buzzword Ajax?
Taking ages old technology (DHTML/Javascript populated list boxes) and mixing it with Ajax is not revolutionary. Functional, yes. A good idea, yes. Revolutionary? Sorry, I'm all out of crazy.
Oh, I forgot this is digg... I must be new here. - wolever, on 10/12/2007, -2/+3Here is another shameless plug for my Google-suggest-like textbox:
http://wolever.net/~wolever/textbox/textbox.html - freexe, on 10/12/2007, -0/+1@SleeperZ
"Please, will people use Ajax to enhance websites, not do things that already can be done (better) by normal HTML."
Note the words "better" and "already can be done"! Plus I go on to explain that using this method can be ok in certain circumstances but a FALLBACK should be used. - SleeperZ, on 10/12/2007, -1/+2freexe: No offense mate but you're way off the ball here. Javascript / Ajax dropdowns are fine.
The key here is that the Javascript should eliminate only the reloading of the page. Not add any functionality that the HTML page doesn't already have.
Got 3 steps to 3 dropdown menus? Thats 3 times u need to hit the submit button on the form. If Javascript is disabled then thats exactly how it works, when you add Javascript however the Ajax library dynamically loads those dropdowns according to the previously selected select. Without you needing to reload the page 3 times!
Your method wouldn't scale & would confuse the user if they had Javascript disabled. What about if I choose country: New Zealand - and then get given American States to choose from. Hello? Not only is that wasted bandwidth, thats a very unfriendly experience for the website visitor.
Please, do yourself & the rest of Digg a favour: do some research before making such statements. :-) - forrest, on 10/12/2007, -1/+2The point of populating the second select based on the first one is important. If scripting is not allowed, the options of the second select will not be based on the first, which defeats the purpose. Yes, using freexe's suggestion will provide all the options to the user and will technically work, however the options are no longer related as intended.
- GopherChucks, on 10/12/2007, -0/+1Also, because I'm curious, how much of Digg is written in PHP and how much is in Ajax?
I'm new to the guts n' bolts of programming for web, and I'm curious how much of Digg is handled by each, since there's another article that was on the front page that basically says Digg is all about the Scalability of PHP. I've started off with a simple web server and WordPress to get my hands dirty learning PHP code, in addition to an O'Reilly book or two. - hightechdave, on 10/12/2007, -1/+2I would digg an article announcing Webmonkey was back in action (I remember it from like 5 years ago and it was invaluable when I was in school) as I thought Lycos binned it years ago. AJAX drops? meh. If every article ever written about the web was put on Digg, the site would become useless. Perhaps the threshold for what makes the front page needs to be increased?
- crythias, on 10/12/2007, -1/+1Except, who wants to wait while a mortgage/insurance/etc page loads all the cities in a country before you even choose the state or province?
If a large, well known, software company's support page asked you to choose a software package, then a version, should you need to wait until all that software company's offerings and versions, subversions, and iterations are loaded client-side before you get to choose the package for which you'd like support?
If I'm providing a class list for a teacher and would like the teacher to select his name from a drop-down list, should I have him wait for the 4000 students in the school to be loaded client-side before he can select his name?
There is use for this article, as well as the ability to degrade "gracefully". In my own, personal usage, this has merit, and needn't be shrugged as unnecessary. I "get it" that I can select on one page and go to another. I just don't want to do that. - DiggToSurvive, on 08/30/2008, -0/+0AJAX has its place - JUST! Overheads are high and it's cumbersome code. Still, it can kick-butt when it has too, but you'd rarely use it.
This is a pretty cool article. Bit more meat and potatoes then WebMonkey''s effort.
http://www.googleme.com.au/articles/create_ajax_me ... - jgeek, on 10/12/2007, -0/+0for JSP check out this component: http://www.servletsuite.com/servlets/ajaxseltag.htm
There are a much more ajax JSP components here: http://www.servletsuite.com/servlets/jsp.htm#ajax - mydave, on 08/04/2008, -0/+0good for people interested in Ajax. and i love when articles are all for good resources for people to learn new technologies.
http://search.ashtech.info/Simple%20Ajax%20Drop-Do ... - rutherford, on 10/12/2007, -1/+1The code on his website is different from the code in the article. As the javascript is in the article it doesn't work. Did anyone test it before they dugg it?
- hsdas, on 12/31/2008, -0/+0I need to know if the txt files can be replaced with a single XML file, if so how the code will work?
- LeProgrammeurII, on 10/12/2007, -0/+0Hi guys!
I created a control that works like an AJAX container. Basically the way it works is that all the ASP.NET controls that you place inside of the AJAX container will automatically become AJAX enabled.
For example, if you need to create a web form with three dropdownlists and you want the picked value of one DDL affects the items in the others DDLs (like in an auto dealer website) all you need to do is make sure you move these three dropdownlists into this AJAX container control. The way you code and setup the three dropdownlists remains exactly the same. The container control injects the necessary AJAX functions.
I uploaded this control and posted some walkthrough tutorials at http://www.KYNOU.com
Check it out! - DiggToSurvive, on 01/30/2009, -0/+0Same link....new website looks like it
http://www.imagecowboy.com/articles/create_ajax_me ... - inkswamp, on 10/12/2007, -1/+1Did I miss something? What is it about this that couldn't have been done just as well in regular DHMTL? I understand that this is just a simple starter and you can get much more complex with it, but it's stuff like this that makes me think that AJAX is becoming widely synonymous with all the dynamic stuff you can do with DHTML.
- pogenwurst, on 10/12/2007, -0/+0tablatronix,
No, Webmonkey hasn't got in on Ajax. They published this about a year ago: http://webmonkey.com/webmonkey/05/16/index4a.html?tw=authoring
Whether this is "ahead of the pack" or not I cannot honestly say. - M4v3R, on 10/12/2007, -1/+0Not entirely on the topic, but...
http://mav.subfan.pl/multiple_select/
Multiple-select drop-down box in javascript, ftw! - gekkokid, on 10/12/2007, -2/+1ajax is only used in pressing the "digg" button and dealing with comments but ajax uses php at the backend, ajax only calls php code from your browser and waits for the info from diggs browser
- DawgDaze, on 10/12/2007, -1/+0Proofs of concept are usually performed when dealing with concepts that have yet to be proved. Entire web application suites have been built using AJAX, so I think it's pretty well in hand. A tutorial would be a much better description of what this story is, and as a bonus would have proved that webmonkey has more than an elementary grasp of the English language. Anyway... I don't think this is an unreasonable use of AJAX, especially since I've used it for just such a thing. We have well over a thousand directories all contained in hash directories (A-D, E-H, etc.) and new directories are always being added. I needed to reference these in a internal web app and I didn't want to have to keep up with the changing directories. I also didn't want to load all of the directory names at load time. So I use a drop down to select the hash directory, and then an AJAX call gets the directories therein. Works very well. Concept proved.
- shindig111, on 10/12/2007, -3/+2nice article.. i like it...
- Kirti, on 10/12/2007, -3/+2@forrest2
Browsers have the option of disabling javascript, so if someone disabled javascript, you basically have to politely ask them to enable it again for your website or tell them to move on.
- KRK - forrest, on 10/12/2007, -3/+1@kirti
Which is to say, without Javascript capabilities, your javascript will not work. My question was how are you supposed to use freexe's suggestion when the browser does not allow scripting?
@Bogtha
You totally missed my point. - largobargo, on 10/12/2007, -3/+1Lame! I do all my dropdownlists as java applets.
- danp, on 10/12/2007, -3/+1It's only a "proof of concept" if it hasn't been done by 768,052 other people months or even years before.
- sproket, on 10/12/2007, -2/+0Patented by Microsoft. 0wned.
- bkorte, on 10/12/2007, -3/+1I'm all for good resources for people to learn new technologies, but why is this on the front page?
- GopherChucks, on 10/12/2007, -3/+0@Bogtha
What? - inactive, on 10/12/2007, -3/+0Great. Another lame AJAX article. The 'spoiters must love this *****. No mention of security at all, just like most Web 2.0 stuff. This is like 1996 all over again, except with rounded corners.
- jdonner, on 10/12/2007, -3/+0There's only one Ajax, http://www.ajax.nl/ , founded in June 1st 1892, several times world and european champion and considered to have the best football school in the world and original home of Johan Cruijff and Marco van Basten, two of the top 5 players in football history.
So quit the drop down boxes discussion bull crap nerds and get a life! - gekkokid, on 10/12/2007, -4/+0what kack!
crappy captcha - stamp5, on 10/12/2007, -4/+0good resource
- rc_collins, on 10/12/2007, -5/+1LAME!
- megatron, on 10/12/2007, -6/+0Win Fixer is evil.
- inactive, on 10/12/2007, -8/+1this is revolutionary
___
http://www.shoutcentral.com/hoffmabc


What is Digg?
The Digg Toolbar for Firefox lets you Digg, submit content, and keep track of Digg even when you're not on the Digg site. Download the official