Portable Apps – A (newish) Friend for Web App Devs

PortableApps.com wraps popular open source projects in self-contained, portable containers. Their products will happily live on a USB-key and (so far) work as well as the standard install-spam-registry-and-or-user-data-folder versions.

In particular, the Firefox Portable versions are of some note for Web (App) Developers who are required to test and support their output on older browsers.  While Firefox versions are generally happy to share cache, bookmarks, etc., extensions are often version specific; some critical extensions such as <a href=”http://www.getfirebug.com/”>Firebug</a&gt; are major-version sensitive and make juggling several versions a time-consuming headache.  The portable versions remove the forementioned shared resources to their own directory structure wrappers and allow full-speed, simultaneous usage of several versions of Firefox (as of this writing, 2.014 and 3.0).

Much kudos to the Portable Apps team!

Make a donation if they make your work-life better ;).

IE6 Javascript Form Submission – Hit or Miss

Internet Explorer 6, a venerable old browser to be sure, is still widely used despite the availability of much better (and free) alternatives. This continues to be a time-sink for any front-end developer.

While not at all a technical observation, my one reproducable use-case around this bug was by:

  1. Programatically creating a DOM Element <div>
  2. Dynamically creating and assigning an onclick event handler to the <div>
  3. Trying to submit a given form with validation and some custom hidden <input> fields.

What I observed is that the click propagation doesn’t seem to want to return from the onclick handler function

Here’s a fun one:

document.getElementById("myFormId").submit();

Should be straightforward, correct? In some select cases, this actually will not work.

The workaround:
Set the scope to the document level and force submission with a short timeout.

document.doSubmit = function() {
    document.getElementById("myFormId").submit();
}
setTimeout("document.doSubmit();", 50);

Putting it all together:
Here’s your trigger, say an <img> tag:
<img src="..." onclick="submitMyForm();" />

Here’s the form submit function:

function submitMyForm() {
    // do some validation, completion checking, etc.
    ...
    // now call the externalized submit function
    document.doSubmit();
}

Here’s the setTimeout handler:

document.doSubmit = function() {
    document.getElementById("myFormId").submit();
}

The <img> tag’s onclick event calls submitMyForm() which then calls document.doSubmit() .