I thought I could add this before calling jQuery Mobile's JavaScript:

$('section').data('role','page');
$('article').data('role','content');

And that way I could simply use <section> and <article> tags in my HTML instead of specifying <div data-role="page"> and <div data-role="content">.

But I don't think it's working.

I thought I could add this before calling jQuery Mobile's JavaScript:

$('section').data('role','page');
$('article').data('role','content');

And that way I could simply use <section> and <article> tags in my HTML instead of specifying <div data-role="page"> and <div data-role="content">.

But I don't think it's working.

• javascript
• jquery-mobile

Share Improve this question Follow edited Mar 21, 2013 at 20:11 Ry-♦ 225k5656 gold badges493493 silver badges499499 bronze badges asked Mar 21, 2013 at 20:09 Phillip SennPhillip Senn 47.7k9191 gold badges261261 silver badges378378 bronze badges 6

• Your jQuery calls might be running after the jQuery mobile is loaded – AlexCheuk Commented Mar 21, 2013 at 20:14
• Maybe I could add a defer attribute to the jQuery mobile JavaScript to make sure that it runs last? – Phillip Senn Commented Mar 21, 2013 at 20:15
• Tell me when you want to add it and I will make you an example? It can be done in numerous ways. – Gajotres Commented Mar 21, 2013 at 20:16
• I believe that it needs to run just before script src="//code.jquery./mobile/1.3.0/jquery.mobile-1.3.0.js"> – Phillip Senn Commented Mar 21, 2013 at 20:19
• @MikeLegacy That wasn't me! I up-vote people but can't remember ever downvoting anyone. – Phillip Senn Commented Mar 21, 2013 at 20:20

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 3

You could do this instead:

$('section').attr('data-role','page');
$('article').attr('data-role','content');

Try this:

head:

<script src="jquery.js"></script>
<script src="YOUR-SCRIPT.js"></script>
<script src="jquery-mobile.js"></script>

YOUR SCRIPT JS:

$(document).bind("mobileinit", function(){
    $('section').data('role','page');
    $('article').data('role','content');
    /* OR */
    $('section').attr('data-role','page');
    $('article').attr('data-role','content');
});

Reference: http://jquerymobile./demos/1.2.1/docs/api/globalconfig.html

Why do you require "data-" attributes? http://api.jquery./data/ They can cause memory leaks amongst other issues. jQuery already has a built-in 'data', and it is working. It does not set data- attributes, it uses a better, more efficient means of storing data associated with a DOM selector with JavaScript.

If you for some reason don't have 'data' built in, you should update jQuery. Here is a shim, mostly so you can see how it could work. It is not a plete shim, it's just a very simple way to store data with the selector of an element of the data's key. I don't delete the data when the element is deleted, so my implementation may cause memory leaks. It's just an example, though.

if ($(window).data === undefined) {
    $.fn.data = (function () {
        var storage = {};
        return function data (name, val) {
            var id = $(this).selector;
            storage[id] = storage[id] || {};   
            if (val === void 0) {
                return storage[id][name];
            }
            storage[id][name] = val;
            return $(this);
        }
    }());
}

var foo = $('section').data('role','page');
var bar = $('article').data('role','content');
foo.text(foo.data('role'));
bar.text(bar.data('role'));

http://jsfiddle/dETuh/1/

Notice the alert doesn't run, so my shim isn't even being used..

if ($(window).data === undefined) {
    $.fn.data = (function () {
        var storage = {};
        return function data (name, val) {
            var id = $(this).selector;
            storage[id] = storage[id] || {};   
            if (val === void 0) {
                return storage[id][name];
            }
            storage[id][name] = val;
            return $(this);
        }
    }());
}

var foo = $('section').data('role','page');
var bar = $('article').data('role','content');
foo.text(foo.data('role'));
bar.text(bar.data('role'));