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?

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. — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Aug 17, 2018 at 3:53
I'm using websocket iibrary to update the dom in real-time.. so it should be visible.. — Azima
– Azima, Commented Aug 17, 2018 at 3:56
well, it's working with attr('data-qty', data.order[key]); though.. — Azima
– Azima, Commented Aug 17, 2018 at 4:04

dysfunc · Accepted Answer · 2018-08-17 04:20:17Z

1

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>

answered Aug 17, 2018 at 4:20

dysfunc

2,0081 gold badge13 silver badges15 bronze badges

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

Comments

Louys Patrice Bessette · Accepted Answer · 2018-08-17 04:19:51Z

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.

Nikhil Thakur · Accepted Answer · 2018-08-17 05:12:53Z

1

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

edited Aug 17, 2018 at 5:12

answered Aug 17, 2018 at 4:24

Nikhil Thakur

3431 silver badge8 bronze badges

Collectives™ on Stack Overflow

jquery data-attribute set not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related