|
Introduction
jQuery is an open source cross browser javascript library . jQuery is a very popular javascript library and has a lot of plug-ins for a wide variety of task . JQuery has got plug-ins from simple task like form validation to a lot of complex behavior. In this article I am going to discuss some of the very useful plug-ins of jQuery to do in place editing.
Jeditable
Jeditable is a very handy and small jQuery in place editor plug in . This plug in helps you make a lot of HTML elements directly in place editable with just a few lines of code
This plug in can be downloaded from
http://www.appelsiini.net/projects/jeditable
You can also get more information about it on
http://plugins.jquery.com/project/jeditable
Once you have downloaded jQuery and jeditable using this plug in is very simple.
I will start with a very simple e.g:-
Jeditable Demo
click to Update Text Here
This example creates a div element and clicking on it will make it editable. Once the user clicks on it and makes changes and clicks the data is posted to the script 'updatedata.php' (below the code for updatedata.php is shown).
In this example first I have created a <dev> element using
<div class="div_txt" id="div_text">click to Update Text Here</div>
To make this element in place editable you just have to add
$(document).ready(function() {
$('.div_txt').editable('updatedata.php');
});
The only mandatory parameter is the complete URL where the data will be posted when the user changes the content.( in our case its 'updatedata.php' or it could be http://abc.com/updatedata.php ) . My updatedata.php just echoes the value back so that it is displayed to the user back
<?php
//Add Code here to $_POST['id'] and $_POST['value'] and update
//in a database or file
echo $_POST['value']; // Return the changed value so that is displayed to the user
?>
Adding buttons and tool tips
We can even add Ok and cancel buttons when the user tries to edit the content in place. So when the user clicks Ok the data is posted to updatedata.php . We can also add a tool tip which can give instructions to the user like ‘Click to edit’
So if I add a new div element to my page as follows
<div class="div_txt_area" id="div_txt_area">Click on text here</div>
Then the following code
$('.div_txt_area').editable('updatedata.php', {
type : 'textarea',
cancel : 'Cancel',
submit : 'OK',
tooltip : 'Click to edit...'
});
will add two buttons when the user is editing the text as Ok and Cancel .
Also when the user hovers the mouse over the div the tool tip will be shown as 'Click to edit...'
Other Features
This plug-in has a lot of other features like
-
To use selects in , in-place edition
-
To specify a load url from which data is loaded in a Text area
-
To post data to a function instead of an URL
You can read a complete list of features with code examples at http://www.appelsiini.net/projects/jeditable
Another In-Place Editor
An another good jQuery in place editor plug in is the ‘Another In-Place Editor ‘
This is also a very good plug-in which makes HTML elements in place editable .
This plug in can be downloaded from http://code.google.com/p/jquery-in-place-editor/
Once you have downloaded this plug in and jQuery using this plug-in is also very simple .
An example to demo its usage is as follows
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Another In-Place Editor</title>
<script src="/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="/jquery.editinplace.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#div_text").editInPlace({
url: "updatedata2.php"
});
});
</script>
</head>
<body>
<p id="div_text">
Click to Update Text Here
</p>
</body>
</html>
Like the above example for Jeditable I have created one div element using
<p id="div_text"> Click to Update Text Here </p>
To make this element in place editable with ‘Another In-Place Editor ‘
You have to just add
$("#div_text").editInPlace({
url: "updatedata2.php"
});
This will make the element div_text in place editable and when the value is changed by the user and presses enter the data is posted to url parameter specified. (In our example it is updatedata2.php )
The parameters which are posted to the URL are
-
original_html; The original value in the element prior to the post
-
update_value; The value which the user changed
-
element_id; The ID of the current element
<?php
//Add Code here to add or update $_POST['update_value']
//in a database or file
echo $_POST['update_value']; // Return the changed value so that is displayed to the user
?>
The updatedata2.php just echoes the value back so that it is displayed to the user back
Adding a select for in place edit
We can even add a select in the in place edit so that the user can choose from options while editing. Once the user will select the value the data will be posted to url specified.
To do this I will have to create a div element
<p id="div_select">Click Here to Choose country</p>
The following code will add a select to the in place edit
$("#div_select").editInPlace({
url: "updatedata2.php",
field_type: "select",
select_options: "USA, UK , Australia"
});
To add the select you will have to add the parameter field_type as"select" and specify the options in select_options parameter.
Other Features
Some of the other features of this plug in are
-
Adding a saving image or saving text while the save happens on the server.
-
This plugin allows to submit to a callback function rather than to the server URL
-
This plug in allows validation of blank field
For a list of more features you can visit http://code.google.com/p/jquery-in-place-editor/
Some other good jQuery in place editor plug-ins
Following are some other jQuery plug-in which can be used for in place editor functionality
Conclusion
jQuery and its plug-ins have really changed the way UI is developed for websites now. The plug in described in this article make is very easy to make a UI in websites where there is need In place editable elements. Adding in place elements just take a few lines of code with the use of these plug-ins.
|
Freelance
Currently I am evaluating the Google Web Toolkit technology (GWT) for our project and I'm trying to compare it to other approaches like the ICEfaces technology from the Icesoft company. 
Here is a flash presentation of the components bundled with the ICEfaces framework from the icesoft.com. It features functionality like text autocompletion, calendars, menus, forms partial submit, trees, drag&drop and many various effects. 
