Why jquery .data() method does not fetch updated value?

Question

I implement sort of FilePanels with folders and subfolders.

Visually from Chrome Developer Tools I can see that ui.item.sortable.droptarget has data attribute of parent-folder-id == 2, but when I try to access it in code (via jquery data method) it returns 10 (value of another folder's parent where I was recently). Why it does not get updated? When I move to another folder - new value to vm.parentId is assigned based on server's value of that folder. DOM is updated correctly...

<ul ui-sortable="vm.sortableOptions"
        ng-model="vm.cache.items"
        data-parent-folder-id="{{vm.parentId}}">

Added later: Even if I update .data() getter to ui.item.sortable.droptarget.data("parentFolderId") it still returns 10

Update 2: Added plunker demo: http://plnkr.co/edit/14XfBOTFuJZ0oSy2ozqh?p=preview

<html ng-app="plunker">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div class="xxx" data-parent="{{parentId}}"></div>
    <button ng-click="getParentId()">Get Parent Id</button>
    <br>
    <button ng-click="setParentId(15)">Set Parent Id to 15</button>
    <br>
    <button ng-click="getParentId()">Get Parent Id</button>
    <br>
    {{parentId}}
  </body>

</html>

app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $element) {

  activate();

  function activate() {
    $scope.parentId = 10;
  }

  $scope.setParentId = function(number) {
    $scope.parentId = number;
  }

  $scope.getParentId = function() {
    $scope.parentId = $($element).find('.xxx').data('parent');
  }

});

When you click buttons in this sequence: Set - Get - data value succesfully updates. But when you click in another sequence: Get - Set - Get - the same problem appears as in my previous code - after value was updated with new value when getting it - an old value returns.

possible duplicate of [jquery get HTML 5 Data Attributes with hyphens and Case Sensitivity](http://stackoverflow.com/questions/22753629/jquery-get-html-5-data-attributes-with-hyphens-and-case-sensitivity) — vaso123, Sep 25 '15 at 13:03
We have no idea how you produce that...not enough code shown. Create a demo that replicates problem — charlietfl, Sep 25 '15 at 13:22
ok, cool - I will try to reproduce a problem in isolated example — yaru, Sep 25 '15 at 13:31

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

Here's solution, inspired by this SO question: get wrong value in data attribute jquery

ui.item.sortable.droptarget.attr("data-parent-folder-id")

Basically what nasty jQuery does - it caches data value and then just returns old one... So a solution is to not use data method at all :)

It's a documented behaviour of .data(): http://api.jquery.com/data/#data-html5

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

score 0 · Answer 2 · answered Sep 25 '15 at 15:08

In angularJs you don't really need to do all the jQuery stuff as the model is bound to the html element instantly.

Actually, with angularJs you don't even need jQuery at all.

You don't have to get the value of the property with getParentId as it is already shown in your {{parentId}}.

The property is scoped and lives in your controller MainCtrl.

To understand how the binding system really works you can play with this plunker.

As you can see, changing the value in the textbox changes the value of your {{parentId}} because of the data binding.

this is achieved using ng-model="parentId"

I know, angular magic binding is cool and all, but in my situation getting a `parentId` from `data` attribute will save me a week or two of refactoring a codebase. I would be glad to receive a parentId from model - but at a time of calling - I don't have it (I am operating inside third-party JS library) — yaru, Sep 25 '15 at 15:17

Why jquery .data() method does not fetch updated value?

2 Answers2