sim.plified.com

For PatternTap.com we wanted to use some edit in place functionality to allow users to change their name, location, etc.  I used jQuery to create our own implementation of edit in place. 

Here is an example of the markup for the input box (I have left out the server side coding that renders this markup):

<li class="first">
    <span class="pro_label">Name:</span>
    <span id="update_real_name"><span class="editThis">[Users Name]<span class="edit_mark">edit</span></span></span>
</li>

The edit mark span is something that provides visual feedback to the user that the area is editable.   What is inside the "editThis" span is what will be edited.   The span that surrounds the both of those pieces serves as a place holder, so that the input can be swaped in and out of the DOM.

Here is the JavaScript that binds to the item and makes it editable.

    $(document).ready(function() {
        bind_update();  // bind this on page load
    });

    function bind_update()
    {
       // find all the editThis elements and find this functionality
        $('.editThis').bind("click", function(e){

            // remove the edit_this mark
            $(this).children(".edit_mark").remove();

            // capture some information about the selected element
            var parentId = this.parentNode.id;
            var editType = this.parentNode.className
            var revert = this.innerHTML;

            // check to see if this is a textarea or inputbox
            //   note the save and cancel buttons are added along with the input or textarea
            if (editType == "textarea")
                $('#' + parentId).html("<textarea id=\"input_" + parentId + "\" >" + revert + "</textarea> <button onclick=\"update_value('" + parentId + "', true);\" value=\"Save\"   >Save</button> <a id=\"cancel_" + parentId + "\" href=\"javascript:void(0);\">Cancel</a>");
            else
                $('#' + parentId).html("<input type=\"input\" id=\"input_" + parentId + "\" value=\"" + revert + "\" onblur=\"\" /> <button onclick=\"update_value('" + parentId + "', true);\" value=\"Save\"   >Save</button> <a id=\"cancel_" + parentId + "\" href=\"javascript:void(0);\">Cancel</a>");

            //set the focus on the newly embedded input box
            $("#input_" + parentId)[0].focus();
            $("#input_" + parentId)[0].select();

            //bind the cancel functionality to the cancel button
            $("#cancel_" + parentId).click(function() {
                    update_value(parentId, revert);
            });

        });
    }

    // this function sends the updated value back to the server    
    function update_value(id, update)
    {
        if (update == true)
        {
            result = $('#input_' + id).val();
            $.ajax({
                type: "POST",
                url: "/people/change_user_profile/",
                data: "user_id=<?=$user['id']?>&field=" + id + "&value=" + result,
                error: function()
                    { alert("There was a problem, please let us know.") }
            });
        }
        else
        {
            // in the case of a cancel, update is the "revet" value 
            result = update;
        }
        $('#' + id).html("<span class=\"editThis\">" + result + "<span class=\"edit_mark\">edit</span></span>");

        bind_update();
    }

I'm sure there are slicker ways to do this, but this certainly did the job for us.

Of course when you send the data to the server you are going to want to authenticate the user to make sure they are who they say they are.  This will prevent people from hacking the JavaScript and changing someone elses information.