Edit-in-place with AJAX
As soon as AJAX became familiar, everyone wanted to implement AJAX in all the website sections. With this new technology, the interface became more accessible and faster. We shall pass beyond the CRUD (create/read/update/delete) applications and try to develop our own AJAX-CRUD.
AJAX represent the passing to the second generation of web technologies. I will start with a introduction of a simple technique of edit-in-place for a form and then I will extend this to a form with a lot of fields. I will use the prototype framework.
Lets see the HTML markup:
<h2>Edit in place</h2> <div id="listing"> <p id="l1">This is a paragraph</p> <p id="l2">This is another paragraph</p> <p id="l3">This is the third one</p> </div>
Now lets pursue the JavaScript code:
Event.observe(window, 'load', init, false);
This is a prototype event witch call the init() function when the page is loaded. In this function we will put another events witch associates the left click on paragraphs with other functions.
function init(){
listing = document.getElementById('listing').getElementsByTagName('p');
for(var i=0;i<listing.length;i++){
makeEditable(listing[i].id);
}
}
The listing variable is the handler to the div component. Then, we will iterate through all the elements witch has the tagName=’p’ and we will launch a function for every paragraph. Every paragraph must have an id. The makeEditable(id) function attribute the onClick event.
function makeEditable(id){
Event.observe(id, 'click', function(){edit($(id))}, false);
}
The edit function has to do more actions. First of all it will have to hide the editable element (in our case the paragraph). Then it has to add it in the DOM , after the hidden paragraph, a textarea witch contains the text from paragraph and two buttons (one for Cancel and one for Submit). In the end, it will have to assign events for the two buttons onClick.
function edit(obj){
Element.hide(obj);
var textarea ='<div id="'+obj.id+'_editor">< textarea id="'+obj.id+'_edit" >'+obj.innerHTML+'</ textarea >';
var button = '<input type="button" value="Send" id="'+obj.id+'_save" /> OR <input type="button" value="cancel" id="'+obj.id+'_cancel" /></div>';
new Insertion.After(obj, textarea+button);
Event.observe(obj.id+'_save', 'click', function(){saveChanges(obj)});
Event.observe(obj.id+'_cancel', 'click', function(){cleanUp(obj)});
}
First of all we will have to observe the name gave to the elements because we will need this in the next functions. Every element is preceded by the object id (obj.id) and “_editor”, “_edit”, “_save” and “_cancel” for div, textarea, submit and cancel buttons. Now we will have 2 more functions cleanUp make for disappearing the div, text area and the two buttons and saveChanges used for saving the dates.
function cleanUp(obj){
Element.remove(obj.id+'_editor');
Element.show(obj);
}
function saveChanges(obj){
var new_content = escape($F(obj.id+'_edit'));
obj.innerHTML = 'Saving';
cleanUp(obj, true);
var success = function(t){editComplete(t, obj);}
var failure = function(t){editFailed(t, obj);}
var url = 'edit.php';
var pars = 'id=' + obj.id + '&content=' + new_content;
var myAjax = new Ajax.Request(url, {method:'post',
postBody:pars, onSuccess:success, onFailure:failure});
}
The cleanUp() function destroy the element obj.id+“_editor” – divul – and bring back the initial element - the paragraph. SaveChanges() take over the content form textarea(id:obj.id+”_edit”), show the “Saving” text and call for the cleanUp function for destroy the textarea and buttons. Then the function make a standard AJAX call for a file, here edit.php, witch will return the new content. We will need two more functions: one in case of error and the other one to show the content in obj.
function editComplete(t, obj){
obj.innerHTML = t.responseText;
}
function editFailed(t, obj){
obj.innerHTML = 'Updateul a dat gres.';
cleanUp(obj);
}
The form will be sent through POST, so in edit.php we can undertake the two variables id and content from $_POST. We can make a query for UPDATE, and display the new content for being returned to script.
Post a comment
RSS/XML