How X-editable in-place editing plugin stores values?

Question

I am trying to understand How X-editable stores the values.

1. For example I have the following code:

   HTML:

   <a class="editable" data-type="select" data-value="1">value-1</a>
   

   JavaScript:

   $.fn.editable.defaults.mode = 'inline';
   
   $('.editable').html('value-2');
   $('.editable').data('value',2);
   
   $('.editable').editable({
       source: function () {
           return [
               { value: 1, text: "value-1" },
               { value: 2, text: "value-2" },
               { value: 3, text: "value-3" }
           ];
       }
   });
   

   And here is the jsfiddle to play with

   As you can see it works just fine. At the first step I declare the value of dropdown equal to "value-1" and then I change it to "value-2" in JavaScript. As the result you can "value-2" on the page and "value-2" after clicking to dropdown the same value will be chosen.

2. At this step I will modify JavaScript a bit as below:

   //$('.editable').html('value-2');
   $('.editable').data('value',2); 
   

   Again the results are quite expectable. You will see "value-1" on the page, but "value-2" will be selected when opening dropdown.

3. Now lets change the JavaScript code in the opposite way

   $('.editable').html('value-2');
   //$('.editable').data('value',2); 
   

   After such modifications the value on the page will be equal to "value-2", but selected value in dropdown when starting to edit will be "value-1". So also quite logical behavior.

Question:

What is not expected for me is that saving the changes by clicking 'ok' button of editable control does not change data-value attribute, it only change the displayed text. For example, if we update the value to "value-3" and click on 'OK' the data-value attribute will be still equal to 1. So how does the plugin choose the proper value inside the dropdown after opening it again?

UPD:

The most proper way to change the value of editable from the code is to use

$('.editable').editable('setValue', 'value-1');

Yeld

Answer 1

HTML's data-* attributes and jQuery's data() method aren't the same thing. jQuery documents how it handles HTML data-* attributes through it's data() method in the data() method page's HTML5 data-* Attributes sub-section:

As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object.

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

This means that any HTML data-* attribute is initially pulled by jQuery the first time that property is accessed, but after that it is no longer used.

If we reproduce your steps, we will clearly see that despite changing the value to value-3, the data-value attribute in your markup will remain the same:

<a class="editable" data-type="select" data-value="1">value-3</a>

However, jQuery's internal data() method will have stored the value change. We can see this by pulling the 'value' property from your element's data():

$('.editable').data('value');
> 3

If you want to change the data-value attribute to reflect this change, we can do this ourselves by modifying the property using jQuery's attr() method:

$('.editable').attr('data-value', 3);

Our markup will now look like this:

<a class="editable" data-type="select" data-value="3">value-3</a>

Do note though that if you try to set the value using the attr() method alone, this change will not be reflected within jQuery's data() object for that element:

<a class="editable" data-type="select" data-value="1">value-1</a>

$('.editable').attr('data-value', 3);

<a class="editable" data-type="select" data-value="3">value-1</a>

$('.editable').data('value');
> 1

Locke