html5 - How to make editable list item using jQuery? -


i want display user information in listview data pulled db. target make listview editable when user clicks on listview, responds "textbox" , keyboard appears (for mobile). after editing, user can press "save" button save his/her editable contents db. using html, jquery, , css adobe phonegap api.

i have created fiddle , think want :

http://jsbin.com/ijexak/2/edit

in fiddle click on text edit , on focusout of input element text save , input element hide.

updated

i checked comment, should try this:

html

   <ul>        <li>            <span class="display">erum</span>            <input type="text" class="edit" style="display:none"/>        </li>        <li>            <span class="display">ingress</span>            <input type="text" class="edit" style="display:none"/>        </li>    </ul> 

js

$(".display").click(function(){     $(this).hide().siblings(".edit").show().val($(this).text()).focus(); });  $(".edit").focusout(function(){     $(this).hide().siblings(".display").show().text($(this).val()); }); 

updated fiddle

hope helps!


Comments

Popular posts from this blog

ios - iPhone/iPad different view orientations in different views , and apple approval process -

java Extracting Zip file -

C# WinForm - loading screen -