?
Solved

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

Posted on 2013-01-20
2
Medium Priority
?
714 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 2000 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

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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)
Suggested Courses

593 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