Invalid jQuery selectors causing errors in IE8 using updated jQuery (1.7 + ) [#1801046]

Sorry, haven't checked up on the thread in a while. I had seen some discussion on the handling of quotes in attribute selectors, unfortunately can't remember where this was. I don't think I highlighted enough that this is only specific to jQuery 1.7+ on IE<8, non quoted attribute selectors ARE valid, but seemingly not properly supported in older IE versions.

A curious note on this page:
http://api.jquery.com/category/selectors/attribute-selectors/

States that only simple identifiers should be unquoted, could be that the ":" in "mailto:" disqualifies it?

Attribute values in selector expressions must follow the rules for W3C CSS selectors, in general that means anything other than a simple identifier should be surrounded by quotation marks.

double quotes inside single quotes: $('a[rel="nofollow self"]')
single quotes inside double quotes: $("a[rel='nofollow self']")
escaped single quotes inside single quotes: $('a[rel=\'nofollow self\']')
escaped double quotes inside double quotes: $("a[rel=\"nofollow self\"]")

Every example on that page also uses quotes.

Are you able to replicate the bug/solution in IE8?

Log in or register to post comments

Comment #5

hass CreditAttribution: hass commented 11 October 2012 at 22:50

Thanks for sharing this, but I'm still confused as it is not clear to me what a simple identifier is.

It also sounds strange to me that I do not have a IE8 next to me for testing. Something I need to change. But the more problematic is that I have a Drupal 7 with jQuery v1.4.4 only and as these jQuery upgrades have always caused issues only inside Drupal I'm not sure why I should try it.

As we have never seen this with jQuery v1.4.4 it may be a bug of 1.7+. I would suggest you file a issue against jquery first and we see what the jquery guys say. Please post the bug tracking link here, too.

Log in or register to post comments

Comment #6

hass CreditAttribution: hass commented 11 October 2012 at 22:52

Per http://api.jquery.com/category/version/1.7/ it looks like there have been chances to is() function that is used here.

Log in or register to post comments

Comment #7

hass CreditAttribution: hass commented 11 October 2012 at 23:15

Maybe one of these changed introduced it:

Log in or register to post comments

Comment #8

SecureTrading CreditAttribution: SecureTrading commented 12 October 2012 at 08:18

Thanks for the feedback, I wasn't entirely sure on their usage of 'simple identifier' either, it seems to be any alphanumeric string, so as soon as punctuation is used (e.g ":" or a space), it needs to be quoted. I'm not entirely sure it's a jQuery bug.

Quote from this page (It appears to have been a change in or around 1.6)
http://bugs.jquery.com/ticket/9351#comment:2

Take a look at the api, there have been some changes made in the last 6 months or so regarding attribute selectors, most notably that jQuery requires quotes around the attribute value of the selector http://api.jquery.com/attribute-equals-selector/

And again on the API reference:
http://api.jquery.com/attribute-equals-selector/

jQuery('[attribute="value"]')

attribute
An attribute name.
value
An attribute value. Can be either an unquoted single word or a quoted string.

I think it comes back to "mailto:" not being an alphanumeric 'word', and should be treated as a string.

Quoting the attribute value works on all versions of jQuery, I think it'd be a worthwhile update to the module as the version of jQuery that is available is not guaranteed to be the version included in Drupal core.

Log in or register to post comments

Comment #9

hass CreditAttribution: hass commented 12 October 2012 at 21:26

Let's file a bugcase and get the confirmation that this is a new design or if it's a bug. The jquery docs are not clear to me and need to be fixed. We both see how unclear it is. Others may run into the same DX issues.

Log in or register to post comments

Comment #10

SecureTrading CreditAttribution: SecureTrading commented 15 October 2012 at 10:06

Not sure that's necessary, I think the following references should clear it up.

As before, from the Attribute Selector API page
http://api.jquery.com/category/selectors/attribute-selectors/

Attribute values in selector expressions must follow the rules for W3C CSS selectors, in general that means anything other than a simple identifier should be surrounded by quotation marks.

After digging around on W3's CSS spec, I found the following information:

http://www.w3.org/TR/selectors/#attribute-selectors

Attribute values must be CSS identifiers or strings.

A CSS Identifier is defined here:
http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

A CSS String can be anything in the charset, inside quotes.

So, "mailto:" contains characters outside of [a-zA-Z0-9], "-", "_" and doesn't qualify as an Identifier, suggesting it must be passed as a string, with quotes. It might be possible to escape the colon also, but I haven't tested this. e.g:

a[href^=mailto\: