jquery data-attribute set not working

html data attribute jquery
jquery update data attribute
jquery get element by data attribute
jquery find by data attribute name
jquery add data attribute
jquery data selector
javascript get data attribute
jquery attr

I'm trying to find a 'tr' element with matching data-title value and set data-qty value for that element.

Here's what I tried to do:

var menu_type = data.type;

switch (menu_type) {
  case 'breakfast':
    var menu_selector = '#breakfast-form';
    break;
  case 'snacks':
    var menu_selector = '#snacks-form';
    break;
  default:
    var menu_selector = '#breakfast-form';
}

for (var key in data.order) {
  if (data.order.hasOwnProperty(key)) {
    var find_row = $(menu_selector).find('tr[data-title="' + key + '"]').data('qty', data.order[key]);
  }
}
console.log(data);

data.order is an array object with {Coffee: "1"}.

And here's my <tr> html:

<div id="breakfast-form">
  <table class="orderTable">
    <tbody>
      <tr data-qty="9" data-title="Coffee">
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

Where am I going wrong?

I think this is what you're looking for. You need to use .attr vs .data if you want to assign a data attribute to an element.

var selectors = {
  breakfast: '#breakfast-form',
  snacks: '#snacks-form'
};

function test(data) {
  var menuType = data.type,
      cssSelector = selectors[menuType || selectors.breakfast],
      menu = $(cssSelector);

  for(var key in data.order){
    menu.find('tr[data-title="' + key + '"]').attr('data-qty', data.order[key]);
  }  
}

test({
  type: 'breakfast',
  order: {
    Coffee: "1"
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="breakfast-form">
  <table class="orderTable">
    <tbody>
      <tr data-qty="9" data-title="Coffee">
        <td>test</td>
      </tr>
    </tbody>
  </table>
</div>

jQuery .data() does not work, but .attr() does, I ran into a similar "bug" a few days ago when working with .data() and .attr('data-​name') for HTML5 data attributes. The behavior you're  The value of the option is subject to jQuery's parsing rules for HTML5 data attributes. Due to a jQuery bug, nested options using data-* attributes do not work in jQuery 1.x. camelCase options. HTML data attributes are case-insensitive, so any options which contain capital letters will be parsed as if they were all lowercase.

There is a difference between the data attribute and the data properties.

The HTML markup attribute is used to set the DOM element properties on parse. And the .data() method accesses the property directly.

From the documentation: «The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated »

Run the snippet below and inspect the markup.

setInterval(function(){
  
  var count = $("#test").data("count");
  console.log(count);
  
  count++;
  $("#test").data("count",count);
  
},1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" data-count="0">Test div</div>

data() attribute not updating, To keep things simple, I have tried changing the data attribute value of the It might be getting set but just not updating the values shown in the inspector. That's where my problem is, I was expecting it to update int he DOM  Don't get this confused with jQuery's .data() method. Although there is some overlap in how data attributes and .data() work, they're two totally different things. If you're not familiar with it, just stick with .attr(). Using the dataset API. HTML5 actually has an API just for working with this type of data.

Since you mentioned that data.order is an array of object with {Coffee: "1"}, here the key in for-loop will return the index of the array i.e. 0,1,2...

To fix that, you can do something like this:

for(var index in data.order) {
   key =  Object.keys(data.order[index])[0];
   value =  Object.values(data.order[index])[0];
   if(data.order.hasOwnProperty(index)){
      var find_row = $(menu_selector).find('tr[data-title="'+key+'"]').attr('data-qty', value);
   }                   
}

Also you were using .data instead of .attr

.data(), Using the data() method to update data does not affect attributes in the DOM. To set a data-* attribute value, use attr . Prior to jQuery 1.4.3, .data( obj ) completely  Working with the HTML5 Data Attributes Using jQuery jQuery support for the new HTML5 data attributes may not be everything a developer could want -- but it's very close. And, more important, it's the perfect solution for handling transactional data.

(In)correct usage of .data() to set data attributes should be clarified in , Referring to the simpler data function (http://api.jquery.com/data/) The the fact that the function to set does not work like the function to get. I believe what you confirmed in this thread is that the HTML notation should work without any JS; just importing the 'jquery.mask.min' file is enough. That doesn't work for me. I have my file loaded at the end as you've suggested. However, when using the HTML notation, nothing happens. I'm unable to set a mask on any kind of element.

When is better to use .data() or .attr()? (Example), A protip by bontojr about dom, data, jquery, html, javascript, attribute, and attr. '​data-' to work, for example, if I want to pass a data attribute named foo with bar as As explained before, calling .data() to set something will not  If you put a breakpoint on the statement that changes the data attribute and then look at the DOM Explorer, you can see that the data property has not been set to the PDF, and then if you step over that statement and look at the DOM again, you can see that the property has been updated.

How to set values to custom attributes in Jquery, How if i am adding a jquery returned value. var val = $(“.id1”).find('td').val();. $('​input[type=”text”]').attr('data-parentID', val);. This statement is not working. DataTables is a powerful jQuery plugin for creating table listings and adding interactions to them. It provides searching, sorting and pagination without any configuration. In this article we’ll go through the basics of DataTable and how to use some of the advanced features.

Comments
  • I can see data-qty="9" , what's not working?
  • i want to update the value, say from 9 to 1.
  • The updated value will not be visible when you inspect the element. But if you log that data then you'll see the updated data.
  • I'm using websocket iibrary to update the dom in real-time.. so it should be visible..
  • well, it's working with attr('data-qty', data.order[key]); though..