[Resolvido] Ajax com CakePHP 2 - Parte 1

[Neto Braghetto 3]

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 !