jquery data-attribute set not working

Question

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?

Answer 1

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> 

If you want to "see" your changes in the markup, you have to update the markup attribute using .attr("data-whatever", "new value"); .

Inspect the snippet below now.

 setInterval(function(){ var count = $("#test").attr("data-count"); console.log(count); count++; $("#test").attr("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> 

Note that there is an efficiency price on insisting to "see" the markup updating.

Answer 2

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> 

Answer 3

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 ie 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