Edit dynamic text html

I have a a list of items in HTML which represent a food menu

<ul>
<li id = "soratable1" >big burger<p>decription of big burger</p><small>$6.50</small></li>
<li id = "soratable2" >cheese burger<p>decription of cheese burger</p><small>$6.50</small></li>
<li id = "soratable3" >fish burger<p>decription of fish burger</p><small>$6.50</small></li>
<li id = "soratable4" >bacon burger<p>decription of bacon burger</p><small>$6.50</small></li>

Using jquery I am making this a sortable list. The user can add and remove items from this list. To edit I would just like to have the user click on the text, edit it and automatically update in the database. I was thinking of having each item in a text box and hide the boarder with css, then use some onfocus onblur wizardry but this 开发者_运维百科seems a bit archaic.

Any suggestions?

One alternative is to use jEditable plugin.

Check it out @ http://www.appelsiini.net/projects/jeditable

You could have an 'edit' icon of some kind that swaps the text contained in the li for an input box containing that text. Then, listen to the onblur event of the input. Here is an example of what that would look like. Html:

<ul>
  <li><a id="LINK" href="#">edit</a><span id="TEXT">Text goes here</span><input id="INPUT" type="text" style="display:none" /></li>
</ul>

Javascript:

$(document).ready(function()
{
  $("#LINK").click(function(){
    $("INPUT").val($("#TEXT").text());
    $("INPUT").show();
    $("#TEXT").hide();
  });

  $("#INPUT").blur(function(){
    $("#TEXT").html($("INPUT").val());
    $("#INPUT").hide();
    $("#TEXT").show();
  });
});