jquery pass a data-attribute to a callback function

Question

Hey guys I have the following function where obj is a table row

calculate: function(obj) {     
  var sum = 0;   
  $('option:selected', obj).attr('value', function(i,v){
    sum += Number(v);
  });
  $('td:last', obj).text(sum);
  HoursSum.table.trigger('sumChanged', sum);
}

At this point it is correctly retrieving the value attribute. My question is: How can I access a data attribute of the same selected option? I have tried:

 ('option:selected', obj).data('duration', ....
.data('data-duration')
.attr('duration')

However none of them seem to work. The jQuery documentation says that data() should do the trick but in this case for some reason it doesn't. Any ideas?

Example HTML

<td class='col-sm-1' style='background-color:pink'>
  <select id='22505.30' class='form-control-sm' style='font-size: 11px;' name='shifts' onchange="submitEntry(this.value,this.id, 22505, '30.06.2018')">
    <option value='0'>Select</option>
    <option data-duration='10.60' data-shiftstart='21:00' data-shiftend='06:00' value='120'>test</option>
    <option data-duration='1.00' data-shiftstart='12:00' data-shiftend='13:00' value='118'>test1</option>
  </select>
</td>

Use $('option:selected', obj).data('duration'). You need to remove the data- prefix when using data() and add it when using attr(); your logic there is backwards. Voting to close as a typo — Rory McCrossan
– Rory McCrossan, Commented Jun 21, 2018 at 8:57
Deja vu... please share your HTML. Are you populating your options via AJAX by any chance? — DarthJDG
– DarthJDG, Commented Jun 21, 2018 at 8:58
Don't you mean calculate: function(obj) { var sum = 0; $('option:selected', obj).each(function() { sum += Number(this.value); }); $('td:last', obj).text(sum); HoursSum.table.trigger('sumChanged', sum); } — mplungjan
– mplungjan, Commented Jun 21, 2018 at 9:00
The options are loaded via php at page load from a database. HTML: <td class='col-sm-1' style='background-color:pink'> <select id='22505.30' class='form-control-sm' style='font-size: 11px;' name='shifts' onchange="submitEntry(this.value,this.id, 22505, '30.06.2018')"> <option value='0'>Select</option> <option data-duration='10.60' data-shiftstart='21:00' data-shiftend='06:00' value='120' >test</option> <option data-duration='1.00' data-shiftstart='12:00' data-shiftend='13:00' value='118' >test1</option> </select> </td> — Kaloyan Dimov
– Kaloyan Dimov, Commented Jun 21, 2018 at 9:12

Inus Saha · Accepted Answer · 2018-06-21 09:08:27Z

1

You can try the following code. but we need to see your HTML to help you with better code.

calculate: function(obj) {     
  var sum = 0;   
  $('option:selected', obj).each(function(){
    var data = $(this).data();
    sum += data.duration;
  });
  $('td:last', obj).text(sum);
  HoursSum.table.trigger('sumChanged', sum);
}

answered Jun 21, 2018 at 9:08

Inus Saha

1,93813 silver badges18 bronze badges

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

2 Comments

Kaloyan Dimov Over a year ago

This returns undefined for data.duration

Kaloyan Dimov Over a year ago

Nevermind - error was on my side. This works. It correctly gets the values. Thank you!

Collectives™ on Stack Overflow

jquery pass a data-attribute to a callback function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related