Czasami trzeba zapisać coś w strukturze DOM, a potem odczytać te dane ponownie. I ponownie zapisać i odczytać i jeszcze raz. Z pomocą przychodzi wtedy nieśmiertelne jQuery. Znajdujemy wtedy interesujący nas element $(element) a następnie przy pomocy metody .data(“…”) odczytujemy wartość, lub .data(“…”,”…..”) zapisujemy wartość. jQuery lubi te dane sobie zapisać w swoim cache. Może się więc okazać, że każdy kolejny odczyt wskazywać będzie zawsze tą wartość, którą odczytaliśmy za pierwszym razem. Co wtedy? Są dwa sposoby; kiedyś udało nam się rozwiązać ten problem korzystając z innej metody, ale też jQuery; mianowicie .attr(“data-….”) i symetrycznie .attr(“data-…”, “…”) do odpisu i zaczytu (literówki!). Czasem i to nie wystarcza i wtedy należy sięgnąć po wanilie i skorzystać z getAttribute(“data-…”) oraz setAttribute(“data-…”,”…”) – te ostatnie zawsze działają. Jeden jedyny minusiczek, to taki: że jest to wyłom w spójności kodu, tzn. jeśli wszędzie używamy jQuery, a gdzieś wanilii, to dla części może to kłuć w oczy.
//EDIT (05.03.2016)
Przygotowałem przykład dostępny w jsfiddle jak i w giscie. Wygląda na to, w zmęczeniu przegapiłem pewne zależności lub coś działało jeszcze inaczej. Mianowicie problem z odczytem pojawia się wtedy gdy zapiszemy do data przy pomocy setAttribute a odczytamy za pomocą $.data, lub zapiszemy $.attr i odczytamy $.data. W tych przypadkach dane nie zostaną odświeżone. Sami sprawdźcie. Podziękowania dla @jarekkoziol za bycie ciekawskim.
GIST:
| <!document html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-lg-6" id="outputPlain">Tutaj będzie widać wartość która ustawisz w data</div> | |
| <div class="col-lg-6" id="outputData">Do tego elementu będę wypisaywać wartość odczytaną z data</div> | |
| </div> | |
| <div class="row"> | |
| <input id="inputSource" type="text" name="textInput"/> | |
| </div> | |
| <div class="row"> | |
| <button id="writeData">Zapisz z jQuery data</button> | |
| <button id="writeAttr">Zapisz z jQuery attr</button> | |
| <button id="writeJS">Zapisz z setAttribute</button> | |
| <button id="readData">Czytaj z jQuery data</button> | |
| <button id="readAttr">Czytaj z jQuery attr</button> | |
| <button id="readJS">Czytaj z setAttribute</button> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| var onWriteDataClick=function(){ | |
| var text = $("#inputSource").val(); | |
| $("#outputPlain").text(text); | |
| $("#outputData").data("blog-example", text); | |
| }; | |
| var onWriteAttrClick=function(){ | |
| var text = $("#inputSource").val(); | |
| $("#outputPlain").text(text); | |
| $("#outputData").attr("data-blog-example", text); | |
| }; | |
| var onWriteJSClick=function(){ | |
| var text = $("#inputSource").val(); | |
| $("#outputPlain").text(text); | |
| document.getElementById("outputData").setAttribute("data-blog-example", text); | |
| }; | |
| var onReadDataClick=function(){ | |
| var text = $("#outputData").data("blog-example"); | |
| $("#outputData").text(text); | |
| }; | |
| var onReadAttrClick=function(){ | |
| var text = $("#outputData").attr("data-blog-example"); | |
| $("#outputData").text(text); | |
| }; | |
| var onReadJSClick=function(){ | |
| var text = document.getElementById("outputData").getAttribute("data-blog-example"); | |
| $("#outputData").text(text); | |
| }; | |
| $("#writeData").on("click", onWriteDataClick); | |
| $("#writeAttr").on("click", onWriteAttrClick); | |
| $("#writeJS").on("click", onWriteJSClick); | |
| $("#readData").on("click", onReadDataClick); | |
| $("#readAttr").on("click", onReadAttrClick); | |
| $("#readJS").on("click", onReadJSClick); | |
| </script> | |
| </body> | |
| </html> |
by JSFiddle:
https://jsfiddle.net/jstadnicki/ydtry0c9/
Ciekawy problem. Masz jakiś przykład w którym jquery zwracała zcachowaną wartość z .data(..)? Bytam bo jeszcze nie spotkałem się z takim problemem, a dobrze byłoby wiedzieć czego unikać.
Przygotuje i wrzucę linka, albo przykład.