Facciamo la stessa cosa con jQuery!:)

La prima cosa da fare è creare un DIV all’interno della nostra applicazione web che abbia un ID ben definito (nell’esempio l’ho chiamato “loading“) e nel foglio di stile andremo a dargli queste caratteristiche:


#loading{
position: fixed;
top: 0;
left: 0;
z-index: 5000;
background-color: red;
font-size: 150%;
color: white;
padding: 2px;
display:none;
}


Tramite la direttiva position: fixed e le coordinate di top e left ho posizionato il DIV nell’angolo in alto a sinistra dell’applicazione ed iniziamente non è visibile (display:none).

Adesso, tramite jQuery, facciamo in modo che ad ogni chiamata AJAX il DIV venga messo a video:


$(document).ready(function()
{
$("#loading").bind("ajaxSend", function(){
$(this).show();
}).bind("ajaxComplete", function(){
$(this).hide();
});
})

Non appena la richiesta AJAX termina il DIV viene di nuovo nascosto.

Buon javascript a tutti!:)

Ecco cosa fa jFrame:

Thanks to jQuery library, jFrame provides an easy way to get an HTML frame-like behaviour on DIV Elements with AJAX. It comes with Pimentech Scripts library. Also alvaiable on jQuery_site .

With jFrame, you can build smart, complex modern, internet apps without leaving the main page, without a single line of JavaScript !

A jFrame is a DIV tag with a src attribute. In a jFrame, click events on and input type=”submit” tags will be handled by jframe and loaded in ajax.

Aggiornando le versione di jQuery alla “current”, jFrame aveva smesso di funzionare.

La soluzione è semplice, basta aprire il file .JS di jFrame e sostituire:

div[@src]

con

div[src]

Va tolta la chiocciola perché dalle versione 1.2.6 di jQuery è stata deprecetata come selettore di attributo.

La componente Ajax di CakePHP si basa su Prototype ma, l’estrema flessibilità del framework, ci permette di includere qualsiasi altra libreria Javascript.

Io utilizzo jQuery perché, con poche e comprensibili istruzioni, permette di fare cose davvero straordinarie e quindi ho pensato di scrivere un helper per CakePHP che implementasse l’autocomplete facendo delle richieste Ajax al server tramite l’ausilio di jQuery.

Il mio helper si chiama “jmycake” perché verrà ampliato ogni qualvolta avrò la necessità di jQuery all’interno delle mie applicazioni.

Ecco come ho è strutturato l’helper:

jmycake helper file

La funzione autocomplete aggiunge un blocco di codice JavaScript che si occuperà di:

• modificare le caratteristiche dell’input sul quale verrà effettuato l’autocompletamento
• effettuare le richieste Ajax verso il server
• visualizzare i risultati in una lista selezionabile anche con le freccette della tastiera
• autocompletare i campi passati come parametro alla funzione

Nel file app_controller.php sarà necessario inserire questa funzione:

Funzione da inserire in app_controller.php

Eh, come il buon pattern MVC vuole, creare la relativa vista:

Autocomplete View

La vista ha lo stesso nome della funzione (autocomplete), con estensione .ctp visto che utilizzo CakePHP 1.2 ed io l’ho posizionata nella directory “common” ma il file può essere salvato dove si vuole a patto di modificare questa riga nell’app_controller:


$this->render('autocomplete','ajax','/common/autocomplete');


C’è da ricordarsi inoltre di inserire ‘Jmycake‘ nell’array $helpers del vostro controller insieme a ‘Html‘, ‘Form‘ e ‘Javascript‘:


var $helpers = array('Html','Form','Javascript','Jmycake');


Io l’ho inserito direttamente in app_controller.php così è ereditario in tutti gli altri controller.

Adesso inseriamo in una vista di prova l’autocomplete.

Supponiamo che abbiamo questa vista:

View standard

Se desideriamo l’autocompletamento sul campo “nation“, sarà sufficiente aggiungere dentro ai tag del form:

<?php echo $jmycake->autocomplete('NationNation','Nation/nation',array('NationId'=>'id','NationIso'=>'iso')); ?>

Così facendo all’input con id “NationNation” verrà aggiunto l’autocompletamento che prenderà i dati dal modello “Nation”, cercando, le lettere inserite attreaverso l’input, nel campo “nation” (ecco perché il secondo parametro è Nation/nation”).
L’array passato come ultimo argomento contiene gli id dei campi di input da riempire ed il nome del campo da cui prendere i dati nel database.
La funzione autocomplete ha anche altri due parametri facoltativi che sono:

1. il numero di risultati da visualizzare nella lista dell’autocomplete
2. la lunghezza minima della stringa per effettuare le richieste

Per finire, vi mostro il mio CSS che renderizza i risultati:

Foglio di stile per l’autocomplete

Ovviamente va incluso sia il foglio di stile sopra mostrato che la libreria jQuery che si può scaricare liberamente dal sito.

Spero di essere stato utile a qualcuno e di ricevere qualche feedback positivo.