[TUTORIAL] Ajax com CakePHP - parte 1

Olá pessoal, com este primeiro post falarei um pouco sobre ajax no CakePHP.

Esta é apenas a parte 1, e veremos apenas o básico, com o passar do tempo irei postando mais aqui no blog.

Pré-requisitos

* Conhecimento básico sobre o framework CakePHP

Conteúdo

Antes de fazer qualquer coisa, precisamos baixar o framework prototype a biblioteca scriptaculos. Teoricamente você só precisa do prototype, o scriptaculos apenas cuida dos efeitos. E para os amantes de jQuery, não se desesperem, no final eu deixei uma solução para vocês ;D

Primeiro de tudo vamos adicionar os helper Javascript, que incluirá o prototype em nossa app, e o helper Ajax que fará a mágica acontecer.

<?php
 class AlgumController extends AppController {
 var $name = 'Algum';
 var $helpers = array('Javascript' , 'Ajax');
 var $uses = null;
}
?>

Na requisição, precisaremos da action que conterá o link (index), e outra action que renderizará o view para quando o link for clicado (actionajax).

<?php
 class AlgumController extends AppController {
 var $name = 'Algum';
 var $helpers = array('Javascript' , 'Ajax');
 var $uses = null;
function index(){

}
function actionajax(){

$this->layout = 'ajax';

}

?>

Perceba que na action "actionajax" estamos utilizando o layout de ajax. O layout "ajax" é apenas um layout vazio, e já vem por padrão no cake. Isso é necessário, pois se utilizássemos o layout default, incluiria não apenas o conteúdo que queremos, mas também o layout todo.

Nosso controller já esta pronto, agora basta fazer os views.

actionajax:

<p>Conteúdo resgatado por Ajax.</p>
index:

<?php
// Incluimos o framework
echo $javascript->link('prototype' , false);

// O destino a ir quando o javascript estiver desabilitado
$href = array('action' => 'actionSemAjax');

$options = array(

 'update' => 'conteudoAjax', // Id do elemento que desejamos alterar
 'url' => array('action' => 'actionajax'), // Onde buscar o conteudo
);
echo $ajax->link('Efetuar requisição remota.' , $href , $options);
?>
<div id="conteudoAjax"></div>

Em index, antes de tudo, incluimos o prototype que cuidará da requisição para nos.

Logo depois definimos uma variável $href. Esta variável é um parâmetro do método link - Ajax::link() - e será o conteúdo do atributo "href" da tag "a", isto é interessante, pois mesmo o usuário não tendo o javascript ele poderá ser encaminhado para uma outra action ou até a mesma (action) se utilizado o componente RequestHandler - falarei dele num outro post.

Depois vem $options, que é o parâmetro mais importante daqui. O índice "update" aponta para o ID do elemento HTML que será atualizados com as novas informações. E o índice "url" deverá apontar onde você quer buscar as informações, atenção que este índice sobrescreve $href.

Logo abaixo reunimos tudo o que definimos para formar o link, já pronto para efetuar a requisição. Para mais detalhes no método, veja na API.

E por ultimo, criamos nosso elemento HTML que será atualizado quando "link" for clicado.

Se você não quiser atualizar a div com o conteúdo, mas sim inserir antes ou depois do que ja esta presente na div, basta utilizar o índice "position", veja um exemplo:

$options = array(

 'update' => 'conteudoAjax', // Id do elemento que desejamos alterar

 'url' => array('action' => 'actionajax'), // Onde buscar o conteúdo

 'position' => 'after' // Adiciona depois do conteúdo da div

 );
 Position pode conter: top, bottom, after, ou before

OK! Esta funcionando, mas não fizemos o mais legal, que é ver aquele loader do ajax dando voltinhas enquanto carrega -

Fazer isso é muito fácil, basta de apenas mais duas linhas.

Primeiro vamos colocar a imagem no view:

<img src="caminho/ajax-loader.gif" id="ajax-loader" style="display: none" />

E depois basta adicionar o índice "indicator" em $options, indicando o ID do elemento que deverá aparecer enquanto a requisição é carregada:

$options = array(

 'update' => 'conteudoAjax', // Id do elemento que desejamos alterar

 'url' => array('action' => 'actionajax'), // Onde buscar o conteúdo

 'indicator' => 'ajax-loader' // ID do loader

);

Funciona!

E ficamos por aqui =D, esta foi apenas a primeira parte, nas próximas, falaremos de coisas um pouco mais avançada, esta foi mais para pegar uma base ;D

Não perca tempo e pega logo seu ajax loader personalizado: http://www.ajaxload.info/

Até a próxima o/

Ah é! Já ia me esquecendo. Para quem usa jQuery, teve um cara que fez seu próprio AjaxHelper parecido com o original, só que utilizando jQuery, você pode efetuar o download dele aqui: http://loadsys.com/files/jquery_ajax_helper.zip

Atenção que não é completo que nem o padrão do cake, mas vem com os métodos mais utilizados.

FONTE: http://lucaspelegrino.com/