Prototype & Scriptaculous - tips & tricks

Prototype & Scriptaculous - tips & tricks

Alcuni trucchi che vi potrebbero aiutare nella quotidianità con Prototype e Scriptaculous.

Passare più campi alla funzione Ajax.Autocompleter

A chi fa uso intensivo del framework Prototype accompaganto da Scriptaculous, sarà capitata la necessità di passare più campi alla funzione Ajax.Autocompleter.
Ovviamente è capitato anche a me, e questa è la soluzione che ho addottato:

Aprite il file controls.js, andate alla riga 351 (dopo

if(this.options.defaultParams)
   this.options.parameters += '&' + this.options.defaultParams;"

) ed inserite le righe seguenti:

if(this.options.fields) {
   for (var i=0; i < this.options.fields.length; i++) {
      this.options.parameters += '&' + this.options.fields[i] + '=' + $F(this.options.fields[i]);
   }
}

A questo punto, vi basta aggiungere alla chiamata di Ajax.Autocompleter il parametro fileds ed il gioco è fatto.
Ecco un esempio:

new Ajax.Autocompleter('campo', 'campo_suggest', 'xml/xml_suggest_campo.php', { fields: ['id_altro_campo'] });

Ajax.Autocompleter attivazione al doppio click

Ho esteso le funzionalità di Ajax.Autocompleter permettendo l'apparizione dei suggerimenti anche a campo vuoto tramite il doppio click sul campo.

Se siete interessati, ecco come fare:


Aprite il file controls.js ed andate alla riga 88, qui inserite il seguente codice

// credits Riccardo Slanzi | http://www.riccardoslanzi.com
Event.observe(this.element, "dblclick", this.onDblClick.bindAsEventListener(this));

Fatto questo, andate alla riga 301 ed inserite le righe di codice seguenti:

// credits Riccardo Slanzi | http://www.riccardoslanzi.com
onDblClick: function() {
   this.changed = false;
	this.hasFocus = true;
	this.startIndicator();
	this.getUpdatedChoices();
},

Fatto questo, aprite la vostra pagina con il campo Ajax.Autoupdater e provate a farci doppio click sopra!

Ulteriore modifica al doppio click

Dopo aver implementato il doppio click in Ajax.Autocompleter e vista la comodità di tale funzione, ho deciso di migliorarlo eliminando il fastidio di dover svuotare a mano il campo autocompletato nel caso di un secondo doppio click.

Come fare? Semplice! Se avete già implementato il doppio click, andate alla riga 303 ed inserite il seguente codice:

this.element.value = ""; // al doppio click svuoto il campo!

Quindi il blocco completo di codice per il doppio click sarà:

onDblClick: function() {
   this.element.value = ""; // al doppio click svuoto il campo!
   this.changed = false;
	this.hasFocus = true;
	this.startIndicator();
	this.getUpdatedChoices();
},

PS: vi pregerei di mantenere i credits intatti, grazie.

Ultima modifica: sabato 10 ottobre 2020

Ancora nessun commento presente

Che ne dici di essere il primo?

Aggiungi il tuo commento

Iscriviti alla mia newsletter

Resterai informato sugli ultimi post, appena verranno pubblicati