...

View Full Version : Help Ajax 2 groups of dinamic Comboboxes



m3ntos
11-20-2007, 08:02 PM
Hi!
I'm beginning with ajax and php.
I have two groups of 2 comboboxes in the same page.
Home City ->Home College
Erasmus City->Erasmus College

I want if i choose one city show all the colleges on that city

I can put working one group of comboboxes, but the other i tried do several changes in javascript code, but i wasn't successful.

example of home city combobox:


<select name="homeCity" id="homeCity" onchange="javascript:mudar(this.value);">
<option>Select HomeCity</option>
<?php
$hCountry =$_COOKIE['homeCountry'];
// INCLUSÃO DO ARQUIVOS DE CONFIGURAÇÃO E CONEXÃO COM O BANCO DE DADOS
include "config.inc.php";
//
$sql = "SELECT IDCity, nameCity FROM city WHERE IDCountry= '$hCountry'";
$resultado = mysql_query($sql) or die ("Problema na Consulta");
while($linha1 = mysql_fetch_array($resultado))
{
?>
<option value="<?=$linha1['IDCity'] ?>">
<?=$linha1['nameCity'] ?>
</option>
<?
}
?>
</select>


javascript code



var retorno;
function CarregaArquivo(url,valor)
{
retorno = null;
//CRIA O OBJETO HttpRequest PARA O RESPECTIVO NAVEGADOR
//Mozilla Fire Fox / Safari ...
//
if (window.XMLHttpRequest) {
retorno = new XMLHttpRequest();
//SETA A FUNÇÃO QUE SERÁ CHAMADA QUANDO O AJAX DER UM RETORNO
retorno.onreadystatechange = processReqChange;
//ABRE A REQUISIÇÃO AJAX, PASSANDO O MÉTODO DE ACESSO, URL E O PARÂMETRO
retorno.open("GET", url+'?homeCity='+valor, true);
//INICIA O TRANSPORTA DOS OBJETOS NA REQUISIÇÃO
retorno.send(null);
} else if (window.ActiveXObject) {
//
//IE
//
retorno = new ActiveXObject("Microsoft.XMLHTTP");
if (retorno) {
//SETA A FUNÇÃO QUE SERÁ CHAMADA QUANDO O AJAX DER UM RETORNO
retorno.onreadystatechange = processReqChange;
//ABRE A REQUISIÇÃO AJAX, PASSANDO O MÉTODO DE ACESSO, URL E O PARÂMETRO
retorno.open("GET", url+'?homeCity='+valor, true);
//INICIA O TRANSPORTA DOS OBJETOS NA REQUISIÇÃO
retorno.send();
}
}
}
//FUNÇÃO QUE TRATA O RETORNO DO AJAX
function processReqChange()
{
//CASO O STATUS DO AJAX SEJA OK, CHAMA A FUNÇÃO mudar()
//A LISTA COMPLETA DOS VALORES readyState É A SEGUINTE:
//0 (uninitialized)
//1 (a carregar)
//2 (carregado)
//3 (interactivo)
//4 (completo)
if (retorno.readyState == 4)
{
if(retorno.status == 200)
{
//PROCURA PELA DIV MOSTRACOMBO E INSERE O OBJETO
document.getElementById('mostraHomeCollege').innerHTML = retorno.responseText;
}
else
{
//MOSTRA UM ALERTA AO OBTER UM RETORNO DE OK.
alert("Houve um problema ao obter os dados:\n" + retorno.statusText);
}
}
}

//FUNÇÃO MUDAR, QUE CHAMA AS INFORMAÇÕES PASSADAS NO PARÂMETRO E CARREGA O ARQUIVO EXTERNO
function mudar(valor)
{
//CARREGA O ARQUIVO EXTERNO DO AJAX
CarregaArquivo("homeCollege.php",valor);
}



Show Home College (combobox)


<div id="mostraHomeCollege">
<select name="homeCollege">
<option>Select Home College</option>
</select>



homeCollege.php



<select name="homeCollege">
<option>Select Home College</option>
<?php
// INCLUSÃO DO ARQUIVOS DE CONFIGURAÇÃO E CONEXÃO COM O BANCO DE DADOS
include "config.inc.php";
//a
$sql2 = "SELECT IDCollege,nameCollege FROM college WHERE IDCity = '".$_GET['homeCity']."'";
$resultado2 = mysql_query($sql2) or die ("Erro na consulta do banco");
while($linha2 = mysql_fetch_array($resultado2))
{
?>
<option value="<?=$linha2['IDCollege'] ?>">
<?=$linha2['nameCollege'] ?>
</option>
<?
}
?>
</select>




erasmusCollege.php


<select name="erasmusCollege">
<option>Select Erasmus College</option>
<?php
// INCLUSÃO DO ARQUIVOS DE CONFIGURAÇÃO E CONEXÃO COM O BANCO DE DADOS
include "config.inc.php";
//a
$sql4 = "SELECT IDCollege,nameCollege FROM college WHERE IDCity = '".$_GET['erasmusCity']."'";
$resultado4 = mysql_query($sql4) or die ("Erro na consulta do banco");
while($linha4 = mysql_fetch_array($resultado4))
{
?>
<option value="<?=$linha4['IDCollege'] ?>">
<?=$linha4['nameCollege'] ?>
</option>
<?
}
?>
</select>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum