Ajax Edit in Place
In this tutorial I'm going to teach you how to develope edit-in-place feature in AJAX. Check out the demo here. If you're new to AJAX development, you can use this tutorial to get started with AJAX programming.
Demo: See the demo
Source: Download Source
 | Click on a Topic [ Hide ] |
Overview
| Learn How To Build Your Own AJAX Web Applications | ||
|
Are you looking to build interactive AJAX applications? Learn how you can build enhanced and professional AJAX web applications and sites in minutes... >> Click here to learn more << |
|
Have you guys ever seen the edit button on vbulleten boards or the edit comments button on digg, which allows the user to seamlessly edit their content without reloading the page. Well, we are going to implement the same AJAX edit-in-place functionality in this tutorial.
Suppose we have an article page on our site where people can edit articles. The article has an edit and save button which allows the user to edit the article and save the changes as necessary. View the ajax_edit_in_place demo to see what I'm talking about.
To accomplish the editing and saving feature in AJAX, we're going to make use of ajax tool Prototype AJAX library. It's a single javascript file called prototype.js.
Prototype is a powerful library with all the necessary functions we need to build an AJAX driven applications.
Creating The Edit and Save Features
So, lets beging impleting out edit-in-place feature.
First download and view the source code (files) of this tutorial. Next, I will go through each part of the code to explain what I’ve done. I've also included comments in the source code which explains what is going on.
The first step is to include the prototype.js in our html.
<script type="text/javascript" src="prototype.js"></script>
Next, we're going to write a series of JavaScript functions to implement the edit and save functionality.
init function
In the init function below, we invoke a event listener for our edit and save buttons as defined in our HTML code.
/* Create click event listener for both edit and save button
* This function is loaded during page load.
*/
function init()
{
//call function edit_in_place when user click on teh edit button
Event.observe("edit", "click", function(e){ edit_in_place() });
//call function save when user clicks on the save button
Event.observe("save", "click", function(e){ save() });
}
edit_in_place function
Next, you see the edit_in_place function which is invoked when the user clicks on the edit button. This function will make the edit button invisible and make the article title and body text editable.
/*
* This function makes the text editable
*/
function edit_in_place()
{
//show the save button
$("save_settings").style.display = "block";
//hide the edit button
$("edit_settings").style.display = "none";
//replace the article title text with textbox
var article_title = '<input type="text" name="article_title" id="article_title"';
article_title += 'size="30" value="'+$('title').innerHTML+'" >';
$("title").innerHTML = article_title;
//replace the article body text with textarea
var article_body = '<textarea cols="30" rows="5" name="article_body" id="article_body">';
article_body += $('body').innerHTML+'</textarea>';
$("body").innerHTML = article_body;
}
save function
The save function is called when the user clicks on the save button. This function will post the changes made by the user to articles.php. articles.php contains code for updating the article changes into the database
/*
* This function will post the article changes (title and body text) to articles.php
*/
function save()
{
new Ajax.Request("articles.php",
{
method: "post",
postBody: "title="+$F("article_title")+"&
body="+$F("article_body")+"&save="+$F("save"),
onComplete: show
}
);
}
show function
The function show will display the edited changes made after saving.
/*
* show the new changes made when clicked save
*/
function show(res)
{
$("title").innerHTML = $("article_title").value;
$("body").innerHTML = $("article_body").value;
$("save_settings").style.display = "none";
$("edit_settings").style.display = "block";
}
cancel function
The function cancel populates the original saved data on the page. When the user clicks cancel, this function is called.
/*
* reset changes. Populate divs with the orignal saved data
*/
function cancel()
{
$("title").innerHTML = "Edit the article title here...";
$("body").innerHTML = "Edit the article body text here...";
$("save_settings").style.display = "none";
$("edit_settings").style.display = "block";
}
Posting and Saving The Data
articles.php
Once the user clicks on save, the data is then posted to articles.php.
In articles.php, you will make calls to your database to update the article.
<?php
//this function will handle calls to your databse for updating the data
function update_article()
{
//you can access the data using the $_POST array.
//For example, $_POST["title"] contains the article title
//depending on your table structure the update call will look something like this...
//UPDATE articles SET title=$_POST["title"], body=$_POST["article"] where id=<some_id>;
}
/*
* update article when save clicked
*/
if(isset($_POST["save"]))
{
update_article();
}
?>
I hope you found this tutorial helpful. Your feedback is always appreciated.
Want to learn how to build AJAX applications fast? Download
"How To Build Your Own AJAX Web Applications"
| Top |