inline-edit.js

$(document).ready(function() {
    inlineEdit_init();
});

//find all span tags with class inline-edit and id as fieldname parsed to update script. add onclick function
function inlineEdit_init(){
    $("div.inline-edit").each(function() {

        $(this).data("in-update",false);
        $(this).click(function() {

            inlineEdit($(this),"textarea");
        });
        $(this).css("cursor","pointer");
        $(this).attr("title","Click to edit!");
    });

    $("span.inline-edit").each(function() {

        $(this).data("in-update",false);
        $(this).click(function() {

            inlineEdit($(this),"input");
        });
        $(this).css("cursor","pointer");
        $(this).attr("title","Click to edit!");
    });
}

//edit field created
function inlineEdit(actual,eletype) {

    var inupdate = $(actual).data("in-update");

    if(inupdate)
        return;

    $(actual).data("in-update",true);

    try {

        var width = $(actual).outerWidth() + 5;
        var height = $(actual).outerHeight() + 2;

        if(width < 60) width = 100;

        if(eletype == "textarea"){

            if(height < 50) height = 50;

            var html = "<textarea name=\"textarea\" id=\""+ $(actual).attr("id") +"_field\" style=\"width: "+width+"px; height: "+height+"px;\" onblur=\"return inlineEdit_Blur(this,'" + $(actual).attr("id") + "');\">" + $(actual).html() + "</textarea>";

            $(actual).html(html);
            $(actual).find("textarea").focus()
            $(actual).find("textarea").select();
        }
        else if(eletype == "input"){
            if(width < 100)
                width = 150;

            var inputHtml = $(actual).html();
            var html = "<input id=\""+ $(actual).attr("id") +"_field\" style=\"width: " + width+"px; height: "+height+"px;\" maxlength=\"254\" type=\"text\" value=\"" + inputHtml + "\" onblur=\"return inlineEdit_Blur(this,'" + $(actual).attr("id")+ "');\" />";

            $(actual).html(html);
            $(actual).find("input").select();
        }

    } catch(e){
         $(actual).data("in-update",false);
    }
}
function inlineEdit_Blur(editele,idfld) {

    var actual = document.getElementById(idfld);
    try {
        if (editele.value == "") {
            editele.value="[None]";
        }
        $(actual).html(editele.value);
        return editele.value;
    }
    finally{
        $(actual).data("in-update",false);
    }
}