Question

I have a select-box where a user can pick a value which populates a text-box and the user can edit the value (with Ajax).
Every option in the selectbox has an id and a data-critical attribute. I use the JQuery ‘change’ event handler to populate a textbox with the value in the data-critical.

<select id="actions">
  <option id="p0" data-critical="100"  value="0">Optie 0</option>
  <option id="p1" data-critical="120"  value="1">Optie 1</option>
</select>

<input type="text" id="editcritical" />

$("#actions").change(function() {
  var selected = $(this).find('option:selected');

  $("#editcritical").val(selected.data('critical'));
});

ajax-success: function(data){
  $("#p" + data.p.id).attr("data-critical", data.p.critical);
}

On Ajax success the data-critical value is changed, but when I select the option again, the old value is displayed in the text-box. I tried to use the Live method, but nothing happened. Firebug shows the updated value in data-critical.

Any suggestions to show the updated value in the text-box?

Answer 1

$("#actions").change(function() {
  var selected = $(this).find('option:selected');

  $("#editcritical").val(selected.attr('data-critical'));
});

Within you success function you should try:

success: function(data){
  $("#p" + data.p.id).data("critical", data.p.critical);
}

Read jQuery data() vs attr(data) to know more.