Thursday, January 27, 2011

Solving one IE rendering problem...

I know this has been posted elsewhere, but since I recently ran into the issue and had to do some digging and coding to work around it, I thought I'd post it for others to find.

While working with a drop-down select box in a form, I wanted to be able to show/hide different sections of the form depending on the value of the selection (I'm currently using the Prototype javascript library for this project). It all worked fine in every browser except IE (surprise... NOT!). IE was not setting the "value" property of the select box.

After some testing, I found that IE DID properly set the selectedIndex attribute, so I could use that to get IE to work like I wanted it to; here's the code:

MHC.select_display = function(select_id, select_value, select_number, toggle_id) {
/***
* NOTICE IE6 properly sets the selectedIndex value but does NOT set the value property; therefore, we have to give both values to this routine
* to handle both browsers.
* alert("Hi - I've been changed! / " + select_id + " / " + select_value + " / " + toggle_id + " / " + $(select_id).selectedIndex + " / " +  $(select_id).options[$(select_id).selectedIndex].value + " / " + $(select_id).value) + " / " + $(select_id).options.value;
**/     
if(Prototype.Browser.IE) {
  if($(select_id).selectedIndex == select_number) {
    $(toggle_id).appear();
    }
  else {
    $(toggle_id).hide();
    }
  }
else {
  if($(select_id).options[$(select_id).selectedIndex].value == select_value) {
    $(toggle_id).appear();
    }
  else {
    $(toggle_id).hide();
    }
  }
};
While I don't know this for a fact, I'm guessing that other problems with IE form fields (such as checkboxes and the "checked" attribute) may be due to the timing of updates to the attributes; you may be able to find alternative attributes that you can interrogate to get things done.

No comments:

Post a Comment