Bug Tracker

Opened 8 years ago

Closed 8 years ago

Last modified 7 years ago

#8642 closed bug (invalid)

$(':input').text('something') throw error in IE

Reported by: laubstein Owned by:
Priority: undecided Milestone: 1.next
Component: unfiled Version: 1.5.1
Keywords: Cc:
Blocked by: Blocking:

Description

I know, .text() does not change the value of inputs (.val() do that), but just IE throw an exception.

http://jsfiddle.net/laubstein/mRZ5Z/

Change History (8)

comment:1 Changed 8 years ago by dmethvin

Resolution: invalid
Status: newclosed

Yes, because you are trying to add a text node to an input and inputs cannot have child elements.

comment:2 Changed 8 years ago by laubstein

Yes, I know that, but the point is: when I make the tests using IE, I have an exception within the jQuery (line 5114).

I can think in two solutions:

  • More generic (.append method)
    • FROM
      /* 5113 */ if ( this.nodeType === 1 ) {
      /* 5114 */     this.appendChild( elem );
      /* 5115 */ }
      
    • TO
      /* 5113 */ if ( this.nodeType === 1 && this.nodeName !== 'INPUT' ) {
      /* 5114 */     this.appendChild( elem );
      /* 5115 */ }
      
    • OR
      /* 5113 */ if ( this.nodeType === 1 ) {
      /* 5114 */     try {
      /* 5115 */         this.appendChild( elem );
      /* 5116 */     } catch (e) {}
      /* 5117 */ }
      
  • More specific (.text method)
    • FROM
      /* 5042 */ return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );
      
    • TO
      /* 5042 */ return this.empty().each(function() {
      /* 5043 */     $(this).not(":input").append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );
      /* 5044 */ });
      

Both solutions works... but using the "more specific" solution we can have the same DOM tree on IE, FF, Chrome, etc.

comment:3 Changed 8 years ago by dmethvin

I do not understand the "same DOM tree" comment. It is incorrect to attempt to append DOM elements to an input. A DOM tree with child elements on an input is an invalid document. I don't think we need to add checks for that.

comment:4 in reply to:  3 Changed 8 years ago by laubstein

When I wrote "same DOM tree", I was trying to say that:

  • Using FF, Chrome and Opera:
    • The code
      $('#myInput').text('something');
      
    • Produces
      <input type="text" id="myInput">something</input>
      
  • Using IE:
    • The code
      $('#myInput').text('something');
      
    • "Produces" (throw error and don't change the input)
      <input type="text" id="myInput" />
      

I have updated the fiddle: http://jsfiddle.net/laubstein/mRZ5Z/1/

Thanks

comment:5 Changed 8 years ago by dmethvin

I can't really blame IE for throwing an error, rather than producing an invalid document. IE is trying to send a message here ... listen to it: <input> elements cannot have children.

comment:6 in reply to:  5 Changed 8 years ago by laubstein

Dave,

did you read that the exception has occurred inside the jQuery file (line 5114 called from 5042)?

This problem came to me because a co-worker tried to do something like that:

// "left" is a generic css class (text-align: left)
$('.left').text('');

We have already fixed using:

$('.left').not(':input').text('');
$(':input.left').val('');

Just for curiosity... I looked in jQuery 1.5.1 source code and have found 3 "try..catches" that just prevent's IE from throwing an error:

  • lines 2474 and 2498 - prevent IE from throwing an error for some elements with some event types, see #3533
  • line 5802 - Wrapped to prevent IE from throwing errors when 'invalid' values are provided, Fixes bug #5509
  • line 6094 - #8138, IE may throw an exception when accessing a field from document.location if document.domain has been set. (extra, because the catch block has some code)

Yes, I know that <input> (and some others) elements cannot have children =). (http://www.w3.org/TR/html4/index/elements.html and http://dev.w3.org/html5/spec/Overview.html)

Thank you!

comment:7 Changed 7 years ago by anonymous

I have this same problem in IE 8.

comment:8 Changed 7 years ago by dmethvin

That's because you're not supposed to do that. Use .val() instead.

Note: See TracTickets for help on using tickets.