False Positives

Last year I posted JavaScript for a single element radio button list, referring to a issue I had with getting the value of generated radio button list. (All the standard solutions / samples that i found assumed the there are 2 or more choices.  And I had a case were an optional field might only have one value.  So I had to detect / trap and report on the value of this boundary case.)

I recently had reason to revisit my solution  and have since corrected two things.

In my original posting I had hard coded the name attribute of the radio button array.   Very bad,very lazy!That’s been rectified by passing the value of the name attribute into the function and using the forms element collection like this:

var ne = document.forms[0].elements[name];

Much better!

I also had cause to see if I could do better using the Prototype javascript framework? How about reducing 12 lines to 1 line like this :

selected = $$(’input:checked[name=”‘+name+’”]’).pluck(’value’);

You gotta like that!  (I’m also using the Google AJAX Libraries API to load the latest 1.6.0.3 release.)

As I mentioned in last years post all this also works for Check Box lists as well a Radio button lists.

I have a demo of this in serbl.html, showing the js running on a single radio button list, as well as a multi value radio button list and (because I don’t expect one to take my word) single check box button list, as well as a multi value check box button list.  The javascript functions used (getSelectedOW for OldWay, and getSelectedPW for Prototype Way) are in sebl.js

Enjoy.

Share This

The Problem here is if your list of data generated radio button html yields only one value. All the standard solutions / samples that a google yields assume the there are 2 or more choices.

This is not unreasonable for radio buttons, but if your list of choices is not hand built then you may not have control over that.

Code is not reasonable and neither is Life.

And in that unreasonable use case those solutions fail, because if you have one one element in the radio button list then “f.choiceview.length = undefined” (assuming the html input tag name=”choiceview” ). Then the real fun begins…

How to fix this? The solution is simple if not obvious : the single element becomes a ordinary input tag type of element and you use the .checked and .value methods, as below….


function getSelected () {
var Selected = "";
var f = document.forms[0];
if(f.choiceview.checked) { // one element to fetch
Selected = f.view.value;
}
else {
for (var i = 0; i < f.choiceview.length; i ++) { //loop thur array
if (f.view[i].checked) { // test to see if checked
Selected = f.view[i].value;
}
}
}
if (Selected == "") {
alert("Nothing selected");
}
else {
alert(Selected + ' Selected'); // report back
}
}

Where would you use this? Mostly for form validation, or to grab user choices to drive other processing.

The same issue and solution applies to html CheckBox elements.

Update Oct 2008:  I’ve revised the code and removed the hard coding of the html elements “name” attribute, and linked to a demo form of it action of radio buttons and check boxes. Plus, if your interested, I also rewrote the whole thing down to 1 line using the Prototype javascript framework!   All here in JavaScript for a single element radio button list, revisited with Prototype

Share This

• With Accordion Magic, Will Shaver has taken Stickman Labs’s accordion sections and added the ability to close panels, and code to keep contents hidden while page loads. Outstanding!!!
• Common Prototype mistakes and how to avoid them : Here’s another list of things that tend to confuse (me) unexperienced “prototypers”
• DatePicker using Prototype and Scriptaculous - Not Bad! Code and instructions for a datepicker widget using Prototype and Scriptaculous librairies.

- Prototype scriptaculous

• Software Developers Guide to Managing Your Boss - one of the single most important things to your career is your ability to manage your boss. The relationship you have with your boss is critical to your success, and how far you will go at the company you’re at.

- management career

• Canada’s Hot Start-Ups - According to the latest issue of Red Herrring, which features a cover story on the Canadian tech scene, the 10 hottest start-ups are

- Canada Startup

• How Not to Die (if you are a Startup) - Paul Graham eassy : If you can just avoid dying, you get rich. Startups rarely die in mid keystroke. So keep typing! Distraction is fatal to startups. Oh, yeah. Don’t give up.

- Startup paul graham

• Think Before You Code - Or Think in Code? (Yea, I know it’s not a either or). So much Deep Thinking to do before you start coding?

- Code development Startup

• IDC picks 10 best Canadian firms to watch for - 10 emerging Canadian software companies

- 2007 Software management Canada

• Simply Albert: Canada is Screwed: Why We Need to Support Canadian Youth in Tech - Albert makes some good points about “Why” and “How” to Support Canadian Youth in Tech.

- Canada education Startup

• University of Toronto Releases ePresence v4: Open Source Webconferencing - ePresence Interactive Media, developed by the University of Toronto’s Knowledge Media Design Institute (KMDI) for the past seven years, is a Webcasting, conferencing and rich media publishing tool that just launched version 4.0. Plus, you canshare prese

- Toronto opensource comunication education

• kaourantin.net: What just happened to video on the web? - Flash Player 9 Update 3 Beta 2, codenamed Moviestar, which will support H.264 standard video as well as High Efficiency AAC (HE-AAC) (and Quicktime .Mov) !!

- web video Flash co h.264 codecs flv

• Leila Boujnane in PA Top 50! - PrintAction’s 6th-annual list of Canada’s 50 Most Influential People in Graphic Communications. Congratulations!!

- graphics Canada Toronto demoCamp

• Sam Ruby: Long Bets - # REST # Hadoop # Erlang/OTP # Jabber # Microformats

- development future Software web

Share This

• A prototype-checklist : doing common things the prototype way (or taking advantage of those extra 100 KB in your page) - A great set of code examples of doing things the Prototype way. - Javascript
• TOKYOMANGO: Superflat Panda Swallows Cell Phone, Then Girl - Great little animated short mostly made up of Takashi Murakami’s graphic work for Louis Vuitton. It’s like the crazy, postmodern, luxury, Japanese version of Alice in Wonderland. Very Kawaii
• via boingboing - the noted Serbian feminist writer and activist Jasmina Tesanovic (and married to Bruce Sterling), has just released her latest novella, “Nefertiti,” as a free, Creative Commons -licensed download.

Share This

• Web App Performance· Everything anybody knows - a great set of links about real world scaling.
• Some Simple SQL Rules to Live By - and your sql will be easier to live with.
• JavaScript Number Format v1.5.4 - API - mredkj.com - A custom JavaScript object to format numbers. Includes currency, commas, and decimal precision.
• Simple Date and Time Localization With JavaScript - I need to look into this in greater detail. I’m hoping/needing to build a way to display an editable “local” time field.
• 85 AJAX Solutions For Professional Coding - YACAE : Auto-completion, instant field editing, menus, calendars, interactive elements, visual effects, animation, basic javascripts, and an extensive developer’s suite.
• Prototype Tabs Script released, Scriptaculous Optional - a very nice tab solution.
• Where’s the Prototype Framework community? - and a few of the notable samples, and plug-ins for Prototype.
• Accordion v1.0 Demo a lightweight accordion that is built with scriptaculous Yay! looks great, very nice features from the giant brain of Kevin Miller who also gave us LightWindow v2.0

Share This

for your web 2.0 joys :

• 10 jQuery Essentials - includes Tabs; in place editing; date picker; file uplod; portlets; autocomplete; tooltip;form validation; and the interface elements collection.

• LightWindow Demo - v2.0 now out. lots of features. Prototype scriptaculous based. Not your fathers lightbox.

• GreyBox another smart window / popup / lightbox solution.

• AjaxDaddy - Ajax Examples in Action, another collection of nifty web 2.0 demos

and your Microsoft codeing blues:

• DebugBar - IE plugin - DOM Inspector: HTTP Inspector: Javascript Inspector and Javascript Console:HTML Validator: and more. May or may not reduce crying….

• Internet Explorer Developer Toolbar - When there is no other way around testing/developing on IE!

Share This

Brent Ashley (who was doing JavaScript remote scripting -JSRS - in 1999!) has written an article for IBM developerWorks : Shaping the future of secure Ajax mashups about how to improve the browser for hybrid Web applications.

Looks like it’s getting a nice buzz.

Apart from his role as a mid wife (and fluffer) to Ajax, Brent is also a well known presence in the Toronto DemoCamp community.

Share This

Via the del.icio.us blog, we have del.icio.us: we rolling and several new ways to add “my del.icio.us” into your blog or side bar, as “simple” as inserting some javascript or calling Javascript Objects (or JSON’s), either way it’s more stuffing for our sausage makers!

I’ve used this to add a LinkRoll page to the side bar.

Fred Wilson posted about Delicious Link Roll ( pre public but then he has a reason to keep a closer eye on them ), with a interesting idea : using a tag “Link roll” to limit what shows up.

Also, if only Delicious had better tagging operatation you could feed it a list of tag and do a “show bookmarks related to this topic” sort of thing.

Nov 15th Update

Del.icio.us has completly revamped their help page, and exposed a new feature : Tag Rolls, a way for you to display your del.icio.us tags as part of your website. I’ve placed a tag Cloud of my top del.icio.us tags over on the Link page.

Share This

I asked this below , but it’s really a big enough point to ask on it’s own.

First AJAX (Asynchronous JavaScript and XML) made it possible to build much more dynamic web application. , then GreaseMonkey made it possible to do custom re-writing on web sites (and prototyping concepts / extensions), now Konfabulator / Yahoo! Widgets brings widgets to the desktop/TvTop/PhoneTop.

Now - in the spirit of CPAN - there is JSAN: JavaScript Archive Network is a comprehensive resource for Open Source JavaScript libraries and software, via O’Reilly Radar (with some other interesting stuff).

JavaScript has grown in it’s visibility this year, and is more respectable than ever before. (Discuss).

Another step has been taken by The DOM Scripting Task Force (read the press release for background), as detailed in it’s JavaScript Manifesto.

What else needs to be done? What the road block? What’s happening with IE 7 and JavaScript? Are we there yet?

Update : AjaxDeveloper.org kindly notices, and says “maybe”.

In the comments Derek DeVrie makes 2 good points a) good modern samples are hard too find - although JSAN should help in the near future b) that the backend guys/girls and the front end “designers” (who may or my not know css/xhtml but never the templating langauge) get all the respect (and cash), but there is little glory who those who bolt the pretty designs on to the back ends (and MUST know it all xhtml/css/javascript/dom and the templating langauge in use - asp/jsp/php/whatever plus at least some of the back end langauge plus sql… )

del.icio.us Tags: javascript ; Technorati Tags: javascript DOM Ajax web

Share This

as reported in the Globetechnology, Yahoo bought Konfabulator which now becomes Yahoo Widgets and made it FREE!

What Is Konfabulator?

Konfabulator is a JavaScript runtime engine for Windows and Mac OS X that lets you run little files called Widgets that can do pretty much whatever you want them to. Widgets can be alarm clocks, calculators, can tell you your WiFi signal strength, will fetch the latest stock quotes for your preferred symbols, and even give your current local weather.What sets Konfabulator apart from other scripting applications is that it takes full advantage of today’s advanced graphics. This allows Widgets to blend fluidly into your desktop without the constraints of traditional window borders. Toss in some sliding and fading, and these little guys are right at home in Windows XP and Mac OS X.

Why is this important? When Apple released Dashboard Widgets for OS X they “copied” Konfabulator. But Konfabulator worked on both Windows (XP) as well as OS X. unfortunatnly the charged US$19.95 which was very resonable but that meant : a) not trying it tto see if you liked it, b) it was not on very many desktops.

Is 2005 the “Year of Javascript”? First AJAX (Asynchronous JavaScript and XML), then GreaseMonkey, now Konfabulator! (the The DOM Scripting Task Force is important too!

Minor update: eweeks Peter Coffee comments on : Yahoo Rewrites Script for Web’s Next Act, and notes : Konfabulator acquisition moves content provider into post-browser network-service delivery. (can you say “Widgets for your Phone and / or TIVO”?)

plus : ( previously unnoticed…) the Comic history of Konfabulator, starting at Part 1

del.icio.us Tags: Javascript ; Technorati Tags: Javascript

Share This