data attribute not updated before page refresh with jQuery

Question

In my project I have a table, each of its rows holding id and title as data attributes

<tr data-id="1" data-title="title"><td id="td_title">some text</td></tr>

I use jQuery to update the data-tile attribute

$newTitle = 'newTitle';
$row_to_update = $("tr").find("[data-id='1']");
$row_to_update.attr('data-title', newTitle );

So after that, in the html I can see the updated values, but if I try this:

$var = $row_to_update.data('title');
alert($var);

It returns the old title, unless I load the page again. I suppose I have to clear the cache, but I only found $.domCache, which is not applicable to jQuery and also saw and tried

function clearjQueryCache(){
    for (var x in jQuery.cache){
        delete jQuery.cache[x];
    }
}

but obviously not correct, as everything stopped working

Mohamed-Yousef · Accepted Answer · 2017-06-07T23:51:13.870

1

.find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.

ًWith $("tr").find("[data-id='1']"); tr doesn't have element with [data-id='1'] to find it .. So no need to use .find()

$newTitle = 'newTitle';
$row_to_update = $("tr[data-id='1']");
$row_to_update.data('title', $newTitle );
//then
$var = $row_to_update.data('title');
alert($var);  // the output should be newTitle

Working demo

$(document).ready(function(){
  $newTitle = 'newTitle';
  $row_to_update = $("tr[data-id='1']");
  $row_to_update.data('title', $newTitle );
  //then
  $var = $row_to_update.data('title');
  alert($var);  // the output should be newTitle
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr data-id="1" data-title="title"><td id="td_title">some text</td></tr>
<tr data-id="2" data-title="title"><td id="td_title">some text</td></tr>
</table>

edited Jun 07 '17 at 23:51

answered Jun 06 '17 at 17:24

Mohamed-Yousef

23,946
3
19
28

Thank you, although I can clearly see your code is working, even if I use $("tr[data-id='1']") for me the alert() still shows the old value. – Dimentica Jun 06 '17 at 17:50
@Dimentica did you change `.attr('data-title', newTitle );` with `.attr('data-title', $newTitle );` .. And CTRL+F5 will refresh your website – Mohamed-Yousef Jun 06 '17 at 17:52
Yes, I did, I can see in the html the title is changed, but the alert message thinks else – Dimentica Jun 06 '17 at 17:55
@Dimentica if you can see the `data-title` updated .. you should get the alert .. Please keep eyes on console for errors – Mohamed-Yousef Jun 06 '17 at 18:03
So! I changed it not to $row_to_update.attr('data-title', $newTitle ); but to $row_to_update.data('title', $newTitle ); it is ok now. Thank you! – Dimentica Jun 06 '17 at 18:16
@Dimentica both should work as it shown on a demo .. but anyway if `data()` works for you its ok .. Have a great day :-) – Mohamed-Yousef Jun 06 '17 at 18:22
I really do not know why the one works and the other does, still, you were of great help! Have a nice day too :) – Dimentica Jun 06 '17 at 18:23
1

@Dimentica can you please return the code back and instead of `$var = $row_to_update.data('title');` use `$var = $row_to_update.attr('data-title');` and let me know what you'll get .. Actually [This answer](https://stackoverflow.com/a/8708345/3385827) let me thinking about *don't intermix .data and .attr() calls. Use one or the other.* – Mohamed-Yousef Jun 06 '17 at 18:29

score 0 · Answer 2 · answered Jun 06 '17 at 18:52

0

Rather than .data('title'), you can use .attr('data-title'). This may work.

answered Jun 06 '17 at 18:52

Kishor Malakar

81
1
6

data attribute not updated before page refresh with jQuery

2 Answers2