Bug Tracker

Ticket #5637 (closed bug: fixed)

Opened 5 years ago

Last modified 3 years ago

Boolean (and Empty) Attribute Selectors Fail

Reported by: miketaylr Owned by: timmywil
Priority: blocker Milestone: 1.7
Component: selector Version: 1.4.4
Keywords: boolean,selector,html5,1.7-discuss Cc:
Blocking: #7234, #7770 Blocked by:

Description (last modified by dmethvin) (diff)

According to the html5 spec, a boolean attribute like 'autofocus' is not allowed to have a value--it's presence or absence determines that. The appropriate CSS selector would be [autofocus] {border:1px solid red;}, for example.

As a jQuery selector $('[autofocus]') fails in ie6 and ie7--only when using a new html5 attribute. $('[disabled]'), for example, works fine (and is valid html4, btw).

The workaround I've found is an ugly selector like so, for the new fancy boolean attributes:

$("[autofocus=]")

Painful to look at, I know.

Here's the test page:  http://miketaylr.com/test/boolean_selector.html

Change History

comment:1 Changed 5 years ago by miketaylr

Ugh. My workaround selector got gobbled. It's the boolean attribute set to an empty string, if that makes sense. It's clear in the test page, anyhow.

comment:2 Changed 5 years ago by scott.gonzalez

The spec definitely does not say that boolean attributes are not allowed to have a value. autofocus="autofocus" is 100% valid; this always has been, and always will be, the case for boolean attributes.

You can still end up running into this problem with valid code, but there is a clean workaround.

comment:3 Changed 5 years ago by miketaylr

Scott, you're right--I misread that part of the spec.

Nonetheless, the real issue here is not with attributes, but with selectors. Considering <input type=text required> as legit markup, and the selector [required] {} as a legit selector in both the CSS2.1 and CSS3 specs--I see no reason that jQuery should force authors to use <input type=text required=required>, as a workaround so they can use [required=required] {}.

Are there any other instances you can point me to where jQuery forces users to use a particular style of (X)HTML?

comment:4 Changed 5 years ago by foolip

I wanted this too so I tried fixing the attribute selector in sizzle.js, in a big block of code that looks like this:

return result == null ?

type === "!=" : type === "=" ? value === check : type === "*=" ? value.indexOf(check) >= 0 : type === "~=" ? (" " + value + " ").indexOf(check) >= 0 : !check ? value && result !== false : type === "!=" ? value !== check : type === "=" ? value.indexOf(check) === 0 : type === "$=" ? value.substr(value.length - check.length) === check : type === "|=" ?

value === check
value.substr(0, check.length + 1) === check + "-" :

false;

However, it turns out that while you can make it work for unknown-to-IE attributes to <time pubdate>, <video autoplay>, etc, you will instead break simple selectors like [title]. Reading:  http://tobielangel.com/2007/1/11/attribute-nightmare-in-ie/ and  http://andrewdupont.net/2007/01/10/code-hasattribute-for-ie/ (the comments, the body of the post doesn't have any code for some reason).

Unless a reliable way to distinguish between missing and empty attributes in IE can be found, this just can't be fixed.

comment:5 Changed 4 years ago by miketaylr

  • Status changed from new to closed
  • Resolution set to wontfix

Closing since there is a valid workaround. :'( If anyone cares to reopen with a patch, feel free.

comment:6 Changed 4 years ago by paul.irish

  • Status changed from closed to reopened
  • Version changed from 1.4a1 to 1.4.4
  • Resolution wontfix deleted
  • Milestone changed from 1.4 to 1.5

Reopening...

Testcase from deadlyicon  http://jsfiddle.net/B974R/

Perhaps this should be a docs issue? Would be ideal for a real fix though..

comment:7 Changed 4 years ago by snover

getAttributeNode has a property specified that allows us to query whether or not an attribute has actually been specified, as opposed to being empty.

Version 0, edited 4 years ago by snover (next)

comment:8 Changed 4 years ago by snover

  • Blocking 7770 added

comment:9 Changed 4 years ago by snover

  • Status changed from reopened to open

comment:10 Changed 4 years ago by snover

#7874 is a duplicate of this ticket.

comment:11 Changed 4 years ago by snover

  • Priority changed from major to blocker

comment:12 Changed 4 years ago by miketaylr

Just noticed that the jsfiddle testcase in Paul's comment seems like an entirely different issue. href is a normal attribute, not a boolean one. However, it could be that both issues are symptoms of the same problem in Sizzle.

Also, here's 80 qunit tests that I should have linked to last year, should they come in handy:

 http://miketaylr.com/test/qunit/html5booleans_shallow.html

comment:13 Changed 4 years ago by john

  • Milestone changed from 1.5 to 1.6

This is getting moved to 1.6 for when the $.attr happens.

comment:14 Changed 4 years ago by stefan.penner@…

 http://jsfiddle.net/kBK8v/4/

potentially the same problem

var d = $(document),

global = $('[required]').length, first = $('[required]').first().is('[required]');

in IE, global query returns the correct count, but first returns false, rather then true for the single IS call.

comment:15 Changed 4 years ago by MT

As far as I can tell, the bug is not related to IE6/7 only. Actually, this takes place in ANY browser with no native querySelector() support (for example Firefox 3.0). So, apparently this is the bug of pure-script implementation of selectors engine of jQuery/Sizzle.

The workaround is acceptable only as temporary solution in a particular cases.

comment:16 Changed 4 years ago by timmywil

#8758 is a duplicate of this ticket.

comment:17 Changed 4 years ago by john

  • Milestone changed from 1.6 to 1.next

comment:18 Changed 4 years ago by timmywil

  • Blocking 6358 added

comment:19 Changed 4 years ago by timmywil

  • Blocking 7234 added

comment:18 Changed 4 years ago by john

  • Keywords boolean,selector,html5,1.7-discuss added; boolean, selector, html5 removed

Nominating ticket for 1.7 discussion.

comment:19 Changed 4 years ago by mathias

  • Description modified (diff)

+1,

comment:20 Changed 4 years ago by rwaldron

+1, Sounds like a bug, should be fixed

comment:21 Changed 4 years ago by jaubourg

+1, in principle, I'd go for this, but what would be the performance cost across all supported browsers?

comment:22 Changed 4 years ago by ajpiano

  • Description modified (diff)

+1, I'd like to see this fixed, and it will only come up with more frequency until we do

comment:23 Changed 4 years ago by timmywil

  • Description modified (diff)

+1, I imagine unifying jQuery.attr and Sizzle attributes will fix this and perhaps reduce the codebase.

comment:24 Changed 4 years ago by danheberden

+1

comment:25 Changed 4 years ago by paul.irish

  • Description modified (diff)

+1

comment:26 Changed 4 years ago by dmethvin

+1, Good bug to fix.

comment:27 Changed 4 years ago by john

  • Description modified (diff)

+1, Yeah, timmywil and I will work on getting this fixed.

comment:28 Changed 4 years ago by scott.gonzalez

+1, probably needs a configurable whitelist

comment:29 Changed 4 years ago by addyosmani

+1

comment:30 Changed 4 years ago by jzaefferer

+1, and another +1 for making shim-building easier

comment:31 Changed 4 years ago by cowboy

+0

comment:32 Changed 3 years ago by dmethvin

  • Description modified (diff)
  • Milestone changed from 1.next to 1.7

comment:33 Changed 3 years ago by john

#9637 is a duplicate of this ticket.

comment:34 Changed 3 years ago by john

#7234 is a duplicate of this ticket.

comment:35 Changed 3 years ago by john

  • Owner changed from john to timmywil
  • Status changed from open to assigned

comment:36 Changed 3 years ago by john

#6004 is a duplicate of this ticket.

comment:37 Changed 3 years ago by john

#7770 is a duplicate of this ticket.

comment:38 Changed 3 years ago by john

  • Summary changed from html5 boolean attributes fail in IEs to Boolean (and Empty) Attribute Selectors Fail

comment:39 Changed 3 years ago by john

#7555 is a duplicate of this ticket.

comment:40 Changed 3 years ago by anonymous

I have problems related to this with this HTML code in IE7:

<span datetime="'2011-08-19T00:00:00-07:00'">Some Text Here!</span> $("span[datetime]") returns an empty jQuery object.

comment:41 Changed 3 years ago by timmywil

  • Blocking 6358 removed

comment:44 Changed 3 years ago by timmywil

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

Override Sizzle attribute retrieval with jQuery.attr. Fixes #5637, #7128, #9261, #9570, #10178.

Bug fixed on the side: $(window).is('a') was throwing an exception. Fixes #10178.

Changeset: 92405d4f5ffe9ec1f26f280303783014948438c5

Note: See TracTickets for help on using tickets.