jQuery data() not working to write to HTML element?

Question

HTML:

<div class="modal">
  <div class="search">
    <input class="search-input" type="text" name="search" placeholder="Start typing to search">
  </div>
</div>
<p class="add-new-item" data-catid="1">Add New Item</p>

jQuery:

$(".add-new-item").click(function() {
  var catid = $(this).data("catid");
  $(".modal").show();
  $(".search-input").data("catid", catid);
});

The catid is being retrieved properly, but is not added to the input element. How come, and how do I solve this?

Because that's not how `.data()` works. You *can* add data, but you *read* it by calling data() again, not by looking at the html. — freedomn-m, Mar 02 '18 at 08:57
Possible duplicate of [Data attribute value updated by jquery is not visible in DOM](https://stackoverflow.com/questions/17667732/data-attribute-value-updated-by-jquery-is-not-visible-in-dom) and [jQuery data not visible in firebug](https://stackoverflow.com/questions/9893275/jquery-data-not-visible-in-firebug/) — caramba, Mar 02 '18 at 09:04

caramba · Accepted Answer · 2018-03-02T09:08:19.920

You need to use .attr() if you want the data to be visible in DOM.

Note: catid is not a "allowed" attribute. You should write data-catid read more about it here

$(".add-new-item").click(function() {
  var catid = $(this).data("catid");
  $(".modal").show();
  $(".search-input").attr("data-catid", catid);  // see changes in this line
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal">
  <div class="search">
    <input class="search-input" type="text" name="search" placeholder="Start typing to search">
  </div>
</div>
<p class="add-new-item" data-catid="1">Add New Item</p>

UPDATE .data() does work! But as the docs say: the value is just set to the element doesn't means it's visible in DOM.

$(".add-new-item").click(function() {
  var catid = $(this).data("catid");
  $(".modal").show();
  $(".search-input").data("catid", catid);
  
  // now "catid" is set to .search-input
  // it's just not visible in DOM 
  console.log('catId: ' + $(".search-input").data("catid"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal">
  <div class="search">
    <input class="search-input" type="text" name="search" placeholder="Start typing to search">
  </div>
</div>
<p class="add-new-item" data-catid="1">Add New Item</p>

Ok, that works, but jQuery docs specifically state to not mix up attr() and data(). Any clues as to why the data() method doesn't work? If I read the docs correctly, it should. — Pim, Mar 02 '18 at 08:57
It does work, but you're not understanding what it's actually doing. — freedomn-m, Mar 02 '18 at 08:58
Based on your other comment I think I now understand what it does. But it does seems very confusing that jQuery would retrieve data from HTML, but not write it to HTML. — Pim, Mar 02 '18 at 09:02
@Pim updated the answer. Hope it's is clear now. It does work. But it does not update the HTML. If you want to update the HTML use `.attr()` — caramba, Mar 02 '18 at 09:07

score 2 · Answer 2 · answered Mar 02 '18 at 09:04

is not added to the input element

Correct, that's not how .data() works. When use .data() to add data, it's stored internally within jquery, so you read it again via jquery, not by looking at the html or using vanilla javascript to read it.

The initial value will be read from any matching data- attributes, but after that it uses the internal value.

Example:

$(".add-new-item").click(function() {
  var catid = $(this).data("catid");
  $(".search-input").data("catid", catid);
});

$(".readdata").click(function() {
  console.log($(".search-input").data())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type='button' class="readdata">Read Data</button>
<button type='button' class="add-new-item" data-catid="1">Add Data</button>

<input class="search-input" type="text" name="search" placeholder="Start typing to search">

<button type='button' class="readdata">Read Data</button>

There's also a difference in that .data() will attempt to infer the data type for you (so you could get a number out) while .attr() will always be a string.

jQuery data() not working to write to HTML element?

2 Answers2