Fun with YUI, IE and JavaScript

I still develop JS in basically the same way I did back in 2001. Back then IE had more of a stranglehold on the browser market, but it was a horrible JS development environment. So one would use Mozilla with the Venkman debugger to make things a little easier, then cross their fingers and hope it worked on IE. Where it didn't work, you'd put in a few if (document.all) { and some alerts until you figured out what is wrong. Today we have AJAX libraries so everything is cross platform.... yeah right. So for the sake of others who might run into these issues, I'm populating the indices of search engines.

Select.add issues

Like I said, I still develop on Mozilla (firefox) and use the debugger there (now firebug instead of venkman). Since I'm a freetard and run gentoo, I'm running IEs4Linux to occasionally check that my stuff works under IE6. My JS was throwing a "Error 80020005" error, and the search engines weren't returning anything relevant. But the problematic line was where I was using

select.add

and illustrated here in quirksmode.org (note that the quirksmode code doesn't appear to be cross platform). Turns out that firefox (and konqueror) are happy when the index is null, whereas IE wants an index number. I finally figured this out on my own, but later found that the example here also illustrates it. My code (since I'm using YUI's builtins for user agent checking) looks like this now and is happy:

if (YAHOO.env.ua.gecko > 0) {
  select.add(option, null);
}
else {
  select.add(option, select.length);
}

Using JS to extract option values

This one threw me for a while too. If you set options like this (and as illustrated in the example previously linked to) in html, you'll have issues in IE:

<select id="mySelect">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>

Make sure you put the

value

attribute in, or

form.formname.selectname.value

, won't have a value in IE (but it will in firefox/konky).

<select id="mySelect">
  <option value="Apple">Apple<option>
  <option value="Pear">Pear</option>
  <option value="Banana">Banana</option>
  <option value="Orange">Orange</option>
</select>

YAHOO.util.Connect.asyncRequest caching on IE

Another issue I ran into was IE appearing to make ajax calls, but not actually hitting the server. (When it really just hit the server the first time, and used the cache for subsequent calls). Again, this was different behavior than FF/Konky. The secret was to add cache:false to the callback hash (required in the asyncRequest function).

this.callback = {
  success:this.handleSuccess,
  failure:this.handleFailure,
  cache:false
}

I'll end now, I have a bunch more js ranting, perhaps another post. Sometimes I just wish JS was more like python and less like php/perl..... (yes the whitespace wouldn't really work in the xml/html embedded environment... but I digress).

tags: yui  javascript  ajax  selectadd  ie  firefox  

links: digg this    del.icio.us    reddit