Skip to main content

Bug Tracker

Side navigation

#8642 closed bug (invalid)

Opened March 25, 2011 02:24PM UTC

Closed March 25, 2011 03:38PM UTC

Last modified September 24, 2012 04:36PM UTC

$(':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/

Attachments (0)
Change History (8)

Changed March 25, 2011 03:38PM UTC by dmethvin comment:1

resolution: → invalid
status: newclosed

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

Changed March 28, 2011 01:48AM UTC by laubstein comment:2

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.

Changed March 30, 2011 02:06PM UTC by dmethvin comment:3

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.

Changed March 30, 2011 04:57PM UTC by laubstein comment:4

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

Changed March 30, 2011 09:03PM UTC by dmethvin comment:5

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.

Changed March 30, 2011 11:42PM UTC by laubstein comment:6

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!

Changed September 24, 2012 04:34PM UTC by anonymous comment:7

I have this same problem in IE 8.

Changed September 24, 2012 04:36PM UTC by dmethvin comment:8

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