Dynamic SCRIPT elements and Safari 2.0

Patrick Hunlock's excellent article Howto Dynamically Insert Javascript And CSS reminded me of a caveat I ran across last summmer: early 2.0 versions of Safari have a bug that prevents dynamic SCRIPT elements from loading JavaScript content. The bug was fixed in version 2.0.2.

That's probably the edgiest of edge cases, but it had me slamming my forehead against the wall for a few days. I was forced to do version sniffing since dynamic SCRIPT insertion was the only way to perform the cross-domain Ajax operations required.

Here are two bugs I found while researching the problem last year.

IE6 SELECT value gotcha

Consider the following HTML and JavaScript snippet, which attempts to grab the selected value of a SELECT element:

<select name="city" id="citySelector">
  <option>Seattle</option>
  <option selected="true">Tacoma</option>
  <option>Bellingham</option>
</select>

var s = document.getElementById("citySelector");
var v = s.options[s.selectedIndex].value;
alert(v);

In Firefox the result will be the string of selected city ("Tacoma"). IE6 however will return a blank string. Why?

Look at the HTML. None of the options have a value attribute. This is pretty common in markup where the option text is the same as the value. When used with a form POST or GET, most browsers send the option text in lieu of the missing value attribute.

But when accessing the value from JavaScript, Firefox plays fast and loose, whereas IE6 is stricter, returning nothing for the value because none was explicity given.

Here's a solution that works in both browsers:

var v = s.options[s.selectedIndex].text;