Alimentando uma ComboBox dinamicamente utilizando técnicas AJAX

28/11/2005 12:00:00

Autor: Rondinely S. de Almeida

Serviços para Webmasters

Exemplos:01.php

Mostraremos neste artigo como fazer para alimentar dinamicamente o conteúdo de uma ComboBox de acordo com uma escolha realizada pelo usuário do site. Não vamos nos limitar a colocar uma nova ComboBox dentro de uma <DIV>, mas sim trabalhar a nível de <OPTION> e apagá-las e criá-las conforme nossas necessidades.

O primeiro passo é preparar nossa base de dados.

Crie um database de sua preferência no MySQL e execute os seguintes comandos:

CREATE TABLE `estados` (
	`id` int(10) unsigned NOT NULL auto_increment,
	`sigla` char(2) NOT NULL default '',
	`nome` varchar(25) NOT NULL default '',
	PRIMARY KEY (`id`),
	UNIQUE KEY `sigla` (`sigla`)
) TYPE=MyISAM AUTO_INCREMENT=3 ;
INSERT INTO `estados` VALUES (1, 'MT', 'Mato Grosso');
INSERT INTO `estados` VALUES (2, 'SP', 'São Paulo');
CREATE TABLE `cidades` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `id_estado` int(10) unsigned NOT NULL default '0',
  `nome` varchar(45) NOT NULL default '',
  PRIMARY KEY (`id`)
  ) TYPE=MyISAM AUTO_INCREMENT=7 ;
INSERT INTO `cidades` VALUES (1, 1, 'Cuiabá');
INSERT INTO `cidades` VALUES (2, 1, 'Várzea Grande');
INSERT INTO `cidades` VALUES (3, 2, 'São Paulo');
INSERT INTO `cidades` VALUES (4, 2, 'Santo André');
INSERT INTO `cidades` VALUES (5, 2, 'Limeira');
INSERT INTO `cidades` VALUES (6, 2, 'Barueri');

A tabela estados possui, como exemplo, dois Estados brasileiros, enquanto a tabela cidades possuí cidades associadas aos Estados pelos seus devidos códigos.

Agora vamos ao código HTML do nosso exemplo:

Arquivo 01.php

01: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
02: "http://www.w3.org/TR/html4/loose.dtd">
03: <html>
04: <head>
05: <title>Cidades Dinâmicas</title>
06: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
07: <script type="text/javascript" src="01.js"></script>
08: </head>
09: <body style="margin:20px;">
10: <h2>Selecione uma Cidade</h2>
11: <form>
12: <select name="estados" id="estados" onChange="ajaxComboBox('01_cidades.php','cidades');">
13:    <option selected value="NDA">-- Estados --</option>
14:    <option value="MT">Mato Grosso</option>
15:    <option value="SP">São Paulo</option>
16: </select>
17: <select name="cidades" id="cidades">
18:    <option>-- Escolha um Estado --</option>
19: </select>
20: </form>
21: </body>
22: <html>

Neste código é relevante observar os seguintes pontos:

07: <script type="text/javascript" src="01.js"></script>

Nesta linha incluimos o arquivo com o código JavaScript responsável pelo funcionamento das técnicas de AJAX.

12: <select name="estados" id="estados" onChange="ajaxComboBox('01_cidades.php','cidades');">

Não deixe de ver também:

Nesta linha adicionamos a função 'ajaxComboBox' ao evento onChange, o que fará com que toda vez que seja selecionado um novo item na ComboBox 'estados' esta função seja chamada com o nome do arquivo onde se encontra o conteúdo e a ComboBox de destino, neste caso '01_cidades.php' e 'cidades' respectivamente.

Abaixo o arguivo '01_cidades.php', responsável por pesquisar o banco de dados e retornar as informações necessárias para povoar a ComboBox de destino.

01: <?php
02:     header("Content-type: text/xml; charset=ISO-8859-1");
03:    print '<?xml version="1.0" encoding="ISO-8859-1"?>';
04  ?>
05:
06 <cidades>
07 <?php
08:    $link = mysql_pconnect("localhost", "root", "")
09:    or die("Não pude conectar: " . mysql_error());
10:    mysql_select_db('artigos', $link) or die ('Não foi possível usar db: ' . mysql_error())
11:    $result = mysql_query("SELECT cidades.id,cidades.nome FROM estados,cidades WHERE 
               estados.sigla = '{$_GET['uf']}' AND estados.id = cidades.id_estado 
               ORDER BY cidades.nome"
12:    or die("Query invalida: " . mysql_error());
13:
14:    while ($row = mysql_fetch_array($result, MYSQL_NUM)) {
15:        printf("<nome id=\"%d\">%s</nome>\n", $row[0],$row[1]);
16:    }
17:
18:    mysql_close($link);
19: ?>
20: </cidades>

As quatro primeiras linhas deste arquivo servem para avisar ao navegador que este arquivo possui um conteúdo XML, isto é importante para que mais tarde possamos trabalhar o conteúdo retornado nos padrões da linguagem XML.

Na sexta linha iniciamos o elemento raiz do arquivo XML (todo arquivo XML deve ter um elemento principal), neste caso '<cidades>'.

07: <?php
08: $link = mysql_pconnect("localhost", "root", "")
09: 	or die("Não pude conectar: " . mysql_error());
10: mysql_select_db('artigos', $link) or die ('Não foi possível usar db: ' . mysql_error())

Na sétima linha entramos novamente no código PHP, as linhas oito e nove são responsáveis pela conexão ao banco de dados e devem ser adaptadas a casa caso. Na décima linha conecta-se a uma base de dados dentro do banco, neste exemplo a base de dados é 'artigos'.

11: $result = mysql_query("SELECT cidades.id,cidades.nome FROM estados,cidades WHERE 
        estados.sigla = '{$_GET['uf']}' AND estados.id = cidades.id_estado 
        ORDER BY cidades.nome
12:        or die("Query invalida: " . mysql_error());

As linhas onze e doze fazem a consulta ao banco de dados em busca das cidades que pertencem ao estado escolhido pelo usuário. O estado é definido pela variavel de ambiente 'uf', passada pelo método GET para este arquivo ($_GET['uf']).

14: while ($row = mysql_fetch_array($result, MYSQL_NUM)) {
15:    printf("<nome id=\"%d\">%s</nome>\n", $row[0],$row[1]);
16: }

Com o resultado da consulta e um laço 'while' imprimimos no arquivo cada tag 'nome' contendo o nome da cidade e um atributo 'id' contendo um código único para a cidade..

Alimentando uma ComboBox dinamicamente utilizando técnicas AJAX

28/11/2005 12:00:00

Autor: Rondinely S. de Almeida

Artigos relacionados