jQuery / Javascript Easy Edit In Place - Input Boxes and Select Boxes

One common theme in great user interfaces is the ability to edit content in place without page reload. If you are displaying any kind of editable content to a user, that user will almost expect the ability to manipulate their content without having to work through one or more page reloads. Javascript is the perfect candidate to utilize this type of functionality within your website. More specifically, the jQuery framework will simplify your task even more. Just a few lines of code can make your application much easier to use and provide you with much happier users.

In terms of editing content, there are any number of instances where you want the user to easily change a piece of content. One such way to do this is to allow the user to click on any part of the content and allow jQuery to transform the content into a input box, select box, or any other HTML form element. We'll go through how to apply this to input boxes and select boxes below. Both examples will detail the HTML to be displayed on the webpage, the javascript necessary to allow the user to edit in place, and a working example.

Note that these examples require the jQuery framework, which can be obtained by pasting the following script link from Google APIs into your code:

 

Input Box

HTML

 

Please click me!!

This is just a very simple div :)

 

Javascript

The methodology behind this jQuery code is to turn html within the div in to a input box on a click, and then turn it back to text when the item loses focus.

//When div.edit me is clicked, run this function
$(document).ready(function() {
//When div.edit me is clicked, run this function
$("div.editme").click(function() {
//This if statement checks to see if there are 
//and children of div.editme are input boxes. If so,
//we don't want to do anything and allow the user
//to continue typing
if ($(this).children('input').length == 0) {
//Create the HTML to insert into the div. Escape any " characters 
var inputbox = "<input type='text' class='inputbox' value=\""+$(this).text()+"\">";
//Insert the HTML into the div
$(this).html(inputbox);
//Immediately give the input box focus. The user
//will be expecting to immediately type in the input box,
//and we need to give them that ability
$("input.inputbox").focus();
//Once the input box loses focus, we need to replace the
//input box with the current text inside of it.
$("input.inputbox").blur(function() {
var value = $(this).val();
$(".editme").text(value);
});
}
});
});	

 

Working Example

Please click me!!

Select Box

Select boxes are bit different than input boxes, as there are defined fields with unique values that must be kept track of as the user updates them. You must replace the text in the div with the given value, while also keeping track of the unique option id of the particular choice. We will do this by storing the id of the option within the div. That way, whenever the user changes the option, we can keep track of his or her value.

 

HTML

Apples

Once again, all we need is a line of HTML code. Do note that this div now has an id. The "selectme" portion helps ensure that this id will not be repeated anywhere else in the page, and the "0" corresponds to the select box value of Apples.

 

Javascript

Our goal is to allow the user to click on text, be able to select an appropriate value, and click off of the select box in order to turn the value back into text.

$(document).ready(function() {
$("div.selectme").click(function() {
//Only place a select box in this div if there is 
//not one there already
if ($(this).children('select').length == 0) {
//Since we cannot start an id with a number, we must
//place alphabetical characters in front of it, separated by a -
//We find the actual id on the right side of the - character
var id = $(this).attr('id').split("-");
var currentid = parseInt(id[1]);
var str = "";
//This is our array of select values. These could be anything you wish,
//with any number of values.
var arr = new Array("Apples","Oranges","Pears","Grapes","Strawberries");
//Turn the array into a select box. Show the current value as the selected value
//Note that we put ids on the options. This is paramount in being able to display
//the correct text back to the user
for(i=0; i<arr.length; i++) {
if (currentid == i) 
str += "<option selected id='opt-"+i+"' value='"+i+"'>"+arr[i]+"</option>";
else
str += "<option value='"+i+"' id='opt-"+i+"'>"+arr[i]+"</option>";
}
str = "<select class='selectbox'>"+str+"</select>";
//Put the select box into the div
$(this).html(str);
$("select.selectbox").focus();
$("select.selectbox").blur(function() {
//Get the user chosen value
var value = $(this).val();
//Obtain the textual representation of the chosen value
var valuetext = $(this).children('option#opt-'+value).text();
//Replace the selectme div with the new id. This can be parsed 
//for a database update, and allows the user to choose another
//value if he or she clicks on the div again.
$("div.selectme").attr({'id': "selectme-"+value});
//Put the text into the select div.
$(".selectme").text(valuetext);
});
}
});
});

 

Working Example

Click on the word "Apples".

Apples

 

In conclusion, these tricks can be applied in any number of ways for many different kinds of user interfaces. These examples are merely a starting point for your coding imagination. I've included a quick download of these examples here: editinplace.zip