How to make editable list item using jQuery?

Question

I want to display user information in a listview with data pulled from a DB. Now my target is to make the listview editable so that when a user clicks on any listview, it responds like a "Textbox" and a keyboard appears (for mobile). After editing, the user can press a "save" button to save his/her editable contents to the DB. I am using HTML, jQuery, and CSS with the Adobe PhoneGap API.

Solution 1

I have created a fiddle and i think this is what you want :

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

In fiddle click over the text to edit and on focusOut of the input element your text will save and input element will hide.

Updated

I checked your comment, you 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 it helps!

Solution 2

<li contenteditable="true"> Editablecontent </li>

Solution 3

1. attach a click event on your list item.
2. when clicked remove the content of the item and replace it with a form with an input box and button
3. redefine the submit event of the form to perform the desired operation on database
4. remove the form and insert the modified item back in the list.