Could someone explain why this isn't working?

What I'm trying to do is update a data attribute called 'section_id' in a dropped element with the new section it has been dropped into. I check this data attribute when dropping so that they aren't able to drop it into the section it's already in. So naturally, if they drop it in a new section, I want that section id updated.

I have a div like so:

<div class="draggable" data-section_id="413">...</div>

I'm tracking what the value is doing like so:

alert(newTaskRow.find('.draggable').data('section_id')); //returns 413
newTaskRow.find('.draggable').data('section_id','999');
alert(newTaskRow.find('.draggable').data('section_id')); //returns 999
alert(newTaskRow.find('.draggable').html()); 

But the HTML still shows:

<div class="draggable" data-section_id="413">...</div>

Why isn't the value being updated in the HTML? And how would I do that?

Could someone explain why this isn't working?

What I'm trying to do is update a data attribute called 'section_id' in a dropped element with the new section it has been dropped into. I check this data attribute when dropping so that they aren't able to drop it into the section it's already in. So naturally, if they drop it in a new section, I want that section id updated.

I have a div like so:

<div class="draggable" data-section_id="413">...</div>

I'm tracking what the value is doing like so:

alert(newTaskRow.find('.draggable').data('section_id')); //returns 413
newTaskRow.find('.draggable').data('section_id','999');
alert(newTaskRow.find('.draggable').data('section_id')); //returns 999
alert(newTaskRow.find('.draggable').html()); 

But the HTML still shows:

<div class="draggable" data-section_id="413">...</div>

Why isn't the value being updated in the HTML? And how would I do that?

• javascript
• jquery

• See stackoverflow./questions/5507718/… and stackoverflow./questions/6827810/… – Andrew Whitaker Commented Apr 4, 2014 at 16:26

1 Answer 1

jQuery's data() does not update the attributes, it sets an internal data object, but uses the data attribute as the default value only

If for some reason you have to update the HTML5 data attribute, use attr()

.attr('data-section_id','999')