Geek Answers Handbook

How does an X-editable in-place edit plugin store values?

I am trying to understand how X-editable stores values.

  • 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's the jsfiddle to play with

    As you can see, everything works fine. In the first step, I declare the value of the dropdown value equal to "value-1", and then change it to "value-2" in JavaScript. As a result, you can "value-2" on the page and "value-2" after clicking on the drop-down menu the same value will be selected.

  • In this step I will modify the JavaScript a bit, as shown below:

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

    Again, the results are quite expected. You will see "value-1" on the page, but when you open the drop-down list, "value-2" will be selected.

  • JavaScript

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

    "value-2", "value-1". .

:

, , "ok" data-value, . , "value-3" "", data-value - 1. ?

UPD:

-

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

HTML data-* jQuery data() - . jQuery , HTML data-* data() data() HTML5-- *

jQuery 1.4.3 HTML 5 data- jQuery.

data- , ( jQuery).

, HTML data-* jQuery , .

, , , value-3, data-value :

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

, data() jQuery . , 'value' data():

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

data-value, , , jQuery attr():

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

:

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

, attr(), jQuery data() :

<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
+3

More articles:


All Articles