Palavra:   

Revista PHP / AJAX

Osdeni Sadzinski

Programador Pleno PHP, trabalha atualmente na UNESC (www.unesc.net) como Programador Web. tem conhecimentos em: PHP, AJAX, JavaScript, JSON, XHTML, CSS e MySql.

Combobox Dinâmico com jQuery e PHP

Apresentarei neste artigo algumas técnicas de como utilizar PHP, AJAX de uma forma simples, para lhe auxiliar no desenvolvimento de interfaces mais intuitivas (RIA) para os usuários.

Requisitos Mínimos: Framework jQuery, PHP instalado.

Criaremos um select de categoria de veículos. Quando selecionarmos a categoria, irá exibir um outro select com os carros dessa categoria e assim sucessivamente.



No arquivo index.php conté o html que possui o formulário para criarmos o combobox dinâmico
Vamos pos ordem de melhor entendimento:

Arquivo index.php

PHP
  1. <?php include 'processa.php'; ?>
  2. <html>
  3. <head>
  4. <title>Php, Ajax com jQuery</title>
  5. <script type="text/javascript" src="jquery.js"></script>
  6. <script type="text/javascript">
  7. function exibeModeloSelect(id_marca) {
  8. $.ajax(
  9. {
  10. type: "POST",
  11. url: "processa.php",
  12. data: "acao=exibeModeloSelect&id_marca=" + id_marca,
  13. beforeSend: function() {
  14. // enquanto a função esta sendo processada, você
  15. // pode exibir na tela uma
  16. // msg de carregando
  17. },
  18. success: function(txt) {
  19. // pego o id da div que envolve o select com
  20. // name="id_modelo" e a substituiu
  21. // com o texto enviado pelo php, que é um novo
  22. //select com dados da marca x
  23. $('#ajax_marca').html(txt);
  24. },
  25. error: function(txt) {
  26. // em caso de erro você pode dar um alert('erro');
  27. }
  28. }
  29. );
  30. }
  31. </script>
  32. </head>
  33. <body>
  34. Marca: <br/>
  35. <select name="id_categotia" onchange="exibeModeloSelect(this.value);">
  36. <option value="">Selecione</option>
  37. <!-- Loop que percorre o array e monta o combo das marcas -->
  38.  
  39. <?php foreach(get_marcas() as $marca) { ?>
  40. <option value="<?php echo $marca['id_marca']; ?>">
  41. <?php echo $marca['ds_marca']; ?>
  42. </option>
  43. <?php } ?>
  44. </select>
  45.  
  46. <br /><br />
  47.  
  48. Modelo: <br/>
  49.  
  50. <!—
  51. Esse id é para atualizar esse select quando selecionarmos a marca -
  52. ->
  53. <div id="ajax_marca">
  54. <select name="id_modelo">
  55. <option value="">Selecione a Marca</option>
  56. </select>
  57. </div>
  58. </body>
  59. </html>
www.revistaphp.com.br

Linha 5: Importamos o javascript do frameeork jquery.

Linha 7: Criamos a função que irá realizar a operação quando selecionarmos um item do
combobox  com o evento onchange

Linha 8: Inicia a função AJAX do jquery

Linha 10: Tipo de cabeçalho que iremos passar, nesse caso passaremos os dados pos POST

Linha 11: é a URL a qual iremos chamar para processar nossa informação

Linha 12: Os dados que serão passados para nosso arquivo processa.php, eles são passados como se fosse na URL (?nome=jonas&senha=123)  porém irão ocultos, pois estamos utlizando o método POST, poderíamos também utilizar o método GET

Linha 13: Enquanto ao requisição esta sendo processada, poderíamos criar uma mensagem de carregando.

Linha 18: Quando a requisição termina de processar a informação, ele executa esse bloco de código retornando o que foi passado (escrito) no php através variável (txt) – function(txt)

Linha 23:  Pegamos o ID da div que envolve o combobox(select) que desejamos alterar, e substituímos o seu conteúdo pelo novo que veio do php, através da requisição feita anteriormente, observe que utilizamos # pois é um ID.

Linha 25: Em caso de erro é executado esse bloco de código.

Linha 35: Temos um select com a função onchange, que é executada quando selecionamos um item da lista, dentro dela chamamos a função que irá processar a requisição, passamos por parâmetro o valor selecionado, no caso o identificador da marca

Linha 39: É feito um loop para percorrer o array de marcas e exibi-las dentro da lista, observe que passamos o id_marca como value, pois é com ele que iremos encontrar os modelos dessa marca.

Linha 53: Temos a div com o ID que iremos manipular, é nela que apagamos o conteúdo e colocamos o novo combo, criado pelo PHP.

Arquivo: processa.php

PHP
  1. <?php
  2.  
  3. // Para solicionar problema de ACENTOS
  4. header('Content-Type: text/html; charset=ISO-8859-1');
  5.  
  6. function get_marcas() {
  7.  
  8. // Aqui criamos um array bidimensional, que poderá vi do banco de
  9. // dados da mesma forma
  10. // basta você fazer um select * from tabela_marca -> a tabela_marca
  11. // deve conter: id_marca, ds_marca
  12. $marcas = array(
  13. array('id_marca' => 1, 'ds_marca' => 'Chevrolet'),
  14. array('id_marca' => 2, 'ds_marca' => 'Fiat'),
  15. array('id_marca' => 3, 'ds_marca' => 'Ford')
  16. );
  17. return $marcas;
  18. }
  19.  
  20. function get_modelos($id_marca) {
  21. // Ao invés de buscar num array (é como estou fazendo aqui), você
  22. // pode da um select na tabela
  23. // do banco de dados que armazena o modelo, e retorna todos os
  24. //modelos da marca $id_marca
  25. // select * from tabela_modelo where id_marca = $id_marca -> a
  26. // abela_modelo deve conter: id_marca, id_modelo, ds_modelo
  27. // depois do select você retorna os dados do banco na função
  28. $tabela_modelo = array(
  29. array('id_marca' => 1, 'id_modelo' => 1, 'ds_modelo' => 'Vectra'),
  30. array('id_marca' => 1, 'id_modelo' => 2, 'ds_modelo' => 'Corsa'),
  31. array('id_marca' => 1, 'id_modelo' => 3, 'ds_modelo' => 'Meriva'),
  32. array('id_marca' => 2, 'id_modelo' => 4, 'ds_modelo' => 'Uno'),
  33. array('id_marca' => 2, 'id_modelo' => 5, 'ds_modelo' => 'Tempra'),
  34. array('id_marca' => 2, 'id_modelo' => 6, 'ds_modelo' => 'Pálio'),
  35. array('id_marca' => 3, 'id_modelo' => 7, 'ds_modelo' => 'Ranger'),
  36. array('id_marca' => 3, 'id_modelo' => 8, 'ds_modelo' => 'Eco'),
  37. array('id_marca' => 3, 'id_modelo' => 9, 'ds_modelo' => 'Fiesta')
  38. );
  39.  
  40. $modelo = array();
  41. $cont = 0;
  42. for($i=0; $i < count($tabela_modelo); $i++) {
  43. if($tabela_modelo[$i]['id_marca'] == $id_marca) {
  44. $modelo[$cont]['id_marca']= $tabela_modelo[$i]['id_marca'];
  45. $modelo[$cont]['ds_modelo'] = $tabela_modelo[$i]['ds_modelo'];
  46. $cont++;
  47. }
  48. }
  49. return $modelo;
  50. }
  51.  
  52. switch ($_POST['acao']) {
  53. case "exibeModeloSelect":
  54. $txt = '<select name="id_modelo">';
  55. $txt .= '<option value="">Selecione o Modelo</option>';
  56.  
  57. foreach(get_modelos($_POST['id_marca']) as $modelo) {
  58. $txt .= '<option value="'.$modelo['id_modelo'].'">' . $modelo['ds_modelo'] . '</option>';
  59. }
  60.  
  61. $txt .= "</select>";
  62.  
  63. echo $txt;
  64. break;
  65. }
  66. ?>
www.revistaphp.com.br

Linha2: É utilizado o Header para não termos problemas de acentuação

Linha 4: É a função que retorna as marcas dos veículos, montei um array indexado, poderíamos tranqüilamente efetuar uma busca no banco de dados e retornar os dados dessa consulta nessa função. Basta criar uma tabela com os campos: id_marca (auto-increment, PK) e ds_marca (varchar(50).

Linha 18: Função que retorna os modelos de uma determinada marca, no exemplo eu estou fazendo a busca do modelo num array, sendo que podemos fazer perfeitamente pelo banco de dados também (ideal), basta criar uma tabela com os campos: id_modelo (auto-incrementm PK), id_marca (FK), ds_modelo. Ai você realiza uma busca através do id_marca

Linha 50:
Criamos um switch case da variável acao, a qual foi passada pelo arquivo index.php na linha 12, caso ela contenha o valor (exibeModeloSelect), ele executa o bloco de código.

É nesse bloco de código que recebemos também a variável id_marca, que foi passa na linha 12 do arquivo index.php e chamamos a função get_modelos(), e passamos o código da marca que queremos exibir, ai criamos um novo select com esses modelos e depois na linha 61 exibimos o resultado.

Opções de Interação

Comentários

Não passa valor no submit
Por: MARCIO, 22/12/2010   08:18:17
Olá. Testei e funcionou perfeitamente. Obrigado.
O problema que tenho agora é o seguinte: Seleciono o primeiro combo (UF), o segundo é preenchido (Cidades), mas ao enviar, o código da cidade não é passado por POST. Preciso receber este código na outra página, para mostrar os dados da cidade. Grande abraço.
e-mail
Por: Ayesha, 15/04/2010   15:06:51
quase esqueci meu email: ayesha_lsc@yahoo.com.br
help?
Por: Ayesha, 15/04/2010   15:04:57
inclui esse cod e fiz as mudanças q achei necessarias porem nao funciona. me mande um e-mail para q eu possa enviar o codigo
Uma alternativa mais ampla e fácil
Por: Gilberto, 31/03/2009   17:23:22
Olá, eu já testei este script algum tempo atrás e particularmente acho que toda esta abordagem de arrays é meio deprecada para algo dinamico.
Eu tenho um script funcionando perfeitamente no meu blog. O mesmo se trata de uma sequencia de combos que lista pais, estado, cidade e bairro. Vale a pena conferir para quem busca uma alternativa mais ampla e fácil. http://www.gilbertoalbino.com/criar-combo-dinamico-em-ajax-com-jquery-php/ de uma visitada lá e baixe os códigos fontes.
nao busca no banco de dados
Por: daniel, 23/10/2008   10:13:20
tentei fazer seu codigo buscando de uma base de dados e nao deu certo. se vc puder me ajudar ficaria muito grato.
abraços.
sobre o erro
Por: alex, 01/02/2008   10:57:53
Consegui resolver o problema apenas
comentando a linha, dai ele funciona, porém volta a informar o erro se eu descomentar a linha do headers.
Obrigado pela cooperação.
problema
Por: alex, 28/01/2008   11:35:36
olha fiz o procedimento que você recomendou, porém a mensagem é a que apresenta abaixo:

Warning: Cannot modify header information - headers already sent by (output started at /var/www/index.php:1)

Interessante porque se funciona contigo, deveria funcionar comigo também, será que pode ser a versão do php???
Correão problema
Por: Osdeni José, 28/01/2008   10:30:49
Caro colega, o erro de Header é de certeza que é esse, agora desse outro erro que você fala, você consegui debugar ou algo que aponte onde esta o erro? eu testei esse script como esta ai e ele esta funcionando perfeitamente.
problema continuação
Por: alex, 28/01/2008   07:26:31
, acho que é outro problema.
problema
Por: alex, 28/01/2008   07:23:05
Ok, obrigado pela informação colega, porém não há nehum espaço em branco e quando comentei a linha, não deu erro, porém não funcionou o modelo só a marca ok, acho