Edit-in-place cu AJAX

Edit-in-place cu AJAX Am facut foarte multe aplicatii de tip CRUD – create/read/update/delete - si nici macar una singura nu a fost putin diferita de celelalte. Desigur, am descoperit la un moment dat si PEAR::DB si Scaffoldingul din frameworkurile MVC. Insa chiar si cu acestea, CRUD-urile mele nu s-au schimbat foarte tare.

O data ce a intrat in scena AJAX, implementarea lui in toate sectiunile unui website a devenit de dorit pentru oricine. Cu AJAX, interfata devine mult mai accesibila si mai rapida. Nu credeti ca e timpul sa trecem dincolo de aplicatiile CRUD obisnuite si sa ne dezvoltam propriul AJAX-CRUD? Trecerea la AJAX inseamna schimbarea unui P4 cu un Intel Core 2 nou nout – se poate si fara, dar e mult mai bine cu.

AJAX reprezinta trecerea la generatia a doua a tehnicilor web. O multime de front-end-uri sclipitoare si colorate il folosesc, iar CRUD-ul si-a asteptat deja prea mult randul. Un CRUD imbogatit cu AJAX ar arata extraordinar daca ar fi pus la treaba de un scaffolding, asa ca exact acest lucru mi-l propun prin urmatoarea serie de articole.

Voi incepe prin prezentarea unei tehnici simple de edit-in-place pentru un camp de formular, urmand ca, mai apoi, sa extind aceasta tehnica pentru un form cu mai multe campuri. Vom folosi frameworkul prototype, insa ma bate gandul sa incerc o transpunere si pe jQuery, pentru ca este un framework foarte rapid. Daca imi va cere cineva, o voi face.

Haideti sa vedem markupul HTML.

<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>


Vom folosi div-ul care incapsuleaza elementele pentru a le selecta automat. Si acum, sa o luam pas cu pas in codul javascript.

Event.observe(window, 'load', init, false);


Este un event prototype care cheama functia init() atunci cand fereastra s-a incarcat. In functia init() vom plasa alte eventuri, care vor asocia clickul stanga dat pe paragrafe cu o alta functie.

function init(){
listing = document.getElementById('listing').getElementsByTagName('p');
for(var i=0;i<listing.length;i++){
makeEditable(listing[i].id);
}
}


Variabila listing este handle-ul catre div. Apoi iteram printre toate elementele care au ca tagName “p” si pornim o functie pentru fiecare paragraf. Atentie! Fiecare paragraf trebuie sa aiba un id, pe care il vom folosi mai incolo pentru a il recunoaste in DOM. Functia makeEditable(id) atribuie eventul de onClick de care vorbeam.


function makeEditable(id){
Event.observe(id, 'click', function(){edit($(id))}, false);
}


Functia de editare trebuie sa faca mai multe lucruri. In primul rand, va trebui sa ascunda elementul editabil (in cazul nostru, paragraful pe care am dat click). Apoi, va trebui sa adauge in DOM, dupa paragraful ascuns, un textarea care sa contina textul din paragraf si doua butoane, unul pentru cancel, unul pentru submit. In cele din urma, va trebui sa asigneze eventuri pentru onClickul celor doua butoane.


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)});

}


In primul rand, trebuie sa observam numele date elementelor, pentru ca vom avea nevoie de ele in functiile urmatoare. Fiecare element este precedat de id-ul obiectului (obj.id) si “_editor”, “_edit”, “_save” si “_cancel” pentru div, textarea, butonul de submit si respectiv butonul de cancel. Include totul intr-un div pentru a ne fi usor sa le ascundem apoi. Observam ca mai avem doua functii de scris: cleanUp si saveChanges. Prima trebuie sa faca sa dispara divul cu textarea si cele doua butoane, iar a doua trebuie sa faca ceva in plus: sa salveze datele.


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});
}


Functia cleanUp distruge elementul obj.id+“_editor” – divul – si readuce in pagina elementul initial – paragraful pe care am dat click. Functia saveChanges preia continutul din textarea (id:obj.id+”_edit”), arata textul de “Saving” si cheama functia cleanUp pentru a distruge textareaul si butoanele. Apoi, functia face un call AJAX standard din prototype pentru a chema un fisier, aici edit.php, care va intoarce noul continut.Vom vedea ca mai avem nevoie de doua functii: una in caz de eroare si una care sa afiseze noul continut in obj – paragraful pe care l-am clickuit mai devreme.


function editComplete(t, obj){
obj.innerHTML = t.responseText;
}

function editFailed(t, obj){
obj.innerHTML = 'Updateul a dat gres.';
cleanUp(obj);
}


Formul va fi trimis prin POST, asa ca in edit.php putem sa preluam cele doua variabile id si content din $_POST. Putem face un query de UPDATE in baza de date, si apoi afisa noul continut pentru a fi returnat catre script, care il va afisa in paragraful respectiv.

Sper ca am fost destul de explicativ. Avem desigur si un exemplu, unde gasiti un fisier .js comentat cu toate functiile de mai sus. Data viitoare vom expanda acest exemplu la un form intreg.

Nu stiam de asta . Gj !