Setting size attribute for <input> fails in jQuery 1.8.0

[fam.lam]

First, sorry if this is a duplicate, but I could not search because the server tells me

Traceback (most recent call last):
  File "/usr/local/lib/python2.6/dist-packages/Trac-0.12.1-py2.6.egg/trac/web/api.py", line 436, in send_error
    data, 'text/html')
  File "/usr/local/lib/python2.6/dist-packages/Trac-0.12.1-py2.6.egg/trac/web/chrome.py", line 827, in render_template
    message = req.session.pop('chrome.%s.%d' % (type_, i))
  File "/usr/local/lib/python2.6/dist-packages/Trac-0.12.1-py2.6.egg/trac/web/api.py", line 212, in __getattr__
    value = self.callbacks[name](self)
  File "/usr/local/lib/python2.6/dist-packages/Trac-0.12.1-py2.6.egg/trac/web/main.py", line 300, in _get_session
    return Session(self.env, req)
  File "/usr/local/lib/python2.6/dist-packages/Trac-0.12.1-py2.6.egg/trac/web/session.py", line 195, in __init__
    self.get_session(sid)
  File "/usr/local/lib/python2.6/dist-packages/Trac-0.12.1-py2.6.egg/trac/web/session.py", line 216, in get_session
    super(Session, self).get_session(sid, authenticated)
  File "/usr/local/lib/python2.6/dist-packages/Trac-0.12.1-py2.6.egg/trac/web/session.py", line 69, in get_session
    """, (sid, int(authenticated)))
  File "/usr/local/lib/python2.6/dist-packages/Trac-0.12.1-py2.6.egg/trac/db/util.py", line 65, in execute
    return self.cursor.execute(sql_escape_percent(sql), args)
  File "/usr/lib/pymodules/python2.6/MySQLdb/cursors.py", line 166, in execute
    self.errorhandler(self, exc, value)
  File "/usr/lib/pymodules/python2.6/MySQLdb/connections.py", line 35, in defaulterrorhandler
    raise errorclass, errorvalue
OperationalError: (2006, 'MySQL server has gone away')

---

The actual bug: It is no longer possible to set the (valid HTML) size attribute of an input element in jQuery 1.8.0. This used to work fine in 1.7.2. It works fine for all other attributes (which I tested) and it's not mentioned in the changelog (which only mentions deprecating size(), but that's something different).

var inputBox = $('<input>', {
    type: "text",
    size: "99",
    value: "abcdefghijklmnopqrstuvwxyz"
});
$("body").append(inputBox);

See ​http://jsfiddle.net/bWDGG/

[anonymous]

Forgot to mention: browser: Chrome on Windows 7

[anonymous]

use css!

[dmethvin]

Apologies for the misbehaving bug tracker, it's really acting up today.

This is due to a 1.8 enhancement in $(html, props) that allows you to call any method instead of just a small group of whitelisted methods. Since there is still a (deprecated) .size() method, that is attempting to call the method with "99" as an argument.

I agree it's a regression, but one I don't think we will back out. The $(html, props) signature is inherently ambiguous about the meaning of the object keys, which is why I dislike it so much.

There are several solutions. The first is to not use it at all, since it doesn't save you any space and this improves the clarity of the code:

var inputBox = $('<input>')
  .attr({ type: "text", size: "99" }) 
  .val("abcdefghijklmnopqrstuvwxyz")
  .appendTo("body");

The other solution is to call .attr explicitly in the props object, either for all the attributes or just the size one.

var inputBox = $('<input>', {
    type: "text",
    attr: { size: "99" },
    value: "abcdefghijklmnopqrstuvwxyz"
}).appendTo("body");

​http://jsfiddle.net/bWDGG/1/

[scottgonzalez]

Or use width instead of size which is more explicit...

[dmethvin]

#12645 is a duplicate of this ticket.

[dmethvin]

#13392 is a duplicate of this ticket.

[heerasheikh@…]

Still now Size works instead of size, ​http://stackoverflow.com/a/19576388/741747.