Another In-Place Editor, jQuery Plugin

For more info and downloads please visit this link.. Click on any paragraph of text below the example headings.

Example 1 - Standard Text box

This example is with no options except for a URL that will handle the value passed to the server.



    $(".editme1").editInPlace({
        url: "http://www.davehauenstein.com/code/jquery-edit-in-place/example/",
        params: "ajax=yes"
    });

Example 2 - Text area

This example shows how to call the function and display a textarea instead of a regular text box. A few other options are set as well, including an image saving icon, rows and columns for the textarea, and a different rollover color.



    $(".editme2").editInPlace({
        url: "http://www.davehauenstein.com/code/jquery-edit-in-place/example/",
        params: "ajax=yes",
        bg_over: "#cff",
        field_type: "textarea",
        textarea_rows: "15",
        textarea_cols: "35",
        saving_image: "images/ajax-loader.gif"
    });

Example 3 - Select Dropdown

How about a select input field so we can limit our options? Yup, just click here.



    $(".editme3").editInPlace({
        url: "http://www.davehauenstein.com/code/jquery-edit-in-place/example/",
        params: "ajax=yes",
        field_type: "select",
        select_options: "Change me to this, No way:0"
    });

Example 4 - Using a callback function to update 2 divs

Edit me now!

Div to be updated



    $(".editme4").editInPlace({
        url: "http://www.davehauenstein.com/code/jquery-edit-in-place/example/",
        params: "ajax=yes",
        callback: function(original_element, html){
            //put some AJAX in here if you want...
            $("#updateDiv1").html("Here ya go.");
            $("#updateDiv2").html("Here ya go 2.");
            return(html);
        }
    });