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

Reported by:	kscheik	Owned by:
Priority:	minor	Milestone:	1.3
Component:	ajax	Version:	1.2.6
Keywords:	ajax optgroup opera	Cc:
Blocked by:		Blocking:

Description

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):

$('#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!

Attachments (0)

Change History (7)

Changed June 17, 2008 08:45PM UTC by flesler comment:1

need:	Review → Patch
priority:	critical → minor

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

Changed June 18, 2008 01:30PM UTC by greut comment:2

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>';

Changed June 18, 2008 01:39PM UTC by greut comment:3

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);

Changed June 18, 2008 01:46PM UTC by greut comment:4

Bug filled on Opera's bug tracker: bug-340396@bugs.opera.com

Changed June 18, 2008 02:14PM UTC by greut comment:5

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

Changed June 23, 2008 01:40PM UTC by flesler comment:6

resolution:	→ wontfix
status:	new → closed

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.

Changed June 24, 2008 09:55AM UTC by greut comment:7

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);

Side navigation

#3040 closed bug (wontfix)