• Choose a category
• All
• Classic-Fiction

There are a number of ways you can recreate the effect. The easiest way is to disguise your form fields as labels: remove the borders, give them the same background color as your page, and add borders back in when the users focuses on it! This is a great cheat, and means your form acts just like a regular one (because it is). However, this can be tricky to accomplish, and require a lot of extra markup and styles if you want many different parts of the page to be editable.

As a result, a more common approach is to allow the editing of non-form elements: paragraph tags and title tags, for example. When the user clicks on the tag, the contents are replaced with a text box or textarea that the user can interact with. When the task is complete, the original tags are replaced with the new content.

We’ll use classes to mark content as being editable. For simple one-liners, we’ll use input elements (by assigning the class editable), and for longer passages we’ll use textareas (which we’ll give the class name editable-area). We’ll also be sure to assign each element a unique id. This is so we can send the data to the server for updating in the database, and reload the new data on the next pageload:

chapter_07/09_inline_editing/index.html (excerpt)

Glendatronix

Glendatronix floated onto the scene with her incredible debut …

To make it work, we need to capture a few events. The first is the hover event, to add an effect so the user can see that the element is editable (we’ll go with a tried and tested yellow background color).

We also want to capture the click event—which will fire when the user clicks on the editable content—and the blur event, which signifies the end of editing:

chapter_07/09_inline_editing/script.js (excerpt)

$(".editable, .editable-area")

.hover(function() {

$(this).toggleClass("over-inline");

})

.click(function(e) {

// Start the inline editing

}).blur(function(e) {

// End the inline editing

});

When the user clicks an editable area, our code kicks in. First, we grab a reference to the element that was clicked and store it in the $editable variable (to prevent us having to reselect it every time). We’ll also check for the active-inline class with hasClass. If the element already has the active-inline class, it’s already an edit box. We’d rather not replace the edit box with another edit box:

chapter_07/09_inline_editing/script.js (excerpt)

// Start the inline editing

var $editable = $(this);

if ($editable.hasClass('active-inline')) {

return;

}

Next up, we want to grab the contents of the element—and then remove it. To obtain the contents we’ll just save the html data to a variable … but we’ll also use the $.trim method to remove whitespace from the start and end of the content string. This is necessary because, depending on how your HTML is laid out, the string could have extra carriage returns and line spaces that we want to prevent showing up in the text box.

Then we add our active class, which serves the dual purpose of indicating that editing is in process, and providing a hook for our styles. Finally, we clear out the current element with the empty action. This command is similar to remove, except that calling empty on an element will result in all of its children being removed, rather than the element itself:

chapter_07/09_inline_editing/script.js (excerpt)

var contents = $.trim($editable.html());

$editable

.addClass("active-inline")

.empty();

Important: Chaining with empty and remove

It’s important to remember that any jQuery actions you chain after a remove or empty command will be applied to the removed selection and not the selection that you had before you removed the elements. The reasoning behind this is that if you simply threw away the elements, they’d be lost forever. This way you have the option to keep them around, process them, or store them for future use.

Finally, it’s time to insert our brand-new text box or textarea.