AJAX semplice semplice

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")); ?>

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *