0

From what I understand, there is no limit in the length of a data attribute(correct me if I'm wrong). However, something strange is occurring in IE when I have a data attribute with a lot of characters. Basically I want to use jQuery to show a specific div if the data attribute, data-zip, contains a specific zip entered by the user.

Everything is working great for me in FireFox, Chrome and Safari, but I noticed that I could not get this to work in any version of IE that I tried(8/9/10). I began to make a JSFiddle, with significantly less zip codes added to the data attribute, so I could post here, but that's when I realized that my Fiddle was working fine in IE as long as the number of characters in the data attribute was kept short.

I also noticed that if I enter all of the zip codes into the data attribute on JSFiddle, JSFiddle thinks that the code is formatted incorrectly (although the code still works as expected in modern browsers so this may be inconsequential).

I used the F12 developer tools in IE to inspect the elements and noticed that when I have all of the zip codes entered, it appears as though none of them are actually being parsed in IE as seen below:

enter image description here

This would probably explain why my code is not working correctly in IE (since the data-zip attribute appears empty). Does anyone know what's going on here and how I can rectify the situation?

Here is a JSFiddle, the first element has the maximum amount of characters I can put into a data attribute, in JSFiddle, before the syntax highlighting gets thrown off, the 2nd shows the highlighting anomaly. Neither of which are parsed correctly in any version of IE I've tried, but in modern browsers it works as expected.

user13286
  • 3,027
  • 9
  • 45
  • 100
  • possible duplicate of [Is there a limit to the length of HTML attributes?](http://stackoverflow.com/questions/1496096/is-there-a-limit-to-the-length-of-html-attributes) – Oriol Oct 15 '14 at 22:07
  • 1
    @Oriol While true, an answer there shows that an attribute with 10 million characters works in IE7, which doesn't make sense. The length that the OP is using is < 5000 – Ian Oct 15 '14 at 22:09
  • 1
    It's not a duplicate, in that thread it is mentioned that even a string length of 10 million characters should work fine in IE7, my string length is significantly less than that(around 5,000). – user13286 Oct 15 '14 at 22:10
  • @user13286 May I ask why you're passing data through a `data-*` attribute, and not with something like AJAX? – Ian Oct 15 '14 at 22:10
  • 1
    Tried http://jsfiddle.net/81ww1aqL/ in IE (9-11), the attribute can be used in a css pseudo class – KooiInc Oct 15 '14 at 22:15
  • @Ian I actually don't have a good answer for that :P I am working with a client that has some strange requirements and this is the way they wanted me to approach the problem. I do plan on discussing alternate solutions with them, so thank you for the suggestion! – user13286 Oct 15 '14 at 22:19
  • @user13286 Sounds good. I used to use `data-*` attributes for little pieces of information (like an `id` or something), until I separated JS and HTML (with AngularJS) so that AJAX completely loads data – Ian Oct 15 '14 at 22:22
  • http://jsfiddle.net/kjex9qh1/ seems to work too here. Just simplified the selector – KooiInc Oct 15 '14 at 22:23
  • 2
    It seems that's more related to CSS selectors than html/js. There is no problem in retrieving the attribute using `getAttribute`, but that attribute selector doesn't work neither in a stylesheet nor in `document.querySelector`. – Oriol Oct 15 '14 at 22:25
  • 1
    You should isolate whether this has anything to do with jQuery or JavaScript in general, by constructing a test case with HTML and CSS alone, and include the case in the question itself. As @Oriot says, this appears to be an issue with CSS selectors in IE. As currently formulated, the question will hardly be found by future visitors that have a similar problem. – Jukka K. Korpela Oct 16 '14 at 06:19

1 Answers1

1

You have to remove the " within the selector to make it work in IE:

So '.contentBlock[data-zip*='+ userZip +']' instead of '.contentBlock[data-zip*="'+ userZip +'"]'. Tested in IE version 9-11 (jsFiddle doesn't work well in IE8).

'[data-zip*='+ userZip +']' will also work, by the way.

KooiInc
  • 119,216
  • 31
  • 141
  • 177