Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 678
  • Last Modified:

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

How do I using jquery display a textbox over a li element to edit it?
0
cbrune
Asked:
cbrune
1 Solution
 
tap52384Commented:
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
 
soupBoyCommented:
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now