Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2013-01-20
2
Medium Priority
?
666 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

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…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

722 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