jquery - How to get editable text value from bootstrap editable plugin -

jquery - How to get editable text value from bootstrap editable plugin -

i'm using plugin editing text. this fiddle. want changing text "text 1", "text 2" according changing text of 2 edit field respectively. how can this?

i tried script:

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

thanks in advance!

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 asked explain how works. apologize not doing before, how works:

we first create html. can see, anchor tags <a> have class of edit_text can utilize attach .editable methods, hold id's linked to, in href attributes.

in jquery,

we utilize bootstrap's .editable method (source),

we set default mode "inline" edits done inline rather default popup way $.fn.editable.defaults.mode = 'inline';.

we attach .editable methods elements holding class .edit_text, , give options needed. $('.edit_text').editable({..})

one of options callback called success fires when edit complete.

when success callback executes, returns index k , value val of current element success: function(k,val)

we grab element's href , assign id variable. var id = $(this).attr("href");

we @ element class of name-list , children id obtained. $('.name-list '+ id)

lastly place whatever value val received callback , place within element found.$('.name-list '+ id).html(val);

hope helps.

jquery twitter-bootstrap