Bug Tracker

Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#3040 closed bug (wontfix)

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

<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!

Change History (7)

comment:1 Changed 11 years ago by flesler

need: ReviewPatch
Priority: criticalminor

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

comment:2 Changed 11 years ago by 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>';

comment:3 Changed 11 years ago by 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);

comment:4 Changed 11 years ago by greut

Bug filled on Opera's bug tracker: bug-340396@…

comment:5 Changed 11 years ago by greut

comment:6 Changed 11 years ago by flesler

Resolution: wontfix
Status: newclosed

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.

comment:7 Changed 11 years ago by 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);
Note: See TracTickets for help on using tickets.