How to update the value of data attribute using jquery

Question

I have the following bootstrap data toggle markup and I want to change the icon and the text to change on toggle. I can get the text to change but not the icon. What I'm I doing wrong?

 <div id="collapseDiv" >
    <dl>
      <dt>...</dt>
      <dd>...</dd>
    </dl> 
 </div>

 <a href="#collapseDiv" data-toggle="collapse" class="icon-before" data-icon="&#xf196">Show More</a>

Jquery code is as follows

 $('#collapseDiv').on('shown.bs.collapse', function () {
   $('.icon-before').data('icon', '&#xf147').text('Show Less');
 });

$('#collapseDiv').on('hidden.bs.collapse', function () {
    $('.icon-before').data('icon', '&#xf196').text('Show More');
});

http://stackoverflow.com/questions/12627864/change-data-icon-on-click-with-jquery-mobile see this — Manashvi Birla, Jun 16 '15 at 08:36
The `.data` method doesn't actually change attributes when storing data on an element (although it does read them for default values). Try using `.attr('data-icon', '')` instead? — James Thorpe, Jun 16 '15 at 08:36

score 1 · Answer 1 · edited May 23 '17 at 12:30

1

Try using attr()

attr('data-icon', '&#xf147')

Also check this excellent answer

EXPLANATION

Check the following example.

If you click on span#one the attribute changes with attr() function, if you click on span#two we will try to change the attribute with data() function.

When you try to select the element with [data-test="false"] only the first element has changes it's data attribute.

Only the element with data-test="false" will get red:

$(document).on('click', 'span', function() {
  var that = $(this);
  var id = that.attr('id');
  if (id == 'one') {
    //Try with attr()
    that.attr('data-test', 'false');
  } else if (id == 'two') {
    //Try with data()
    that.data('test', 'false');
  }
  $('[data-test="false"]').css({'color':'red'});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="one" data-test="true">one</span>
<span id="two" data-test="true">two</span>

edited May 23 '17 at 12:30

Community

1
1

answered Jun 16 '15 at 08:37

kapantzak

11,610
4
39
61

`data` does the same thing – Tushar Jun 16 '15 at 08:37
No, data just stores arbitary data to a specific element – kapantzak Jun 16 '15 at 08:38
2

data does not change attribute – Liem Do Jun 16 '15 at 08:40
And if you use `attr('data-test', newval)` and not `data('test', newval)` then if you later use `data('test')` it will give the **old** value. So it entirely depends on how you're using it later. – freedomn-m Jun 16 '15 at 09:00

score 0 · Accepted Answer · answered Jun 16 '15 at 08:36

0

You should update the attribute value, rather than updating data property:

$('#collapseDiv').on('shown.bs.collapse', function () {
 $('.icon-before').attr('data-icon', '&#xf147').text('Show Less');
});

$('#collapseDiv').on('hidden.bs.collapse', function () {
 $('.icon-before').attr('data-icon', '&#xf196').text('Show More');
});

answered Jun 16 '15 at 08:36

Milind Anantwar

81,290
25
94
125

`data` also do the same thing – Tushar Jun 16 '15 at 08:37
1

@Tushar No - `.data()` doesn't change attributes – James Thorpe Jun 16 '15 at 08:37
1

@Tushar: It does not. data modifies the property and not attribute value, – Milind Anantwar Jun 16 '15 at 08:38
1

@JamesThorpe Yes it does `data('icon', 'newVal')` updates the value – Tushar Jun 16 '15 at 08:38
2

It _does not change the attribute_, it uses some internal data storage mechanism. It _does_ read the attribute for a default value, but it will never update it. – James Thorpe Jun 16 '15 at 08:38

score 0 · Answer 3 · answered Jun 16 '15 at 08:47

You should also update class of .ui-icon inside.

var oldIcon = $('.icon-before').data('icon'),
    newIcon = '&#xf147';
    uiIcon = $('.icon-before').data('icon', newIcon).find('.ui-icon');
uiIcon.removeClass('ui-icon-' + oldIcon).addClass('ui-icon-' + newIcon);

How to update the value of data attribute using jquery

3 Answers3