HTML5 & JQuery - Not able to retrieve data from Data-* attribute

Question

I'm learning the use of Data-* attribute in HTML5 and JQuery, about How to retrieve data simply from a div.

This is my markup:

<!DOCTYPE html>
<html >
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        $(function () {

            $('#restoreButton').click(function () {
                var sources$ = $('div').data('module');
              });

        });
    </script>
    <div data-module="Sources" data-module-id="sourcePane">

        <button type="button" class="green90x24" id="restoreButton">Restore</button>
        </div>

</body>
</html>

It says the variable sources$ is Undefined.

I am using simple data() function of JQuery, but doesn't work. I've seen this is one of the Basic.

Any suggestion would be helpful

jQuery 1.4.1 was released in *January 2010* (and you're not showing how you want to use this data). — lonesomeday, May 24 '14 at 13:02
Also you script should be at the bottom or wrapped in `$(document).ready() {..` — , May 24 '14 at 13:06
i was learning from this example http://www.bibeault.org/jqia2/chapter3/lab.move.and.copy.html .. it uses the same Jquery version — Neeraj Verma, May 24 '14 at 13:14
jQuery (with a lowercase j and a uppercase Q) has its own learning center http://learn.jquery.com, it's probably better to learn there than from a site using a four year old jQuery. — idmean, May 24 '14 at 14:21

score 1 · Answer 1 · answered May 24 '14 at 13:06

1

Please check your version of jQuery.

Or check logs in developer tools (Ctrl+Shift+I in Windows, Command+Option+I in Mac).

You can check your variable sources$ with

console.log(sources$);

answered May 24 '14 at 13:06

jeilsoft

572
5
13

score 0 · Answer 2 · answered May 24 '14 at 13:03

0

Might need to update your version of jquery, but also try:

$('div').data('module-id');

The data method grabs the attribute, expecting the key after data-

answered May 24 '14 at 13:03

agmcleod

13,321
13
57
96

score 0 · Answer 3 · answered May 24 '14 at 13:10

0

Where is the place to use this variable sources$?

You should to use this variable in the click event handler.

Or you should to define variable as global variable.

answered May 24 '14 at 13:10

jeilsoft

572
5
13

i didnt use the variable anywhere. it is just I am testing why I am not getting value from data Attribute . I placed it inside click event – Neeraj Verma May 24 '14 at 13:12
How do you know you are not getting the value from data, if you are not using the variable anywhere? – ArnauOrriols May 24 '14 at 14:23

score 0 · Answer 4 · answered May 24 '14 at 14:16

Existing piece from original post appear to work ok, utilizing jQuery 1.11.0

html

 <div data-module="Sources" data-module-id="sourcePane">   
 <button type="button" class="green90x24" id="restoreButton">Restore</button>
 </div>

js

$(function () {
    $('#restoreButton').click(function () {
        var sources$ = $('div').data('module');
        $("body").append(sources$)
    });
});

jsfiddle http://jsfiddle.net/guest271314/LZfUv/

score 0 · Answer 5 · answered May 24 '14 at 14:23

0

Your code works but you are probably not loading jQuery properly. Check the the source URL of your jQuery script and make sure it loads. Also is there a reason you are adding the $ sign at end if the variable sources$? It's uncommon.

answered May 24 '14 at 14:23

CyberJunkie

21,596
59
148
215

score 0 · Answer 6 · answered May 24 '14 at 14:28

0

it says the variable sources$ is Undefined .

Wherever it says so, it most definitely means you are trying to access sources$ from outside it's scope. You cannot access it outside the anonymous function you are defining as click callback.

answered May 24 '14 at 14:28

ArnauOrriols

584
1
4
15

score 0 · Answer 7 · answered May 24 '14 at 15:19

The .data method in jQuery 1.4.1 cannot be used with HTML data attributes. You need jQuery 1.4.3 (minimum) instead.

The example page you are working from, http://bibeault.org/jqia2/chapter3/lab.move.and.copy.html does not use the .data method to retrieve the value of data-module.

If you check the source, there's another external script, jqia2.support.js, which retrieves the value of data-module using the .attr method (which is the workaround for working with HTML data attributes in jQuery 1.4.1). See lines 50 and 55 for this:

$(this).attr('data-module')

Here's a fiddle: http://jsfiddle.net/3dP6A/

HTML5 & JQuery - Not able to retrieve data from Data-* attribute

7 Answers7