Solved

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

Posted on 2013-01-20
2
590 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 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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…

763 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