element.observe('click'... non aspetta il click!?

**ajaxSensitive** · 20-01-2010, 20:31

Ciao a tutti!

Ho scritto un semplice script che dovrebbe fare:

1 Se 'click' sull'elemento editalo (appare un form)
2 Quindi non osservare più l'elemento
3 Quando viene premuto il bottone "salva" modifica l'elemento
4 Ri-osserva l'elemento, se viene premuto vai al passo 1, altrimenti non fare nulla

(il passo 2 perchè altrimenti cliccando anche su "input type text" viene eseguito il passo 3)
Il mio problema è che al passo 4 "altrimenti non fare nulla" non viene eseguito, ma ritorna sempre al
passo 1.. ??

ecco il passo 4:
element.observe('click', this._edit.bind(this, element));
Non aspetta il click!!! perchè?

ecco il breve codice: (ho messo un alert, per essere più chiaro...)

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="./js/prototype.js"></script>

	<script type="text/javascript">
	
	var edita = Class.create();

	edita.prototype = {

    	initialize : function (element) {
				element.observe('click', this._edit.bind(this, element));
			},
			
		_edit : function(element) {
				element.stopObserving('click');
				var form = new Element('form');
				form.name = "edit";
				var input = new Element('input');
				input.type = 'text';
				input.value = element.textContent;
				var b = new Element('button');
				b.innerHTML = "salva";
				b.observe('click', this._salva.bind(this, element));
				element.update();
				element.insert(form);
				form.insert(input);
				form.insert(b);
			},
			
		_salva : function(element) {
				var content = element.down('input').value;
				element.down('form').remove();
				element.update();
				element.innerHTML = content;
				alert("FIN QUI OK! MA ADESSO... NON ASPETTA L'EVENTO CLICK:");
				element.observe('click', this._edit.bind(this, element));
			}
	};
	
	var a = function () {
		var es = new edita($("aaa"));	
	}
	document.observe("dom:loaded", a);
	
	</script>

</head>
<body>
<div id="aaa">CLICCAMI</div>    
</body>
</html>

**artorius** · 21-01-2010, 12:09

È che fai un pelo di confusione con la propagazione degli eventi:

Osserva questo HTML

codice:

<body onclick = "alert('È stata cliccata la pagina');">
   


       Questo è un  link sul quale è legata una funzione sull'evento onclick.
   </p>
</body>

Ora ci sono 4 Element Innestati:
il Body
Un Paragraph
Un Bold
Un Anchor

Sull'Anchor (il link) è impostato un evento onclick, quando viene lanciato, dopo l'esecuzione sull'elemento, viene PROPAGATO, ovvero vengono lanciate le funzioni associate allo stesso evento su ciascun element padre in sequenza, quindi, viene lanciato l'onclick sul Bold (che è vuoto), sul Paragraph (stesso) e poi sul Body che fa l'alert.

Il tuo problema in questo senso è che quando nella funzione _salva riapplichi l'observe sull'elemento, sei ancora nell'evento onclick del bottone, contenuto nell'elemento, quindi quando la funzione si conclude viene lanciato l'evento onclick del element, in quanto contenitore.

Puoi ovviare il problema utilizzando la funzione stop() dell'evento in corso, inoltre ti conviene usare la funzione bindAsEventListener, non bind, in modo da passare alla funzione anche l'evento come argomento.

http://api.prototypejs.org/language/...nstance_method

Un ultimo consiglio, dato che imposti lo scope delle funzioni sempre all'oggetto edita in corso, perché non salvi l'elemento al suo interno? ti basta fare this.element = $(element) come prima riga dell'initialize, in modo che, in qualunque punto delle funzioni facendo this.element ottieni l'elemento su cui è chiamata la classe.

codice:

var edita = Class.create();

edita.prototype = {
	initialize : function (element) {
		this.element = $(element);
		this.element.observe('click', this._edit.bindAsEventListener(this));
	},
			
	_edit : function(event) {
		event.stop();
		this.element.stopObserving('click');
		var form = new Element('form');
		form.name = "edit";
		var input = new Element('input');
		input.type = 'text';
		input.value = this.element.textContent;
		var b = new Element('button');
		b.innerHTML = "salva";
		b.observe('click', this._salva.bind(this));
		this.element.update();
		this.element.insert(form);
		form.insert(input);
		form.insert(b);
	},
			
	_salva : function(event) {
		event.stop();
		var content = this.element.down('input').value;
		this.element.down('form').remove();
		this.element.update();
		this.element.innerHTML = content;
		this.element.observe('click', this._edit.bindAsEventListener(this));
	}
};

**ajaxSensitive** · 21-01-2010, 15:23

Perfettissimo!
Grazie Artorius! Sei stato gentilissimo e chiarissimo!
Con la funzione stop() ho risolto!!!

Faccio qualche prova poi metto un bel risolto!

**artorius** · 21-01-2010, 15:26

comunque, tu sei consapevole che esiste una libreria chiamata Scriptaculous che implementa, tra le altre cose, anche un widget chiamato Ajax.InPlaceEditor che fa esattamente quello che vuoi tu?

http://wiki.github.com/madrobby/scri...-inplaceeditor

**ajaxSensitive** · 21-01-2010, 19:55

Eheh! non lo sapevo! Grazie!

Ora provo con scriptaculous!
Però vorrei prima farti una domanda...:

new Ajax.InPlaceEditor( element, url, {options});
element è l'elemento che vorrei editare
url è l'indirizzo al quale verrà passata la modifica, quindi ad esempio una pagina PHP (lato server)
options sono le opzioni come l'altezza, la larghezza ecc...

ma se io volessi passare all'URL (es una pag PHP, che si occuperà di dialogare con il DB) più dati, come dovrei fare?
Forse una cosa del genere?:
Ajax.InPlaceEditor( element, /pagina.php?n="1");
giusto? O si può fare qualcosa d'altro?

Forse è una domanda banale, sciocca... ma sono alle prime armi...

Grazie!!!

**artorius** · 22-01-2010, 10:26

Per più dati intendi più campi input contemporaneamente? Beh, per quello ti basta farne N di InPlaceEditor.

Es:

codice:

<div id="Uno">
   Value 1
</div>
<div id="Due">
   Value 2
</div>
<div id="Tre">
   Value 3
</div>

Poi chiami 3 volte lo script:

codice:

new Ajax.InPlaceEditor('Uno', '/pagina.php');
new Ajax.InPlaceEditor('Due', '/pagina.php');
new Ajax.InPlaceEditor('Tre', '/pagina.php');

Nella pagina PHP controllo il parametro passato editorId che contiene l'ID dell'elemento su cui chiami Ajax.InPlaceEditor (il primo parametro) e, a seconda di quello, aggiorno un campo o un altro.

Puoi anche fare una cosa un po' più in tema Google:

codice:

var opts = {okControl : false, cancelControl: false, submitOnBlur: true};
new Ajax.InPlaceEditor('Uno', '/pagina.php', opts);
new Ajax.InPlaceEditor('Due', '/pagina.php', opts);
new Ajax.InPlaceEditor('Tre', '/pagina.php', opts);

Con quei parametri i dati vengono infiati quando l'input perde il focus, senza il bisogno di bottoni.

**ajaxSensitive** · 22-01-2010, 11:47

Nella pagina PHP controllo il parametro passato editorId che contiene l'ID dell'elemento su cui chiami Ajax.InPlaceEditor (il primo parametro) e, a seconda di quello, aggiorno un campo o un altro.

Ok!
Ma intendevo passare altri parametri.... mettiamo caso che ho una tabella, e non posso assegnare ad ogni TD un ID, allora dovrei ritornare il testo modificato, ma anche un numero che indica l'indice dell'elemento... O cosa dovrei fare? O come si risolve in questo caso?

Posso realizzare questo con Ajax.InPlaceEditor?
Posso anche passargli dall'esterno l'URL giusto?
del tipo:
function editaElemento(element, url, option) {
new Ajax.InPlaceEditor(element, url, option);
}

**artorius** · 22-01-2010, 12:09

Apri il link che ti ho postato e scrolla verso il basso fin dopo la seconda demo. Troverai un paragrafo:
"How to specify a different name for the parameter sent to the server"

Li c'è un esempio che fa quello che ti serve.

**ajaxSensitive** · 22-01-2010, 12:10

Ok ora controllo!

(probabilmente mi sbaglio... probabilmente id="..." si puà assegnare a tutti i tag...
comunque vorrei sapere se è possibile passare più valori e non solo l'elemento modificato...)

**ajaxSensitive** · 22-01-2010, 12:17

Si hai ragione! è quello che cercavo!!!! =)
Ora faccio 2 prove!

Grazie 1000! ti darò buone notizie! (spero..

)!!!!

Discussione: element.observe('click'... non aspetta il click!?

Strumenti discussione

Ricerca discussione

Visualizza

element.observe('click'... non aspetta il click!?

Permessi di invio