Edit sortable selectable li with jquery-ui

Question

I want to allow editing list items in a selectable / sortable list.

Here is a list example: http://jsbin.com/aweyo5 credits to rdworth

So I would we go about allowing the user to edit items? I know how to update/change their text but how I do I got about allowing the user to input text directly into the list item?

Answer 1

Here is a working answer :

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript" src="jeditable.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        function makeEditable()
        {
            $('.editable').editable(function(value, settings)
            { 
                /* Debug

                 console.log(this);
                 console.log(value);
                 console.log(settings);
                */
                return(value);
            });
        }
        function makeDeletable()
        {
            $('a.delete').click(function(e) 
            {
                e.preventDefault();
                $(this).parent().remove();
            });
        }
        function addTopic(topicName)
        {
            $("ul.#topics").append('<li><span class="editable">' + topicName +'</span><a class="delete" href="">delete</a></li>');
            makeEditable();
            makeDeletable();
        }
        makeEditable();
        makeDeletable();

        $( "#topics" ).sortable();
        $("form").submit(function() {
            addTopic($('input[name=topic]').val());
            return false;
        });
        $('a#add').click(function(e)
        {
            e.preventDefault();
            addTopic($('input[name=topic]').val());
        });
    });
</script>

<ul id="topics">
    <li><span class="editable">topic 1</span><a class="delete" href="">delete</a></li>
    <li><span class="editable">topic 2</span><a class="delete" href="">delete</a></li>
    <li><span class="editable">topic 3</span><a class="delete" href="">delete</a></li>
</ul>
<form>
New topic: <input type="text" name="topic" /><br />
</form> 
<a id="add" href="">add</a>

Hope it helps :) You can get jeditable here: http://www.appelsiini.net/projects/jeditable