JQuery Only Shows First Value

Question

I have function in my JQuery that will fill value in #product_detail with data-name=value, for first time it was success when i tried for second time, it only show first value even when i inspect elemen in data-name is second value.

Here's my HTML code:

// here's my button that to alert
function fillspan(productname) {
  $("#product_detail").attr("data-name", productname);
}

//the problem
function showitems() {
  var name = $("#product_detail").data("name");
  alert(name);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select onchange="fillspan(this.value)">
  <option value="value1">Value1</option>
  <option value="value2">Value2</option>
</select>

<span id="product_detail"></span>

<button onclick="showitems()">Click</button>

your id is not the same in html than the call in jquery (one of them) — David, May 18 '17 at 14:24
if you are setting a data attribute, then use `data("name", productname)`, not attr - http://stackoverflow.com/questions/9444679/jquery-data-vs-attrdata. Atrtibute only updates the attribute on the html, it does not update the actual data value — Pete, May 18 '17 at 14:27
Possible duplicate of [Can't update data-attribute value](http://stackoverflow.com/questions/17762906/cant-update-data-attribute-value) — Pete, May 18 '17 at 14:32

Alix Eisenhardt · Answer 1 · 2017-05-18T14:31:22.657

0

To get the data-name of '#product_details' you can use $("#detail_product").attr("data-name");

edited May 18 '17 at 14:31

answered May 18 '17 at 14:26

Alix Eisenhardt

313
2
10

Please do not comment in answer section. Yes I understand you do not have enough reps to add comment, but I'd request you to wait for not and if you really want to answer, please answer it in a manner that it justifies term *answer*. – Rajesh May 18 '17 at 14:28

Mohamed-Yousef · Accepted Answer · 2017-05-18T14:50:39.907

If I got your point you can use this code .. use change event instead of onchange attribute and change $("#product_detail").attr("data-name", productname); to $("#product_detail").data("name", productname);

Note: onchange="fillspan(this.value)" will work as well instead of change event but it won't give you a chance to update the data attribute onload (I didn't tried it before so this is my personal information about it)

$(document).ready(function(){
    $('select').on('change' , function(){
        var get_Value = $(this).val();
        fillspan(get_Value);
    }).change();  // by adding .change() here this will make the change event run onload .. if no need to run it onload you can remove it
});


// here's my button that to alert
function fillspan(productname) {
  $("#product_detail").data("name", productname);
}

//the problem
function showitems() {
  var name = $("#product_detail").data("name");
  alert(name);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select>
  <option value="value1">Value1</option>
  <option value="value2">Value2</option>
</select>

<span id="product_detail"></span>

<button onclick="showitems()">Click</button>

JQuery Only Shows First Value

2 Answers2