Cannot set data-id to HTML element

Question

I'm searching for this sometime. Found this old article and this. But not working for me.

My Problem is : I cannot set incremented data-id to HTML Element via jQuery. I'm able to alert the same, But I failed to set in HTML. There is no change in the element if I inspect.

jQuery

$(document).ready(function() {    
   $("#search").click(function(){      
   var num = $(this).data('id');    
    num++; 
    $("span").text(num);
    $(this).data('id', num);
   });    
 });

I tried this also

$(this).data('id') === num;

Here is a jsFiddle Demo

I'm using v1.9.1 and no error in console. Its great if anyone can find the issue.

Notice that the jQuery data method does not set data attributes. — Bergi
– Bergi, Commented Jan 7, 2014 at 12:46

Community · Accepted Answer · 2017-05-23 12:30:16Z

8

All other answers are correct - fixing 'val' to val - that of course solves the NaN issue.

The problem however is:

I cannot set incremented data-id to HTML Element via jQuery. I'm able to alert the same, But I failed to set in HTML. There is no change in the element if I inspect.

jQuery uses internal representation (1) for data. If you want to see data-id in inspector you need to use: $(this).attr('data-id', num);

(1) "Internal represenation":

All data is stored inside a property of the jQuery object named cache. Log the contents of $.cache in your console to see all data and events associated with any DOM element.

See: https://stackoverflow.com/a/4385015/775359

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Jan 7, 2014 at 12:53

Mars Robertson

13.3k13 gold badges73 silver badges93 bronze badges

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

1 Comment

Surjith S M Over a year ago

I will stick with .attr. Thanks :-)

James Hibbard · Accepted Answer · 2014-01-07 12:47:03Z

2

The problem is in this line.

$(this).data('id', 'num');

num should be a variable, not a string.

Change it to this and it will work fine:

$(this).data('id', num);

answered Jan 7, 2014 at 12:47

James Hibbard

17.8k14 gold badges69 silver badges76 bronze badges

4 Comments

Surjith S M Over a year ago

Sorry that was a Typo, Not Working with variable too

James Hibbard Over a year ago

Your fiddle works for me. When you click the div, the number is increased. What is it that you are expecting?

Surjith S M Over a year ago

I cannot set incremented data-id to HTML Element. See yourself by inspecting.

James Hibbard Over a year ago

But you evidently can, otherwise the number in the span would not increase. If you are expecting to see the data attribute updated on the element, see here for why that won't work: stackoverflow.com/questions/4384784/jquery-data-storage/…

Oleg · Accepted Answer · 2014-01-07 12:55:36Z

2

Try this to get:

$(this).attr('data-id');

and this to set attribue:

$(this).attr('data-id', num);

answered Jan 7, 2014 at 12:55

Oleg

23.5k10 gold badges72 silver badges87 bronze badges

Comments

cocco · Accepted Answer · 2014-01-07 13:22:28Z

1

Standard Pure Javascript data-attr

try this

this.dataset['id']=num;

or

this.dataset.id=num;

http://jsfiddle.net/JU4H4/8/

EDIT based on the comments and also why i don't use jaquery

here is a partial function for data-attr taken from jquery's code.(i don't use jquery)

function dataAttr( elem, key, data ) {
        var name;

        // If nothing was found internally, try to fetch any
        // data from the HTML5 data-* attribute
        if ( data === undefined && elem.nodeType === 1 ) {
                name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase();
                data = elem.getAttribute( name );

                if ( typeof data === "string" ) {
                        try {
                                data = data === "true" ? true :
                                        data === "false" ? false :
                                        data === "null" ? null :
                                        // Only convert to a number if it doesn't change the string
                                        +data + "" === data ? +data :
                                        rbrace.test( data ) ? jQuery.parseJSON( data ) :
                                        data;
                        } catch( e ) {}

                        // Make sure we set the data so it isn't changed later
                        data_user.set( elem, key, data );
                } else {
                        data = undefined;
                }
        }
        return data;
}

edited Jan 7, 2014 at 13:22

answered Jan 7, 2014 at 12:48

cocco

16.8k7 gold badges65 silver badges77 bronze badges

12 Comments

Bergi Over a year ago

There is no dataset property on jQuery collections?

cocco Over a year ago

it's javascript. and it sets the data-attr

Bergi Over a year ago

Of course jQuery is JavaScript, but there is no dataset in jQuery. Did you mean developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset?

cocco Over a year ago

yeah is that different?

cocco Over a year ago

yeah jquery does not point to the real this with $(this)... i didn't know that. you know .. i don't use jquery.

|

Bergi · Accepted Answer · 2014-01-07 12:49:14Z

-1

Use the variable num, not the string 'num':

$(this).data('id', num);

Updated jsfiddle demo

answered Jan 7, 2014 at 12:49

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

3 Comments

Surjith S M Over a year ago

Sorry that was a Typo, Your fiddle is also not working. The data-id is not set to that element (Please see it by inspecting)

Bergi Over a year ago

@SurjithSM: Why would you need that? Of course you could simply use this.dataset.id = num; or $(this).attr("data-id", num) or $(this).prop("dataset").id = num, but why not use the internal datastore provided by jQuery that is working in all browsers?

Surjith S M Over a year ago

.prop("dataset") is also working.. But I will stick on to attr now

Collectives™ on Stack Overflow

Cannot set data-id to HTML element

5 Answers 5

1 Comment

4 Comments

Comments

12 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

4 Comments

Comments

12 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related