Si vuole creare una pagina dove è presente un link e un DIV con funzioni da contenitore.
Si vuole che alla selezione del link il DIV venga popolato con una lista di elementi, ricavati da un database, sfruttando AJAX, quindi senza ricaricare l’intera pagina.
Requisiti necessari
Sul server devono essere installate le librerie Javascript prototype e scriptaculous e devono essere richiamate nella pagina. Inoltre il charset deve essere impostato a “UTF-8”.
Il controller
Nel controller devono essere richiamati gli helper necessari: Html, Javascript e Ajax.
Richiamando anche il component “RequestHandler” si potranno sfruttare funzionalità circa il rendering di layouts e template.
Il metodo index() imposterà la variabile che sarà stampata inizialmente nel contenitore.
Il metodo listcat() (o qualsivoglia nome) ricaverà la lista da stampare (in questo caso una lista di categorie).
Le view
index.ctp conterrà l’intera pagina corredata dei vari elementi necessari quali il titolo o menu, ecc. oltre al necessario contenitore DIV che verrà aggiornato con l’inserimento dei dati ricavati.
listcat.ctp invece conterrà la sola lista da stampare poichè rappresenta il contenuto che verrà inserito nel contenitore DIV.
Quindi è necessario ricordare che il sistema aggiornerà l’oggetto DOM con ciò che viene prodotto dalla view che l’action richiamata (listcat) ha prodotto.
Di seguito il codice di esempio.
Controller
set("lista","Vuoto");
}
function listacat(){
$this->set('lista',$this->Category->findAll());
}
}
?>Da aggiungere al Layout
charsetTag('UTF-8') ?>
link('prototype') ?>
link('scriptaculous.js?load=effects') ?>
View – listacat.ctp
{$cat['Category']['nome']}";
}
?>
View - index.ctp
Tests
link("Prova AJAX", "/tests/listacat",array("update" => "content")); ?>