jQuery: Edit in Place


Pentru cei care nu au auzit de Edit in Place (sau Edit’n’Place) este o metodă de editare a unor informaţii chiar în pagina unde apar. Pagina care pare doar de afişare are, datorită AJAX, şi "proprietăţi" de formular. La un click pe un text, acesta apare într-un control input sau textarea, gata pentru editare. Într-o vreme foloseam şi pentru WordPress un plugin cu un comportament de acest gen. Cât de greu este de implementat folosind jQuery? Depinde de pretenţii. Dacă vreţi să folosiţi aşa ceva într-un proiect primul sfat este să vedeţi dacă nu există un plugin dezvoltat exact pentru aşa ceva. Materialul de faţă nu reprezintă o soluţie completă ci mai degrabă o introducere în temă.

img575

Puteţi să vedeţi pagina demonstrativă aici, iar arhiva o puteţi descărca de aici (dacă se vor înregistra abuzuri rămâne doar arhiva). Pentru ca lucrurile să fie mai uşor testabile în loc să folosesc o bază de date MySQL m-am folosit de un fişier txt (puteţi deci testa exemplul dacă aveţi server PHP local, fără obligativitatea unui server MySQL). În fişierul TXT am scris nişte date după următorul exemplu:

Nume Prenume|30|prenume@nume.ro

Aplicaţia citeşte fişierul TXT şi afişează datele primei persoane. Cu un click pe nume, vârstă sau email, respectivul text devine editabil. Cum am făcut aceasta? La tagul td am asignat onClick="editareF(’.$i.’);", unde variabila $i numără începând de la zero câmpurile (în cazul nostru trei) . În continuare aveţi funcţia invocată:

function editareF(i){
  if(toateInchise()){
    deschise[i]=1;
    textactual=$("#ed"+i).html();
    $("#ed"+i).html("<input size=30 value=’"+$("#ed"+i).html()+"’ id=camp>
    <img alt=’salveaza’ style=’cursor:hand;’ src=’salvare.gif’ hspace=2 id=salveaza 
    onClick=’"salveazaF("+i+",’"+textactual+"’);’">
    <img alt=’anuleaza’ style=’cursor:hand;’ src=’anulare.gif’ hspace=2 id=anuleaza 
    onClick=’"anuleazaF("+i+",’"+textactual+"’);’">");
  }
}

Verificăm mai întâi că nu există vreo editare deschisă: nu deschidem o nouă editare fără închiderea celei deschise. Apoi marcă ca deschisă editarea la câmpul cu numărul de ordine i. Salvăm în variaba textactual ce se află acum în respectivul câmp. Urmează înlocuirea câmpului care conţinea doar text cu un control input şi două butoane grafice pentru salvare, respectiv anulare. La ambele funcţii am transmis indexul pentru a şti al câtelea câmp prelucrăm, dar şi textul vechi. În cazul funcţiei de anulare a editării avem nevoie de textul vechi pentru a-l repune în tagul td. Codul este simplu: repunem textul vechi şi marcăm că nu mai este deschisă editarea.

function anuleazaF(i,textvechi){
  $("#ed"+i).html(textvechi);
  deschise[i]=0;
}

La salvarea datelor lucrurile sunt evident puţin mai complicate. În primul rând ne asigurăm că textul nu conţine taguri HTML folosindu-ne de expresii regulare. Apoi punem în tagul td noul text, dar mai rămâne esenţialul: să şi salvăm modificarea. Pentru aceasta, dacă textul vechi diferă de textul nou (nu vrem să folosim serverul degeaba), constituim linia de scris în fişierul TXT pe care o transmitem apoi prin AJAX. Descărcaţi arhiva pentru a vedea fişierul salveaza.php – doar 20 de linii de cod.

function salveazaF(i,textvechi){
  textactual = ""+$(’#camp’).val();
  expr= /<’S[^><]*>/g;
  textactual=textactual.replace(expr, "")
  $("#ed"+i).html(textactual);
  if(textactual != textvechi){ 
    linia = "";
    for(j=0;j<cate;j++){
      linia += $("#ed"+j).html();
      if(j!=(cate-1))
        linia +="|";
    }
    $.blockUI();
    $.post("salveaza.php",{linia: $(’#liniacrt’).val(), text: linia}); 
  }
  deschise[i]=0;
}

Exemplul propus este complicat de prezenţa butoanelor care fac trecerea la următoarea (sau anterioara) persoană. M-am folosit de un input ascuns în care am memorat linia curentă din fişierul text, adică a câta persoană.

function schimbaF(){
  if(!toateInchise())
    return;
  i = $(’#liniacrt’).val()-0+1;
  if(i<cate){
    $.blockUI();
    $.post("furnizeaza.php",{linia: i}, function(xml){
      for(j=0;j<cate;j++){
        camp = $("camp"+j,xml).text();
        $("#ed"+j).html(camp);
      }
      $(’#liniacrt’).val(i);
      butoaneSD(i);
    });
  }
}

În primul rând testăm să nu existe editare deschisă, altfel nu continuăm. Apoi calculăm linia următare (amintesc că cea curentă este salvată într-un input invizibil cu id-ul liniacrt). Dacă nu suntem la ultima persoană atunci putem merge mai departe. Prin AJAX cerem datele persoanei următoare, le citim prin XML şi le introducem în tagurile td. Apoi schimbăm indicele actual (liniarcrt) şi ne asigurăm ce butoane din navigarea înainte/înapoi trebuie să fie vizibile (funcţia butoaneSD).

Situl jQuery.com include un material pe această temă două exemple: nu l-am consultat pe nici unul (din acelaşi motiv: sunt încă pe dial-up). Am preferat să scriu unul de la zero, poate mai uşor de înţeles? Nu ştiu, apreciaţi voi. Aveţi arhiva cu fiecare rând de cod, deci transparenţă 100%. Poate vă va fi de folos într-un proiect mai mare, mai complex. Succes!


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (2 evaluări, media: 4,50 din 5)
Loading...Loading...

2 comentarii

  1. David spune:

    D-l Radu articolele dvs. sunt excelente.
    Am descoperit de 2 zile site cnet si mi se pare foarte folositor, iar in privinta jQuery ma bucur ca pot gasi articole in romineste si cu cod.
    As avea o intrebare se poate sa se editeze un combo box? Sau daca am un rind intr-o tabela si 4 coloane sa le editez si apoi sa le salvez?

  2. radu.capan spune:

    Stimate domn, multumesc. Editarea unui rand dintr-o tabela se poate face cu ceva gen Edit in Place dupa cum explicam mai sus. Poate chiar de la codul furnizat de mine. Am gasit ca tema a mai fost tratata in romana de WebDesignBox.ro. Mai mult, exista si un plugin din cate vad aici. Cat despre prima intrebare, recunosc ca nu am inteles prea exact.


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *