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