Cannot use Ajax/load() etc. to load OPTGROUP in Opera

[kscheik]

If you have a select tag and want to Ajax content into it, e.g. with .load(), the HTML to be inserted cannot contain <OPTGROUP> tags, because that will result in a blank/empty Ajax response. I'm not sure if this is an Opera bug, but I'm afraid so, because there's a similar bug report for Prototype.

To Reproduce (out of the top of my head):

<select id="testselect"></select>

$('#testselect').load('some optgroup and option tags');

will work if the URL returns only <option> tags, but not if it contains <opgroup> tags.

It works in Safari, Firefox 2, 3, IE6, 7, but does not it Opera 9.2 and 9.5. Tested using 1.2.5, 1.2.6 and trunk as of 2008-06-13.

(HTML) Code is 100% validatable HTML 4.01 Strict or XHTML 1.1.

Just returning <option> tags works though, so for now I detect Opera on the server and leave out the <optgroup> tags, which is too bad, because Opera renders them so nicely, they are useful, and Opera is simply the best browser ;)

I tried to track it down by using .ajax() and AFAIR the responseText is empty or the code is never reached (I don't remember right now). There's no error in the Error Console either. As I said, I guess it's Opera's fault :( though to confirm, I'd have to manually do an XmlHttpRequest to see if it's JQuery or not.

I hope JQuery can work around this somehow.

Thanks for your time and effort, keep up the good work!

[flesler]

Odd... jQuery.clean does handle optgroups. This will need a bunch of research.

[greut]

It's very annoying, and seems to be Opera related... only.

// work
var optGroup = document.createElement("optgroup");
optGroup.setAttribute("label", "hello");
optGroup.innerHTML = '<option>foo</option><option>bar</option>';
document.getElementById("test4").appendChild(optGroup);
// doesn't work
document.getElementById("test4").innerHTML = '<optgroup label="hello">'+
      '<option>foo</option>'+
      '<option>bar</option>'+
   '</optgroup>';

[greut]

And if you want to make MSIE happy too, avoid using 'innerHTML' on 'select' or 'optgroup'. (fyi, test4 is a 'select')

var optGroup = document.createElement("optgroup");
optGroup.setAttribute("label", "hello");
var option = document.createElement("option");
option.appendChild(document.createTextNode("foo"));
optGroup.appendChild(option);
option = option.cloneNode(false);
option.appendChild(document.createTextNode("bar"));
optGroup.appendChild(option);

document.getElementById("test4").appendChild(optGroup);

[greut]

Bug filled on Opera's bug tracker: [email protected]…

[greut]

To follow this bug on the Prototype side: ​http://prototype.lighthouseapp.com/projects/8886-prototype/tickets/70

[flesler]

Ok, so as this is not a jQuery bug, I'll close. Do reopen if you have something else t say.

As a temporal workaround, avoid using innerHTML/.html(), use .append() instead.

[greut]

Yes you can use .append() but use document.createElement instead of $("<option></option>").

// Do not use:
var optGroup = $("<optgroup></optgroup>");
var option = $("<option></option>");

// But:
var optGroup = $(document.createElement("optgroup"));
var option = $(document.createElement("option"));

// Then everything works as expected
optGroup.attr("label", "hello").append(
    option.append("foo"),
    option.clone().text("bar"));
// with append of course
$("select#test5").append(optGroup);