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 — vaso123
– vaso123, Commented Sep 25, 2015 at 13:03
We have no idea how you produce that...not enough code shown. Create a demo that replicates problem — charlietfl
– charlietfl, Commented Sep 25, 2015 at 13:22
ok, cool - I will try to reproduce a problem in isolated example — yaru
– yaru, Commented Sep 25, 2015 at 13:31

Community · Accepted Answer · 2017-05-23 12:03:50Z

1

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).

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Sep 25, 2015 at 15:27

yaru

1,3201 gold badge13 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

LeftyX · Accepted Answer · 2015-09-25 15:08:51Z

0

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"

answered Sep 25, 2015 at 15:08

LeftyX

35.6k21 gold badges140 silver badges201 bronze badges

1 Comment

yaru Over a year ago

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)

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related