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
– lonesomeday, Commented May 24, 2014 at 13:02
Also you script should be at the bottom or wrapped in $(document).ready() {.. — user3559349
– user3559349, Commented May 24, 2014 at 13:06
i was learning from this example bibeault.org/jqia2/chapter3/lab.move.and.copy.html .. it uses the same Jquery version — Neeraj Verma
– Neeraj Verma, Commented May 24, 2014 at 13:14
jQuery (with a lowercase j and a uppercase Q) has its own learning center learn.jquery.com, it's probably better to learn there than from a site using a four year old jQuery. — idmean
– idmean, Commented May 24, 2014 at 14:21

jeilsoft · Accepted Answer · 2014-05-24 13:06:44Z

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, 2014 at 13:06

jeilsoft

5825 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

agmcleod · Accepted Answer · 2014-05-24 13:03:47Z

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, 2014 at 13:03

agmcleod

13.6k13 gold badges61 silver badges100 bronze badges

Comments

jeilsoft · Accepted Answer · 2014-05-24 13:10:28Z

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, 2014 at 13:10

jeilsoft

5825 silver badges13 bronze badges

2 Comments

Neeraj Verma Over a year ago

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

ArnauOrriols Over a year ago

How do you know you are not getting the value from data, if you are not using the variable anywhere?

guest271314 · Accepted Answer · 2014-05-24 14:16:00Z

0

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/

answered May 24, 2014 at 14:16

guest271314

1

Comments

CyberJunkie · Accepted Answer · 2014-05-24 14:23:41Z

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, 2014 at 14:23

CyberJunkie

22.8k62 gold badges155 silver badges221 bronze badges

Comments

ArnauOrriols · Accepted Answer · 2014-05-24 14:28:47Z

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, 2014 at 14:28

ArnauOrriols

5841 gold badge4 silver badges15 bronze badges

Comments

pete · Accepted Answer · 2014-05-24 15:19:13Z

0

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/

answered May 24, 2014 at 15:19

pete

25.2k4 gold badges40 silver badges52 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related