Effetti JQuery in CakePHP 1.3

Con CakePHP 1.3 è possibile sfruttare altri framework Javascript oltre all’accoppiata Prototype/Scriptaculous utilizzando il JsHelper.
Per utilizzare JQuery è sufficiente seguire le istruzioni del manuale on line http://book.cakephp.org/view/1592/Js che riassumo di seguito.

  1. Scaricare JQuery http://docs.jquery.com/Downloading_jQuery
  2. Copiare gli script in app/webroot/js
  3. Includere la libreria in tutte le pagine. Per fare questo si può modificare il file /app/views/layout/default.ctp inserendo il codice
    echo $this->Html->script('jquery-1.4.2.min');

    nella sezione <head></head>.

  4. Includere il seguente comando
    echo $js->writeBuffer();

    prima del tag </body>

  5. Richiamare il JsHelper inserendo il seguente codice nel controller
    var $helpers = array('Js' => array('Jquery'));

A questo punto siamo pronti per utilizzare gli effetti di JQuery nelle nostre views

Nella view inseriamo il seguente codice che permette di mostrare o nascondere un DIV con effetto slide.
Creiamo i link e il box

<a href="#" id="apri">Apri il box</a> | <a href="#" id="chiudi">Chiudi il box</a>
<div id="box" style=" border: 1px solid green; height:200px; width:100px; display:none"></div>

e poi aggiungiamo il codice PHP

 $apri = $js->get("#box")->effect('slideIn');
 $chiudi = $js->get("#box")->effect('slideOut');
 $js->get("#apri")->event('click', $apri );
 $js->get("#chiudi")->event('click', $chiudi );

Volendo includere un effetto non disponibile con JsHelper è possibile inserire del codice nativo JQuery e riutilizzarlo nel seguente modo

$codice = '$("#box").toggle("blind",{},500);';
$js->get("#toggle")->event('click', $codice );

6 comments for “Effetti JQuery in CakePHP 1.3

  1. 20 novembre 2010 at 15:04

    sono riuscito a farlo andare forzando l’inclusione ‘inline’. Se ti dovesse servire, il procedimento descritto funziona ed è interpretato dal browser in quanto il codice è parte integrante della view, anche se caricata in async.
    Lo uso spesso per le procedure di backend e soprattutto con il metodo requestAction(…, array(‘return’)) così da utilizzare la stessa view e tutta la sua logica in più punti dell’applicativo.

    Ti ringrazio per la risposta e complimenti per il blog.

  2. 20 novembre 2010 at 8:59

    @Mattia: premetto che non sono un esperto di JQuery né di Javascript, ma ragionando sul funzionamento del WEB posso azzardare un’ipotesi.
    Quando carichi una pagina web, il browser fa un parsing dei dati ricevuti e riconosce e interpreta il codice javascript incorporato (o collegato) alla pagina stessa.
    Quando richiami dei dati con AJAX non coinvolgi il browser più di tanto, ma deleghi al codice JS di funzionare come un browser inoltrando una richiesta a un server con protocollo HTTP e impiegare i dati ricevuti per inserirli nel contenuto della pagina corrente.
    A parte la terminologia poco accademica, il motivo del non funzionamento del javascript nelle view è che non viene processato dal browser e quindi non viene invocato.
    Ad invocare gli script della tua view dovrebbe essere proprio lo script che invoca la chiamata AJAX, ma purtroppo al momento non ho idea di come poter fare.

  3. 18 novembre 2010 at 9:01

    Dimenticavo, senza l’utilizzo di ajax layout, quindi con un comportamento normale di richiesta delle risorse, funziona tutto perfettamente.

  4. 18 novembre 2010 at 9:00

    Avrei un piccolo problema e forse mi puoi aiutare.
    Lo scenario è il seguente: carico una view tramite jquery ( quindi la view usa ajax layout) e nella view ho bisogno di includere javascript al runtime. Il problema è che non include gli script utilizzando echo $this->Html->script(array(‘file1′,’file2’), array(‘inline’=>true, ‘evalScripts’=>true); idem valgasi se utilizzo $this->Js->get(‘#id’)->effect(…); e alla fine della view forzo pure l’output del buffer con $this->Js->writeBuffer();
    Ti è mai capitata una cosa del genere? Cosa potrebbe essere secondo te/voi?

    So che forse non è il posto giusto per postare questo messaggio ma non so più dove andare a cercare.

    Grazie in anticipo

  5. 31 agosto 2010 at 8:01

    Che cosa in particolare non funziona ? Hai provato a fare il debug con Firebug ? Fammi sapere.

  6. Giovanni
    30 agosto 2010 at 9:34

    Diamine non ho capito perche non funziona, sarebbe carino avere un esempio funzionante.

Lascia un commento

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