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.

Gaurav · Accepted Answer · 2013-04-10T07:09:56.403

5

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!

edited Apr 10 '13 at 07:09

answered Apr 06 '13 at 11:30

Gaurav

8,367
14
55
90

yes this is working fine but if i try to took more than one
tag inside of
- tag so both of list tags are merged inside one textbox but i dnt want this i want to modify one list tag at a time and textbox should contain only one listitem text. Here is the Fiddle http://jsfiddle.net/erum/uenZW/ in this fiddle i want when i click on "erum" only that listitem should be replaced by textbox and user will be able to edit it while there would be no chnges in other listitem

Erum

Apr 08 '13 at 11:13

but its not working for dynamic

i have posted my code here http://stackoverflow.com/questions/15927937/how-to-set-readonly-property-of-dynamic-textbox-using-jquery in this code i have placed dynamic textboxes and filling data from DB but when i need to put

dynamically and when user clicked on anyone list item then that list should be hidden and a textbox should appear with value same as the text of

– Erum Apr 10 '13 at 15:55

score 4 · Answer 2 · answered Aug 14 '15 at 12:17

4

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

answered Aug 14 '15 at 12:17

Guest XY

51
4

score 1 · Answer 3 · answered Apr 06 '13 at 11:29

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

How to make editable list item using jQuery?

3 Answers3

Linked

Related