Solved

jquery to display a textbox over a li element to edit it

Posted on 2013-01-20
2
557 Views
Last Modified: 2013-02-06
How do I using jquery display a textbox over a li element to edit it?
0
Comment
Question by:cbrune
2 Comments
 
LVL 2

Expert Comment

by:tap52384
ID: 38799887
To edit the <li>? You mean edit the text within the <li>?

I imagine you could have a hidden textbox within the <li>, like so:

<ul>
<li id="li1"><p>text</p><input type="text" style="display:none" id="editLI1" /></li>
</ul>
<br />
<input type="button" value="Edit" id="editLI1Button" />

Open in new window


Then, to edit the <li>, you would click the "Edit" button to:
1) Set the value of the hidden textbox to the text within the <p> element.
2) Hide the <p> element.
3) Show the hidden textbox
4) Change the text of the edit button to show that you are saving changes.

$("#editLI1Button").click(function() {

// jQuery object for the <p> element. Could be a little simpler if the <p> has an id.
var p = $("li1 p").eq(0),
     textbox = $("editLI1");

if (this.value === 'Edit') {

// set the value of the hidden textbox and show the textbox
textbox.val(p.text()).show();

// hide the <p> element
p.hide();

// set the value of the "Edit" button
this.value = "Save";

}
else if (this.value === "Save") {

// save the value from the textbox, show the <p> element
p.text(textbox.val()).show();

// hide the textbox and clear its value
textbox.val('').hide();

// set the value of the button back to "Edit"
this.value = "Edit";

}



}); // end of function

Open in new window

0
 
LVL 8

Accepted Solution

by:
soupBoy earned 500 total points
ID: 38800944
There is pretty wide support for the contentEditable attribute.  Instead of trying to play some magic with aligning inputs to display over list items, consider using hidden inputs and contentEditable.

Possible steps:
1) You make your list items 'contentEditable'
2) You place hidden text inputs in your code
3) You 'link' the list items with a specific input (ie: <li data-id="1"> and <input id="1">)
4) You run some javascript that fires on 'keyup' that copies data to hidden fields when a list item is edited.

Here is a brief jsFiddle showing the possible steps.  I used text inputs for the example so we could see the information being copied over: Using contentEditable to edit list items

- Chris
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now