1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

HTML 5 Data Attributes and Case Sensitivity

Discussion in 'Notices for Add-on and Style Developers' started by Kier, May 6, 2011.

  1. Kier

    Kier XenForo Developer Staff Member

    XenForo makes use of HTML 5's data attributes in order to provide cues for JavaScript within the HTML markup, for example:
    HTML:
    <form id="myForm" action="forums/44/add-thread" method="post" data-redirect="on">
    These data attributes are accessible in the XenForo JavaScript through jQuery's .data() method, for example:
    Code:
    var redirect = $('#myForm').data('redirect'); // on
    Using jQuery up to and including version 1.4, data attributes were case insensitive, therefore:
    <tag id="myTag" data-fooBar="x" />
    would be accessible with
    $('#myTag').data('fooBar');​

    jQuery 1.5 and 1.6

    However, changes in jQuery 1.5 and 1.6 mean that data attributes are now forced to lowercase, so:
    <tag id="myTag" data-fooBar="x" />
    is only accessible with
    $('#myTag').data('foobar');​

    Changes have also been made to convert dashed data attributes to camelcase, so :
    <tag id="myTag" data-my-data-attribute="x" />
    is translated into
    $('#myTag').data('myDataAttribute');​

    So why do I need to know this?

    Although there is a bug in jQuery 1.5 and later that prevents us from upgrading the version of jQuery that we ship with XenForo, once this bug is resolved, we will take steps to migrate to jQuery 1.6. When we do, all data attributes in XenForo will be subject to the new case sensitivity constraints.

    Therefore, you should avoid using camel-cased data attributes in your HTML, and stick to all lowercase attributes such as
    <tag data-nameofitem="x" />
    or use dashed attributes such as
    <tag data-name-of-item="x" />
    and then expect to deal with .data() items of 'nameofitem' and 'nameOfItem' respectively.

    The important thing to remember is that
    <tag id="foo" data-nameOfItem="x" />
    will no longer be accessible using
    $('#foo').data('nameOfItem')
    and will be accessible only using
    $('#foo').data('nameofitem')

    Start updating your code soon :)
     
  2. a legacy reborn

    a legacy reborn Well-Known Member

    Why did they change this? Any reason other than it might avoid typo errors? Just wondering.
     
  3. dmnkhhn

    dmnkhhn Active Member

    This was just plain stupid by the jQuery developers.

    Other than that, they also changed how .attr(‘checked’) works. That will also break a lot of plug-ins.
     
  4. Mike

    Mike XenForo Developer Staff Member

  5. a legacy reborn

    a legacy reborn Well-Known Member

Share This Page