How to get editable text value from bootstrap editable plugin

Question

I'm using this plugin for editing text. This is my fiddle. I want changing the text "Text 1", "Text 2" according to changing text of two edit field respectively. How can I do this?

I tried with this script:

var title = $('.edit_text').editable('getValue');
$('.name-list p').html(title);

Thanks in advance!

Answer 1

Try this:

DEMO: FIDDLE

HTML:

<div><a href="#text1" class="edit_text">Name Me</a></div>
<div><a href="#text2" class="edit_text">Namete Me</a></div>
<div class="name-list">
    <p id="text1">Text 1</p>
    <p id="text2">Text 2</p>
</div>

JS:

$.fn.editable.defaults.mode = 'inline';
$('.edit_text').editable({
    type: 'text',
    success: function(k,val){
        var id = $(this).attr("href");
        $('.name-list '+ id).html(val);
    }
});

---

UPDATE

I was asked by someone to explain how this works. I apologize for not doing that before, this is how it works:

We first create the HTML. As you can see, the anchor tags <a> have a class of edit_text so that we can use it to attach the .editable methods, but also they hold the ID's they are linked to, in their href attributes.

In jQuery,

• we use bootstrap's .editable method (Source),

• we set the default mode to "inline" so that all edits are done inline rather than by the default popup way $.fn.editable.defaults.mode = 'inline';.

• we attach the .editable methods to all elements holding the class .edit_text, and we give it the options needed. $('.edit_text').editable({..})

• One of those options is a callback called success which fires when the edit is complete.

• When the success callback executes, it returns the index k and the value val of the current element success: function(k,val)

• we grab that element's href and assign it to the id variable. var id = $(this).attr("href");

• we look at the element with class of name-list and look for any children with the id we obtained. $('.name-list '+ id)

• Lastly we place whatever value val we received from the callback and place it inside the element found.$('.name-list '+ id).html(val);

Hope this helps.