Bug Tracker

Modify

Ticket #12002 (closed bug: cantfix)

Opened 22 months ago

Last modified 17 months ago

$('<select class="question" />'); vs $('<select />', {'class': 'question'}); produces different results in IE

Reported by: Brandon Boone Owned by: saiwong
Priority: low Milestone: None
Component: attributes Version: 1.7.2
Keywords: ie6 ie7 ie8 ie9 Cc:
Blocking: Blocked by:

Description

In response to the feedback I got on this Stack Overflow question:  http://stackoverflow.com/questions/11298885/select-options-text-is-different-once-selected There may be an issue in how jQuery handles IE's quirkiness in regard to HTML object creation concerning "<select>" elements.

Using the following links:

Follow these instructions:

  1. In the first drop down choose 3
  2. In the second drop down choose 1
  3. In the first drop down choose 1 (should not be an available option)
  4. Notice that the selected value is 2!
  5. Notice that changing your selected value in the second drop down also produces different values than those presented.
  6. Lastly, notice that the DOM is displaying the correct values

Only thing different in these examples are the way the "select" elements are created.

//Broken
var $S1 = $('<select class="question" />'); 

//vs

//Fixed
var $S1 = $('<select />', {'class': 'question'}); 

Broken in:

  • IE 9 v9.0.8112.16421
  • IE 8 v8.0.7600.16385

Change History

comment:1 follow-up: ↓ 2 Changed 22 months ago by rwaldron

  • Owner set to Brandon Boone
  • Status changed from new to pending

Can you reduce this to something that doesn't require a human to make selections in a form?

comment:2 in reply to: ↑ 1 Changed 22 months ago by Brandon Boone

  • Status changed from pending to new

Replying to rwaldron:

Can you reduce this to something that doesn't require a human to make selections in a form?

Unfortunately, programmatically altering the selection corrects the behavior

Example:

$S1.focus().children('option:eq(1)').click().prop('selected', true).end().change(); 
$S2.focus().children('option:eq(0)').click().prop('selected', true).end().change();

Changing the selections through human interaction shows that the error still persists.

comment:3 Changed 22 months ago by Brandon Boone

Here is a fiddle to compliment the previous code snippet.

 http://jsfiddle.net/s6F4h/22/

comment:4 Changed 22 months ago by dmethvin

  • Keywords ie6 ie7 ie8 ie9 added
  • Priority changed from undecided to low
  • Status changed from new to open
  • Component changed from unfiled to attributes

This looks like inconsistent behavior throughout IE, from 6 to 9. The good news is that this seems to be fixed in IE10.

The page seems totally broken in IE6/7 once you make the first selection, the second box no longer even responds to clicks.

comment:5 Changed 20 months ago by dmethvin

  • Status changed from open to closed
  • Resolution set to invalid

Don't know why I didn't notice this earlier. The markup is invalid. You can't use XHTML-style tags on elements that take content, save for the ONE EXCEPTION that jQuery allows for attribute-less tags as a shortcut. We can't save you from the other cases, you have to actually do them right. This is clearly documented.  http://api.jquery.com/jQuery/#jQuery2

Wrong: $('<select class="abc" />')

Right: $('<select class="abc"></select>')

comment:6 Changed 20 months ago by gibson042

  • Status changed from closed to reopened
  • Resolution invalid deleted

comment:7 Changed 20 months ago by mikesherov

  • Status changed from reopened to closed
  • Resolution set to invalid

comment:8 Changed 20 months ago by dmethvin

  • Status changed from closed to reopened
  • Resolution invalid deleted

Haha, nope gibson042 is right. I keep forgetting we fixed that for single tags. And I must have checked for that when I did the initial triage.

comment:9 Changed 20 months ago by gibson042

@mikesherov "select" is not in the no-content list there. Check execution on the fiddles; <select class="question" /> is converted to <select class="question" ></select> by  https://github.com/jquery/jquery/blob/c01e022f33575ed45fb8da65be756fc464d40a24/src/manipulation.js#L670. I don't have access to the IEs right now, but if there's something going on here it's definitely *not* from self-closing markup.

comment:10 Changed 20 months ago by mikesherov

  • Status changed from reopened to open

That's what I get for triaging right before bed :-/

comment:11 Changed 19 months ago by gibson042

  • Keywords 1.9-discuss added

comment:12 Changed 19 months ago by mikesherov

+1

comment:13 Changed 19 months ago by rwaldron

Not sure this is vote roll material... Seems like a bug we need to just fix

comment:14 Changed 19 months ago by gibson042

  • Keywords 1.9-discuss removed
  • Milestone changed from None to 1.9

comment:15 Changed 19 months ago by gibson042

  • Owner changed from Brandon Boone to saiwong
  • Status changed from open to assigned

comment:16 in reply to: ↑ description Changed 19 months ago by saiwong

Looks like issue is related to a browser bug IE where the DOM is correct but the view requires a repaint to reflect the changes. This can be done via a simple hide().show() as show here:

 http://jsfiddle.net/saiwong/s6F4h/48/

This seems to only affect elements when the class is specified in the HTML text.

Marking as can't fix.

Replying to Brandon Boone:

In response to the feedback I got on this Stack Overflow question:  http://stackoverflow.com/questions/11298885/select-options-text-is-different-once-selected There may be an issue in how jQuery handles IE's quirkiness in regard to HTML object creation concerning "<select>" elements.

Using the following links:

Follow these instructions:

  1. In the first drop down choose 3
  2. In the second drop down choose 1
  3. In the first drop down choose 1 (should not be an available option)
  4. Notice that the selected value is 2!
  5. Notice that changing your selected value in the second drop down also produces different values than those presented.
  6. Lastly, notice that the DOM is displaying the correct values

Only thing different in these examples are the way the "select" elements are created.

//Broken
var $S1 = $('<select class="question" />'); 

//vs

//Fixed
var $S1 = $('<select />', {'class': 'question'}); 

Broken in:

  • IE 9 v9.0.8112.16421
  • IE 8 v8.0.7600.16385

comment:17 Changed 19 months ago by gibson042

  • Status changed from assigned to closed
  • Resolution set to cantfix

comment:18 Changed 17 months ago by dmethvin

  • Milestone changed from 1.9 to None

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.