Data attributes don't update when button is clicked a second time

Question

I have some data attributes set to equal nothing when the page loads. Once a user selects an item from a list item it then populates the data attributes. I want to perform a simple validation that says if one of those attributes is empty then alert an error otherwise carry on.

If I press the button with nothing in the field, I get the error which is fine. But if I then select something I can see in console that the button now has values in the data attributes but I still get the validation error. The same is true if I do the opposite. If I select an item then it passes validation. If I clear the field it should fail validation but it still fails. It seems that the second time around it is still using data from the first click.

$('body').on('click', '#checkout', function(e) {
    e.preventDefault();

    var user_email = $(this).data('newemail');
    var uid = $(this).data('newid');
    var first_name = $(this).data('namename');

    if(uid !== '') {


        //make ajax call


    } else {

        alert('No values');
    }

});

I am setting the data attributes like this when a list item is clicked on:

$( '#checkoutAsCustomer' ).attr('data-newid', uid);
$( '#checkoutAsCustomer' ).attr('data-newemail', user_email);
$( '#checkoutAsCustomer' ).attr('data-newname', first_name);

How are you setting the "data attributes"? How are you checking the value of the "data attributes"? Note that if you have ` — freedomn-m, Jul 31 '18 at 08:28
Duplicate of: https://stackoverflow.com/a/6828180/2181514 (and likely many others, that was first in search and has lots of votes) — freedomn-m, Jul 31 '18 at 08:36
In summary: Use `.data()`: `$('#checkoutAsCustomer').data('newid', uid);` — freedomn-m, Jul 31 '18 at 08:37
Sorry it was a duplicate and sorry I couldn't find something similar to my problem which is why I posted. I also tried your answer before you deleted it and it worked nicely. Thank you. — user8463989, Jul 31 '18 at 08:37
No worries - sometimes it's a case of using the correct keywords to find the duplicate. This is a fairly common learning-issue for `data-`. I deleted my answer as people frequently downvote answers on duplicates. — freedomn-m, Jul 31 '18 at 08:38

score 1 · Answer 1 · answered Jul 31 '18 at 08:36

Don't mix attributes and data attributes when getting and setting. You should read and write them with the jQuery .data() method, or you'll get inconsistent results.

For example...

var $div1 = $("#div1");
var $div2 = $("#div2");

console.log("before...");
console.log($div1.data("myattr"));
console.log($div2.data("myattr"));

$div1.attr("data-myattr", "Goodbye");
$div2.data("myattr", "Goodbye");

console.log("after...");
console.log($div1.data("myattr"));
console.log($div2.data("myattr"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1" data-myattr="Hello"></div>
<div id="div2" data-myattr="Hello"></div>

So, your code should be setting the data attributes like this...

$('#checkoutAsCustomer').data('newid', uid);
$('#checkoutAsCustomer').data('newemail', user_email);
$('#checkoutAsCustomer').data('newname', first_name);

score 0 · Accepted Answer · answered Jul 31 '18 at 08:35

To set and read .data- attributes, you need to use the .data() method rather than .attr(). You also drop the data- prefix:

$('#checkoutAsCustomer').data('newid', uid);
$('#checkoutAsCustomer').data('newemail', user_email);
$('#checkoutAsCustomer').data('newname', first_name);

jquery keeps data values in a local storage, not against the data-attr attribute on the element.

When you first use .data(newid) to read the value, it will indeed use the data-newid= attribute (if there is one), but after that it will use the internal store.

Data attributes don't update when button is clicked a second time

2 Answers2