Accessing data attribute using jquery returns undefined?

Question

Inside my view i have a button as follow:

<button data-assigned-id="@IdUser" onclick="updateClick()" type="button" class="btn btn-sm btn-default"></button>

My div

<div id="partial_load_div">

</div>

Script

function updateClick() {
    var id = $(this).data('assigned-id');
    $('#partial_load_div').show();
    $('#partial_load_div').load('/Users/UpdatePartial?id=' + id);
}

The id is always shows as undefined, i checked and @IdUser has always value

then in chrome dev i got the error

GET http://localhost:19058/Users/UpdatePartial?id=undefined 400 (Bad Request)

Any idea how to fix this?

Delete onclick="updateClick()" and add a class name or id for use a a selector and then $('#mybutton').click( function) { var id = $(this).data('assigned-id'); .... — user3559349
– user3559349, Commented Apr 6, 2016 at 12:56
@StephenMuecke thanks for your comment, that works fine! could you add your comment into an answer so that i can mark it? — Maro
– Maro, Commented Apr 6, 2016 at 13:44

Liam · Accepted Answer · 2017-06-07 08:43:10Z

17

When reading data attributes using data() you need to remove the - and camel case the value. So you want:

var id = $(this).data('assignedId');

the docs on data() show this:

As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object. The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5 specification.

For example, given the following HTML:
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
All of the following jQuery code will work.
$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";
The second statement of the code above correctly refers to the data-last-value attribute of the element. In case no data is stored with the passed key, jQuery searches among the attributes of the element, converting a camel-cased string into a dashed string and then prepending data- to the result. So, the string lastValue is converted to data-last-value.

I didn't notice how your binding the click event. If you want to use $(this) you have to bind the event using jquery. So you need:

<button data-assigned-id="works" id="button">
clickme</button>

$(window).ready(function() {
     //bind the event using jquery not the onclick attribute of the button
     $('#button').on('click', updateClick);

});


function updateClick() {
    alert($(this).data('assignedId'));
}

Working fiddle

edited Jun 7, 2017 at 8:43

answered Apr 6, 2016 at 12:32

Liam

30k28 gold badges143 silver badges206 bronze badges

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

3 Comments

Maro Over a year ago

thanks for taking the time answering my question! I'm still getting the same error. i don't know why doesn't work

Liam Over a year ago

I didn't notice another issue you had @Maro. See update

Andrew Koster Over a year ago

They just strip the dashes and store the keys in all-lowercase. You have to use a case-insensitive lookup in order to get anything that you actually camel-cased in your HTML. Worst specification ever, but thanks for pointing it out, I never would have guessed.

user3559349 · Accepted Answer · 2016-04-06 23:57:01Z

12

In your current script, $(this) refers to the Window object (not your button) which does not have a data- attribute so its undefined.

You could solve this by passing the element to the function

<button data-assigned-id="@IdUser" onclick="updateClick(this)" type="button" ... ></button>

function updateClick(element) {
    var id = $(element).data('assigned-id');
    ....

However a better approach is to use Unobtrusive Javascript rather than polluting your markup with behavior.

<button data-assigned-id="@IdUser" id="mybutton" type="button" class="btn btn-sm btn-default"></button>

$('#mybutton').click(function() {
    var id = $(this).data('assigned-id'); // $(this) refers to the button
    ....
});

answered Apr 6, 2016 at 23:57

user3559349

6 Comments

Maro Over a year ago

Any idea how to fix Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience when i apply this script?

user3559349 Over a year ago

That error wont happen because of the code in my answer. My best guess is that your .load() is loading a partial view that has script tag in it (if so, remove it - partials should never have scripts)

Maro Over a year ago

I have the follwoing scripts in my partial <script src="~/Scripts/jquery.validate.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js"></script> and <script src="~/Scripts/jquery.validate.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js"></script> i think those are important for validation since my partial view is a form

user3559349 Over a year ago

You definitely need to remove those from your partial. Move them into the main view (or layout)

Maro Over a year ago

and my validation will still work? ok will give it a try thanks a lot

|

GMac · Accepted Answer · 2021-04-30 10:27:15Z

3

As far as my usage was concerned, even though the attribute was data-assignedId (Camel cased), when retrieving it you would have to use data('assignedid'). Using camel casing returned undefined.

answered Apr 30, 2021 at 10:27

GMac

312 bronze badges

Collectives™ on Stack Overflow

Accessing data attribute using jquery returns undefined?

3 Answers 3

3 Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related