[Resolvido] Ajax com CakePHP 2 - Parte 1

Galera, esses dias andei procurando como funcionava o Ajax no Cake 2, e encontrei poucos artigos sobre o assunto e pior sem didática alguma nos que encontrei.

Por isso vou escrever aqui um tutorial em 2 partes pra ver se ajuda a galera ai !

Nesse primeiro post irei mostrar apenas uma requisição em ajax, no próximo post eu ensino a pegar as mensagens de erro geradas pela validação do Model !

Pré requisitos:

• Saber o que é Ajax e uma noção de como funciona !
• Conhecimentos básicos em CakePHP

Conteúdo

No Cake 2 os Helpers "Ajax" e "Javascript" foram substituidos pelo Helper "Js" e o framework javascript padrão agora é Jquery, então vamos adicionar ele no nosso controller

public $helpers = array('Js');

caso voce utilize outro framework voce pode seta-lo assim:

public $helpers = array('Js' => array('Prototype'));

e vamos adicionar tambem o componente "RequestHandler", ele vai verificar pra gente se a requisição feita foi por Ajax, ou não !

public $components = array(
'RequestHandler'
);

Vamos adicionar tambem no seu Layout o seguinte código !

<?php
echo $this->Html->script('jquery');
echo $this->Js->writeBuffer(array('cache' => FALSE));
?>

 

A primeira linha do código carrega nosso framework e a segunda linha com a função "writeBuffer()" serve para que o cake gere todos os eventos automaticamente, ou seja todo o script Jquery necessario para fazer uma requesição. O parâmetro 'cache'=>FALSE serve para que esse script gerado seja escrito ná página, caso voce coloque TRUE (eu não recomendo) pra cada vez que alguem acessar a página o cake vai criar uma arquivinho JS na pasta weebroot/js contendo o script !

Tudo carregado, hora de por a mão na massa !

vamos criar uma view com o nome "views/NomeDoSeuController/teste_ajax.ctp" e colocar o seguinte conteúdo:

<?php
echo $this->Form->create('NomeModel');
echo $this->Form->input('nome');
echo $this->Form->input('sobrenome');
echo $this->Js->submit('Enviar', array(
 'before' => $this->Js->get('#loading')->effect('fadeIn'),
 'success' => $this->Js->get('#loading')->effect('hide'),
 'update' => '#respostaAjax',
 'complete'=>''
 )
);
echo $this->Form->end(); ?>
<div id="loading">Loading...</div>
<div id="respostaAjax"></div>

Note que estamos criando um formulário muito parecido com aqueles sem Ajax, o que muda é o botão submit que foi escrito com o Helper "Js".

Dentro dos parâmetros do submit temos:

• 'before' que é o que sera executado antes da requisição ser feita
• 'success' que só é executado caso a requisição ocorra sem nenhum problema
• 'complete' que é executado quando a requisição termina (com sucesso ou erro)
• 'update' é o elemento HTML que será alterado com o Ajax

OBS: dentro desses paramentros podemos chamar uma função que nos criarmos em Js por exemplo

'complete'=>'helloWord()'

No nosso controller vai ficar assim:

public function testeAjax() {
 if ($this->RequestHandler->isAjax()) {
 $this->layout = 'ajax';
 // Ações do Controler
 // Exemplo
 $this->set('dados',$this->request->data);
 sleep(5); // para ver o efeito de fade
 $this->render('ajax_conteudo');
 } else {
 //Ações caso o Js não esteje habilitado
 }
 }

Note que estamos usando o Layout "ajax" esse layout ja vem no Cake ele não tem nada apenas o "$content_for_layout", caso queiram mudar algo nele, voce pode encontra-lo na pasta 'lib/Cake/view/Layouts/ajax.ctp'.

e tambem estamos mandando renderizar uma view chamada 'ajax_conteudo' que nós ainda não criamos, pois entao vamos-la

no arquivo 'views/NomeDoSeuController/ajax_conteudo.ctp' vamos colocar todo o conteudo que sera mostrado no elemento HTML que o Ajax modificará, que no nosso é o <div id="respostaAjax"></div>, criado na view teste_ajax.ctp

por exemplo:

<?php debug($dados); ?>

OBS: $dados é a variavel que setamos como exemplo n controller !

Pronto está tudo certo pode ir na página do seu formulário e testar o seu Ajax funcionando !

Caso tenham algum problema comentem ai em baixo que eu vejo se não deixei nada pra trás !