Passo a passo para atualizar um select com ajax

[Saul Lima]

Tenho um select que quando tem um valor selecionado precisa atualizar os valores de um outro select, no meu antigo "POG" (rsrsrs) eu tinha um java script que se encarregava de "trocar" o conteúdo de uma determinada div pelo select preenchido com os valores correspondentes ao select anterior . 

Mas não faço a menor idéia de como fazer isso.

Procurei pela net, mas só encontro exemplos com versões do cake anteriores à 2.0 .

Como sou iniciante no cake, preciso de um passo  a passo para entender como isso funciona. Será que alguém pode me ajudar?

[Leandro Machado Pereira]

Bem, se for na página sem realizar um refresh, terá que ser com javascript/jquery.

O que você pode fazer é atualizar seu javascript para uma forma usando jquery.

--
--
CakePHP Tuga (cakephp-pt)
 
Utilize http://bin.cakephp.org para códigos
Cookbook: http://book.cakephp.org
 
Website do CakePHP: http://cakephp.org/
Website do grupo: http://groups.google.com/group/cakephp-pt?hl=pt-PT
---
Recebeu esta mensagem porque subscreveu ao grupo "CakePHP Tuga" do Grupos do Google.
Para anular a subscrição deste grupo e parar de receber emails do mesmo, envie um email para cakephp-pt+...@googlegroups.com.
Para publicar uma mensagem neste grupo, envie um email para cakep...@googlegroups.com.
Visite este grupo em http://groups.google.com/group/cakephp-pt.
Para mais opções, visite https://groups.google.com/d/optout.

[Saul Lima]

No antigo sistema eu usava jquery, mas não to sabendo como implementar isso no cake...

[Leandro Machado Pereira]

adiciona a chamada do arquivo jquery do seu layout(default.ctp)
E na view que vc quer fazer a troca, vc coloca o jquery

[Tayron Miranda]

Tenho um post, simples mas acho que da pra vc ter uma noção de como fazer isso qeu você quer: http://www.tayron.com.br/blog/64/cakephp--trabalhando-com-requisicao-ajax

      

[Saul Lima]

Tayron, boa postagem. Mas minha dúvida é, como imprimir o novo select com a variável repassada pelo controller contendo o array com dos dados do BD.
O controller vai repassar via jquery, segundo o seu exemplo, uma variável $select (por exemplo), mas como montar o select no view com essa variável?

[Pedro Soares]

Saul, vou te mostrar o exemplo sem o jaavascript, vou escrever utilizando jquery:
/*primeiro vamos ter uma funcao no arquivo .js, pois com a funcao vc pode reescrever o codigo em outro local*/
function atualizaSelect(){
Var campo1=$('#iddoselect1').val();
var campo2 = $('#iddoselect2').val();
//funcao ajax
$.ajax({
url:www.meusite.com.br/meucontroler/minhaacao
// o controller e a action serao os que procuram os dados
dataType:'json',
type: 'post',
data{select1:campo1,select2:campo2},
//aqui no data, abrimos chaves por estArmos enviando arquivos co.o json e indicamos por qual indice iremos encontrar estes dados,  no caso select1 e select2
complete:function(dados){
///aqui e pra qnd a funcao terminar, vc vai executar uma funcao anonima, essa funcao vai receber os dados da resposta da requisicao, essez dados sao enviados do controller, aqui vc identifica eles pela variavel dados. A resposta sempre sera um.objeto javascript, vc pode percorrelo usando um console.log(dados), assim vc ve o que foi retornado, neste caso, o que vc precisa vai ser retornado em dados.responseJSON, mas se fosse outro formato, ele seria retornado em outro objeto.
Para percorrer o array de dados use o $.each da jquery.
}
});
atualizaSelect();
$('#iddoselect').change(function(){
atuizaSelect();
});
No controller vc poe o metod
Public function minhaacao(){
If($this->request->isAjax()){
//serve pra identificaar chamadas ajax
$dados = $this->tabela->find('list',array('fields'=>array(tabela.id,tabela.nome)));
echo json_encode($dados);
//o eccho e pra nossa funcao ajax receber estes dados no parametro da funcao complete, e o json_encode e para converter ezses dados em json.
}
}
Espero ter ajudado, estou no celular, mais tarde eu volto

--

[Saul Lima]

Obrigado Pedro, estou agora participando de um evento, a noite quando retornar testo o código...

[Saul Lima]

Consegui, usando o JsHelper. Vou deixar aqui de referência para usuários que buscam a mesma solução. 

1-Baixar o Jquery para a pasta app/webroot/js

2- Incluir o código <?php echo $this->Html->script('NOME_DO_ARQUIVO_JQUERY');?>  (não precisa colocar a extensão .js aqui) entre as tags head do arquivo app/view/layouts/default.ctp

Isso vai incluir a chamada pro JQuery no head das páginas geradas com este layout

3-Adicionar o helper Js ao controller que contem a ação a ser acessada pelo jquery

 public $helpers = array('Html', 'Form', 'Js' );

 4 -Criar uma action contendo a busca (find) que vai gerar o array para o select a ser preenchido por ajax, aqui no meu caso ficou assim:

public function pegaseries(){

$idcurso = $this->request->data['Matricula']['curso_id'];

    $arraycursos= $this->Cursoporano->find('all', array('fields' =>array('Ano.id','Ano.ano'),'conditions'=>array('Cursoporano.curso_id' =>$idcurso)));  

    foreach($arraycursos as $key){

    $select[$key['Ano']['id']] = $key['Ano']['ano'];

}

    $this->set('select',$select);  

    $this->layout = 'ajax';

}

5- Criar a view responsável por montar o select. Por convenção do cake, ela deve ter o mesmo nome da action que será acessada via jquery. O meu pegaseries.ctp ficou assim:

<?php

echo $this->Form->input("ano_id", array('type'=>'select', 'label' => False, 'options'=>$select)); 

?>

6- No meu caso, o scrip do jquery está numa controller e acessar os dados requisitados na action de outro controller, assim, precisei adicionar  o "public $helpers = array('Html', 'Form', 'Js' );" ao controller que solicita os dados também

7- Na view que vai usar o select dinâmico vamos usar o JsHelper para criar o script do jquery, adicionando o seguinte código:

$this->Js->request(array(

'controller'=>'cursoporanos', //Aqui deve-se colocar o nome do controller que recebe a requisição do Jquery

'action'=>'pegaseries' // Aqui vai o id do select que, quando alterado, muda o select seguinte

), array(

'update'=>'#ano', // Aqui vai o id do select que vai ser atualizado

'async' => true,

'method' => 'post',

'dataExpression'=>true,

'data'=> $this->Js->serializeForm(array(

'isForm' => true,

'inline' => true

))

))

);

8 - No final do seu default.ctp acrescente as linhas:

<?php echo $scripts_for_layout; ?>

<?php

if (class_exists('JsHelper') && method_exists($this->Js, 'writeBuffer')) echo $this->Js->writeBuffer();

?>

//isso vai escrever o código nas páginas onde houver chamada para o JsHelper

E pronto, tudo funcionando.

Referências:

http://www.willis-owen.co.uk/2011/11/dynamic-select-box-with-cakephp-2-0/

http://book.cakephp.org/2.0/en/core-libraries/helpers/js.html

[Saul Lima]

Cometi um pequeno erro ao copiar o código do passo 7, na verdade ele deve ficar assim:

 $this->Js->get('#curso')->event('change', // Aqui em "#curso" vai o id do select que, quando alterado, muda o select seguinte

$this->Js->request(array(

'controller'=>'cursoporanos', //Aqui deve-se colocar o nome do controller que recebe a requisição do Jquery

'action'=>'pegaseries'  // Aqui o nome da action que vai ser acessada