data attribute changed but not applied

Question

I have a span with a data attribute like this:

<span class="delete" data-action="enable" title="Non usare più questa anagrafica" data-toggle="tooltip" data-placement="top" >

On click on the span I seek for the data-action attribute to perform my actions on the backend and it works fine:

$('.delete').click(function(e){
    e.preventDefault();
    var clicked = $(this);
    var toggle = $(this).children('i');
    var id = $(this).closest('div').data('value');
    var action = $(this).data('action');

If everything is ok I want to change the data-action to "disable" because this span is acting as an on/off button so I do:

if(action=='enable'){
    toggle.removeClass('fa-toggle-off text-red').addClass('fa-toggle-on text-green');
    toggle.parent('span').data('action','disable');
    toggle.parent('span').attr('data-original-title','Non usare più questa anagrafica');
}else{
    toggle.removeClass('fa-toggle-on text-green').addClass('fa-toggle-off text-red');
    toggle.parent('span').attr('data-action','enable');
    toggle.parent('span').attr('data-original-title','Riattiva questa anagrafica');
}

and if I inspect the element on the page I see that the data-action has been updated correctly.

The issue is that if I click on the button again console.log(action) will still return the original data-action value instead of the updated one (even if inspecting the element I see the updated one). What am I missing here? Action is re-set each time on click of the button so I don't expect it to be still the value from the previous iteration... also if I have a button already with action "disable" on page load my code works fine. Any hint?

Specifically this answer: https://stackoverflow.com/a/45149219/2181514 — freedomn-m, Jan 07 '21 at 12:24
@freedomn-m actually my question can be closed as a typo... it was caused by a attr used instead of data in one single occursion of my code. So I'm voting to close it for that reason (not to delete it after the effort spent for solving) . Thanks — Lelio Faieta, Jan 07 '21 at 13:43

Rory McCrossan · Accepted Answer · 2021-01-07T10:34:01.257

2

You're updating and reading the data attribute using both attr() and data(). You have to use one or the other, not both, as they affect the data attributes in different locations. attr() updates the DOM directly, whereas data() updates an in-memory object.

I would suggest using data() only:

toggle.toggleClass('fa-toggle-off text-red fa-toggle-on text-green');

if (action == 'enable') {
  toggle.parent('span').data({
      'action': 'disable',
      'original-title': 'Non usare più questa anagrafica'
    });
} else {
  toggle.parent('span').data({
    'action': 'enable',
    'original-title': 'Riattiva questa anagrafica'
  });
}

edited Jan 07 '21 at 10:34

answered Jan 07 '21 at 10:30

Rory McCrossan

331,213
40
305
339

yes for the attr and data mix. but for the original-title attribute I need to use attr to make it working so I cannot collapse the code as you suggest (and as I'd have done too) – Lelio Faieta Jan 07 '21 at 10:33
Where is `data-original-title` read from? It would be better to change it to use `data()` as well, if possible. – Rory McCrossan Jan 07 '21 at 10:34
it is dinamicallyset by tooltip.js on page rendering so i have little control over it – Lelio Faieta Jan 07 '21 at 10:35
In that case you may need to leave the `original-title` to be get/set using `attr()` (although I would suggest finding a better library that does not force that restriction). The answer above will fix your problem with `data-action`, though. – Rory McCrossan Jan 07 '21 at 10:36

data attribute changed but not applied

1 Answers1