jQuery and PHP inline editing

Inline editing as it’s known, or being able to edit content directly on a page is a great tool have under your belt. I’m going to run through exactly how it works as well as how to POST the updated text content through to a PHP script for server side processing to put in the database.

The Code

It looks a little complex so i’m going to quickly run through exactly what’s going on.

1. When you visit the demo page are presented with a block of text. If you hover your mouse over the text you’ll see a little edit icon similar to when you want to edit content on FaceBook.
2. If the user clicks on the block of code the text is replaced with a form textarea with the option to save or cancel any changes.

Now in a little more detail

• This tutorial uses binding and unbinding. Put in simple terms we can bind a click event to an element. Unbinding releases the click event from the element, simple. In line 9 of the code below we bind a click event to all the elements with a class of ‘inlineEdit’ the event handler is the function ‘updateText’. This means that everytime a div with the class ‘inlineEdit’ is clicked the function ‘updateText’ will be run. The function ‘updateText’ replaces the current text with a textarea.
• Next we see the save function. This function is only run when the user clicks the save icon. WE basically save the new text in a variable and pass it through to the update.php file. You’ll notice that the loading icon is displayed during the saving process. We also display a message when there is a response from the PHP page. FInally we remove the ‘selected’ class form the element, and then inject the new text that the user wrote in the textarea into the div
• The cancel function is activated when the element with the class .revert is clicked. This function simply removes the class ‘selected’ as above in the save function, as well as putting the original text in the div.

$(document).ready(function () {

    function slideout() {
        setTimeout(function () {
            $("#response").slideUp("slow", function () {});
        },
        2000);
    }

    $(".inlineEdit").bind("click", updateText);

    var OrigText, NewText;

    $(".save").live("click", function () {

        $("#loading").fadeIn('slow');

        NewText = $(this).siblings("form").children(".edit").val();
        var id = $(this).parent().attr("id");
        var data = '?id=' + id + '&text=' + NewText;

        $.post("update.php", data, function (response) {
            $("#response").html(response);
            $("#response").slideDown('slow');
            slideout();
            $("#loading").fadeOut('slow');

        });

        $(this).parent().html(NewText).removeClass("selected").bind("click", updateText);

    });

    $(".revert").live("click", function () {
        $(this).parent().html(OrigText).removeClass("selected").bind("click", updateText);
    });

    function updateText() {

        $('li').removeClass("inlineEdit");
        OrigText = $(this).html();
        $(this).addClass("selected").html('<form ><textarea class="edit">' + OrigText + '" </textarea> </form><a href="#" class="save"><img src="images/save.png" border="0" width="48" height="15"/></a> <a href="#" class="revert"><img src="images/cancel.png" border="0" width="58" height="15"/></a>').unbind('click', updateText);

    }
});

The PHP

In this example I haven’t added the database connection script. We basically POST the data to update.php and using PHP we echo back the results. You could quite easily add this data to the database.

$text = mysql_escape_string($_POST['text']);
$id = mysql_escape_string($_POST['id']);

echo $text;
// this is where you could add the updated text to the database where the database row id = $id for example.

The HTML

The HTML is simply a list item with the class ‘inlineEdit’ this makes the content of the element editable. The more elements that you add with this class, the more you can edit. notice how i’ve added an id of 1 to the example below. This could be a specific row in a database for example if you have multiple editable elements on a page.

<h2>jQuery Inline-Edit <img id="loading" src="images/loading.gif"/></h2>
Click the text below to edit it.
<div id="response"></div>
<ul>
  <li class="inlineEdit" id="1">Lorem Ipsum....</li>
</ul>