quirks mode

January 13, 2007 6:25 AM

AJAX filter: I'm trying to repopulate the contents of a SELECT element, sounds simple but the damndest thing keeps happening. Every time I update this SELECT element in IE7, it shrinks by about 10px, until it finally disappears from the page entirely!

I've tried loads of different ways of doing this pretty simple operation and so far nothing has worked in IE7. (It goes without saying that firefox works perfectly every time).

When I use innerHTML or the prototype update() function, IE just displays an empty dropdown. When I manipulated the data into a series of DOM inserts, IE seemed happy enough although every time I update it shrinks the width of the select element by about 10px. Looking in the IE DOM, the styles associated with the element haven't changed: width:100%. DOCTYPE is xhtml strict, in case that makes a difference.

Anyone out there got enough kung-fu to keep me sane this arfternoon?

posted by whoojemaflip to Computers & Internet (10 answers total)

Can you provide a listing of the code that's producing this effect?
posted by cerebus19 at 6:47 AM on January 13, 2007

Response by poster: The code that produced the strange shrinking effect looks like this:

function doUpdate(reply_text) {
var old_contents = status_field.childNodes.length;

var option_array = reply_text.split("|");
for(var i=0; i if(option_array[i].match(/[-\d]~[\w\s\d]/)) {

var opa = option_array[i].split(",");
var option = document.createElement("option");
option.setAttribute("value", opa[0]);

var tn = document.createTextNode(opa[1]);

option.appendChild(tn);
status_field.appendChild(option);
}
}

while(old_contents > 0) {
status_field.removeChild(status_field.firstChild);
old_contents--;
}

where reply_text is a string in the format:

0,some text|1,more text|2,extra text
posted by whoojemaflip at 7:03 AM on January 13, 2007

Response by poster: um, something went missing there. Lines 3 and 4 of the function should look like this

for(var i=0; i less_than option_array.length; i++) {
if(option_array[i].match(/[-\d]~[\w\s\d]/)) {

mefi not such a fan of less_than characters I guess.
posted by whoojemaflip at 7:06 AM on January 13, 2007

Best answer: The less-than character is seen as the start of a tag, so you need to use "<" instead. But, anyway...

Have you tried recoding it using the Javascript Select object API? I think the DOM manipulation is probably causing IE to do something weird. You can just do something like this:

status_field.options[x] = new Option("Display Text", "value");

More information can be found here and here.
posted by cerebus19 at 7:19 AM on January 13, 2007

Whoops. That "<" should be the ampersand, followed by "lt;".
posted by cerebus19 at 7:20 AM on January 13, 2007

Best answer: A couple of things.

First, it sounds like you're not replacing nodes, but instead creating new child nodes. These nodes are styled probably through CSS to be a percentage of their parent container, which is why, every time you do the procedure, you get smaller and smaller options. What does status_field point to?

Second, don't use createElement. It's a shitload slower than just swapping the guts via innerHTML.

Third, your transport mechanism sucks. Pipes and commas are no way to move data across the wire. Look into JSON. There are libraries for just about every single programming language you can think of.
posted by Civil_Disobedient at 7:52 AM on January 13, 2007

Response by poster: Didn't think of that for some reason., works brilliantly with no unexpected side effects.

You, sir, are an absolute star!

My sanity is saved (for now)!
posted by whoojemaflip at 7:59 AM on January 13, 2007

Response by poster: status_field = $('select_element_id')

civil_d: thanks for the JSON link. I'll be using that from now on methinks.

The resaon I didn't use innerHTML in this example is that explorer wasn't updating the contents of the select element. Originally I was returning html <option>'s from the server and placing them directly into the document using status_field.innerHTML, and when that didn't work for me I tried using the prototype Element.update() function with similarly unspectacular results.

Every single one of these techinques worked fine in firefox, which makes it all the more difficult to debug since IE has almost no webauthoring tools beyond frontpage and the not-in-the-same-league-as-firebug IE developer toolbar
posted by whoojemaflip at 8:08 AM on January 13, 2007

Response by poster: Bonus points if you can think of a reason why explorer doesn't like the quick 'n easy route:

document.getElementById('status_field').innerHTML = some_html

to replace the contents of

<select id='status_field'></select>
posted by whoojemaflip at 8:13 AM on January 13, 2007

Best answer: I suspect that has something to do with this bug, which evidently hasn't been properly fixed (shocking, I know) despite having been first detected nearly four years ago.
posted by cerebus19 at 11:21 AM on January 13, 2007