#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 15 years ago by
need: | Review → Patch |
---|---|
Priority: | critical → minor |
comment:2 Changed 15 years ago by
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 15 years ago by
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:5 Changed 15 years ago by
To follow this bug on the Prototype side: http://prototype.lighthouseapp.com/projects/8886-prototype/tickets/70
comment:6 Changed 15 years ago by
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.
comment:7 Changed 15 years ago by
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);
Odd... jQuery.clean does handle optgroups. This will need a bunch of research.