Olá! estou estudando AJAX e estou encontrando alguns problemas...
tenho os seguintes arquivos: 01.php
<!-- Código Fonte do Arquivo-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Cidades Dinâmicas</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="01.js"></script>
</head>
<body style="margin:20px;">
<h2>Selecione uma Cidade</h2>
<form>
<select name="estados" id="estados" onChange="ajaxComboBox('01_cidades.php','cidades');">
<option selected value="nada">-- Estados --</option>
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AP">Amapa</option>
<option value="AM">Amazonia</option>
<option value="BH">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espírito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="muito">Mato Grosso</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MG">Minas Gerais</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PR">Paraná</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ">Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RO">Rondônia</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SP">São Paulo</option>
<option value="SE">Sergipe</option>
<option value="TO">Tocantins</option>
</select>
<select name="cidades" id="cidades">
<option>-- Escolha um Estado --</option>
</select>
</form>
</body>
<html>
mais o arquivo: 01_cidades.php
<?php
header("Content-type: text/xml; charset=ISO-8859-1");
print '<?xml version="1.0" encoding="ISO-8859-1"?>';
?>
<cidades>
<?php
$link = mysql_pconnect("localhost", "root", "")
or die("Não pude conectar: " . mysql_error());
mysql_select_db('ajax', $link) or die ('Não foi possível usar db: ' . mysql_error())
$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"
or die("Query invalida: " . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_NUM)) {
printf("<nome id=\"%d\">%s</nome>\n", $row[0],$row[1]);
}
mysql_close($link);
?>
</cidades>
e por último: 01.js
// JavaScript Document
var HttpReq = null;
var dest_combo = null;
function ajaxComboBox(url, comboBox)
{
dest_combo = comboBox;
var indice = document.getElementById('estados').selectedIndex;
var sigla = document.getElementById('estados').options[indice].getAttribute('value');
url = url + '?uf=' + sigla;
if (document.getElementById)
{ //Verifica se o Browser suporta DHTML.
if (window.XMLHttpRequest)
{
HttpReq = new XMLHttpRequest();
HttpReq.onreadystatechange = XMLHttpRequestChange;
HttpReq.open("GET", url, true);
HttpReq.send(null);
} else if (window.ActiveXObject)
{
HttpReq = new ActiveXObject("Microsoft.XMLHTTP");
if (HttpReq)
{
HttpReq.onreadystatechange = XMLHttpRequestChange;
HttpReq.open("GET", url, true);
HttpReq.send();
}
}
}
}
function XMLHttpRequestChange()
{
if (HttpReq.readyState == 4 && HttpReq.status == 200)
{
var result = HttpReq.responseXML;
var cidades = result.getElementsByTagName("nome");
document.getElementById('dest_combo').innerHTML = "";
for (var i = 0; i < cidades.length; i++)
{
new_opcao = create_opcao(cidades[i]);
document.getElementById('dest_combo').appendChild(new_opcao);
}
}
}
function create_opcao(cidade)
{
var new_opcao = document.createElement("option");
var texto = document.createTextNode(cidade.childNodes[0].data);
new_opcao.setAttribute("value",cidade.getAttribute("id"));
new_opcao.appendChild(texto); //Adiciona o texto a OPTION.
return new_opcao; // Retorna a nova OPTION.
}
peguei esse exemplo na página www.hospedia.com.br estou seguindo os passos, única coisa que mudei foi ao invés de usar o nome do banco "artigos" criei um "ajax" não mudei mais nada e não está dando certo, ou seja, o ComboBox das cidades não esta carregando... Alguém podeira me ajudar... o banco está criado assim: uma tabela "estados" e "cidades", estados: colunas "id", "sigla" e "nome", já a table cidades as colunas "id", id_estados" e "nome"... agradeço qualquer ajuda...
Pergunta
pcjardim
Olá! estou estudando AJAX e estou encontrando alguns problemas...
tenho os seguintes arquivos: 01.php
<!-- Código Fonte do Arquivo--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Cidades Dinâmicas</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript" src="01.js"></script> </head> <body style="margin:20px;"> <h2>Selecione uma Cidade</h2> <form> <select name="estados" id="estados" onChange="ajaxComboBox('01_cidades.php','cidades');"> <option selected value="nada">-- Estados --</option> <option value="AC">Acre</option> <option value="AL">Alagoas</option> <option value="AP">Amapa</option> <option value="AM">Amazonia</option> <option value="BH">Bahia</option> <option value="CE">Ceará</option> <option value="DF">Distrito Federal</option> <option value="ES">Espírito Santo</option> <option value="GO">Goiás</option> <option value="MA">Maranhão</option> <option value="muito">Mato Grosso</option> <option value="MS">Mato Grosso do Sul</option> <option value="MG">Minas Gerais</option> <option value="PA">Pará</option> <option value="PB">Paraíba</option> <option value="PR">Paraná</option> <option value="PE">Pernambuco</option> <option value="PI">Piauí</option> <option value="RJ">Rio de Janeiro</option> <option value="RN">Rio Grande do Norte</option> <option value="RS">Rio Grande do Sul</option> <option value="RO">Rondônia</option> <option value="RR">Roraima</option> <option value="SC">Santa Catarina</option> <option value="SP">São Paulo</option> <option value="SE">Sergipe</option> <option value="TO">Tocantins</option> </select> <select name="cidades" id="cidades"> <option>-- Escolha um Estado --</option> </select> </form> </body> <html>mais o arquivo: 01_cidades.php<?php header("Content-type: text/xml; charset=ISO-8859-1"); print '<?xml version="1.0" encoding="ISO-8859-1"?>'; ?> <cidades> <?php $link = mysql_pconnect("localhost", "root", "") or die("Não pude conectar: " . mysql_error()); mysql_select_db('ajax', $link) or die ('Não foi possível usar db: ' . mysql_error()) $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" or die("Query invalida: " . mysql_error()); while ($row = mysql_fetch_array($result, MYSQL_NUM)) { printf("<nome id=\"%d\">%s</nome>\n", $row[0],$row[1]); } mysql_close($link); ?> </cidades>e por último: 01.js// JavaScript Document var HttpReq = null; var dest_combo = null; function ajaxComboBox(url, comboBox) { dest_combo = comboBox; var indice = document.getElementById('estados').selectedIndex; var sigla = document.getElementById('estados').options[indice].getAttribute('value'); url = url + '?uf=' + sigla; if (document.getElementById) { //Verifica se o Browser suporta DHTML. if (window.XMLHttpRequest) { HttpReq = new XMLHttpRequest(); HttpReq.onreadystatechange = XMLHttpRequestChange; HttpReq.open("GET", url, true); HttpReq.send(null); } else if (window.ActiveXObject) { HttpReq = new ActiveXObject("Microsoft.XMLHTTP"); if (HttpReq) { HttpReq.onreadystatechange = XMLHttpRequestChange; HttpReq.open("GET", url, true); HttpReq.send(); } } } } function XMLHttpRequestChange() { if (HttpReq.readyState == 4 && HttpReq.status == 200) { var result = HttpReq.responseXML; var cidades = result.getElementsByTagName("nome"); document.getElementById('dest_combo').innerHTML = ""; for (var i = 0; i < cidades.length; i++) { new_opcao = create_opcao(cidades[i]); document.getElementById('dest_combo').appendChild(new_opcao); } } } function create_opcao(cidade) { var new_opcao = document.createElement("option"); var texto = document.createTextNode(cidade.childNodes[0].data); new_opcao.setAttribute("value",cidade.getAttribute("id")); new_opcao.appendChild(texto); //Adiciona o texto a OPTION. return new_opcao; // Retorna a nova OPTION. }peguei esse exemplo na página www.hospedia.com.br estou seguindo os passos, única coisa que mudei foi ao invés de usar o nome do banco "artigos" criei um "ajax" não mudei mais nada e não está dando certo, ou seja, o ComboBox das cidades não esta carregando... Alguém podeira me ajudar... o banco está criado assim: uma tabela "estados" e "cidades", estados: colunas "id", "sigla" e "nome", já a table cidades as colunas "id", id_estados" e "nome"... agradeço qualquer ajuda...
Link para o comentário
Compartilhar em outros sites
4 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.