„Edit In Place” Folosind jQuery

Submitted by ntz on Vin, 2007-06-15 17:03
Average: 4.3 (6 votes)

În urmă cu câteva zile, am primit un task destul de înteresant de la un client: aşa numitul „edit in place” (EIP). Cum la tot site-ul am folosit jQuery (deoarece mi se pare mai simplu decât prototype, iar alături de interface-ul făcut de eyecon este chiar mai tare), am vrut să folosesc un EIP făcut tot cu jquery, mai ales că toate plugin-urile găsite nu m-au satisfăcut pe deplin.

Trebuie să precizez că nu sunt un „guru” al javascriptului, din contră, încă fac primii paşi. Nu spun că aceasta este cea mai bună soluţie pentru EIP, doar că această soluţie s-a potrivit cel mai bine nevoilor mele.

Intervenţiile la fişierul html existent sunt minore, tot „secretul” fiind în js. Astfel, codul HTML ce va fi editat este următorul:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Edit in place - jQuery example</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css" media="all">
span.editable{
	width:250px;
	display:block;
	border:1px dotted #eee;
	cursor:pointer;
}
</style>
</head>
<body>
<span class="editable" id="editable">Edit in place</span>
</body>
</html>

Cu acest cod, rezultatul este, aşa cum probabil te-ai fi aşteptat, banal şi nu face nimic altceva decât să afişeze un SPAN stilizat astfel încât să semene cu un INPUT şi includem librăria jQuery.

Primul pas
este transformearea SPAN-ului obi?nuit într-unul s? ac?ioneze într-un fel la onclick:

function setClickable() {
$('.editable').click(function() {
	inputID = this.id;
	editBox = '<input type="text" name="'+inputID+'"  class="inplaceEdit" value="'+$(this).html()+'" onblur="saveChanges(this);" id="'+inputID+'" />';
	$(this).after(editBox).remove();
	window.setTimeout("document.getElementById('"+inputID+"').focus();", 10);
})}

Ce se întâmplă?
1. definim funcţia setClickable()
2. toate elementele care au clasa editable vor fi „sensibile” la click
3. span-ul trebuie să aibe un ID. Acest id va fi trimis mai departe, spre server, ca şi name-ul input-ului şi este util când sunt mai multe SPAN-uri editabile.
4. definim variabila editBox ce conţine INPUT-ul, astfel încât, valoarea iniţială să fie conţinutul span-ului.
4.1 adăugăm o funcţie la onblur.
5. folosind jQuery, adăugăm INPUT-ul ăi stergem SPAN-ul.
6. setăm focus pe INPUT-ul proaspăt creat, astfel încât să putem scrie după un singur click. Am ales să pun o întârziere a focus()-ului deoarece există probleme pe unele browsere.

Prima parte, cea care transformă un SPAN într-un INPUT este gata. Nu mai trebuie decât să facem astfel încât să se ruleze această funcţie la încărcarea paginii:

$(document).ready(function() {$("span.editable").each(function(){setClickable()})});

Al doilea pas
Constă în salvarea datelor introduse. Salvarea, aşa cum am mai precizat, se face atunci când INPUT-ul nu mai are focus.

function saveChanges(obj) {
obj.className += " inplaceSave";
t = obj.value;
if(t=='') t='(click to add text)';
	$.post("?id="+inputID,t, function(){
		var afiseaza = '<span class="editable" id="'+inputID+'">'+t+'</span>';
	$(obj).after(afiseaza).remove();
	setClickable();
	})}

ce se întâmplă:

1. în momentul când INPUT-ul îşi pierde focus-ul, acesta primeşte încă o clasă în CSS : inplaceSave, utilă pentru evidenţierea operaţiei de salvare.
2. se trimite prin POST con?inutul INPUT-ului.
3. Dacă trimiterea s-a efectuat cu succes, se înlocuieşte INPUT-ul cu SPAN-ul iniţial şi se re-execută funcţia setClickable.

Dacă adăugaţi aceste funcţii ţi următorul CSS

input.inplaceEdit {
	border:1px solid #ddd;
	width:250px;
}
input.inplaceSave {
	border:1px solid #c00;
}

în fişierul iniţial, aveţi urm?torul rezultat: click.

Tags:
1.
Submitted by kent (neverificat) on Mar, 2010-08-10 08:14.

oh i see. i haven't made mine working just yet.
adult add treatment | adult adhd treatment

2.
Submitted by kennyh on Joi, 2010-08-26 23:22.

I am also in the same boat. Hopefully mine will work soon. But this is a great resource. online computer degrees and online degree in psychology

3.
Submitted by zoliky on Vin, 2008-09-12 12:23.

Nu stiu de ce te complici cu ".remove()" deoarece pierzi evenimentul. Mai bine incearca hide() sau clone().
Eu am scris un alt cod care functioneaza perfect si nu ma complic cu setClickable().

4.
Submitted by disosawilliams (neverificat) on Sâm, 2010-07-10 07:11.

Nu stiu de ce te complici cu ".remove()" deoarece pierzi evenimentul. Mai bine incearca hide() sau clone(). dissertation proposals | humanities term paper