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'); ....` — , Apr 06 '16 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, Apr 06 '16 at 13:44

Liam · Answer 1 · 2017-06-07T08:43:10.250

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

thanks for taking the time answering my question! I'm still getting the same error. i don't know why doesn't work — Maro, Apr 06 '16 at 12:49
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. — Andrew Koster, Aug 19 '19 at 23:24

score 10 · Accepted Answer · answered Apr 06 '16 at 23:57

10

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 06 '16 at 23:57

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? – Maro Apr 09 '16 at 00:18
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) – Apr 09 '16 at 00:27
I have the follwoing scripts in my partial ** ** and ** ** i think those are important for validation since my partial view is a form – Maro Apr 09 '16 at 00:33
You definitely need to remove those from your partial. Move them into the main view (or layout) – Apr 09 '16 at 00:34
and my validation will still work? ok will give it a try thanks a lot – Maro Apr 09 '16 at 00:35
And because you dynamically loading content that contains a form that you want to validate, you need to reparse the validator in the success callback of the `.load()` event. Refer [this answer](http://stackoverflow.com/questions/31768946/required-field-validations-not-working-in-jquery-popup-mvc-4/31769058#31769058) – Apr 09 '16 at 00:35

score 3 · Answer 3 · answered Apr 30 '21 at 10:27

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 '21 at 10:27

GMac

31
2

Accessing data attribute using jquery returns undefined?

3 Answers3

Linked