Ajax - vários combos

[.Andreia.]

Pessoal,

vou colocar aqui um exemplo simples de ajax trabalhando com vários combos. não vou colocar a parte de programação (tipo ASP, PHP, Vb.net,...) porque isso não altera em nada, a idéia continua a mesma.. Qualquer dúvida é só postar aqui ;)

default.html

<script src="funcoes.js" type="text/javascript"></script>

 Combo 1:
 <select name="combo1" id="combo1" onchange="RetornoAjax(this.value, 'pagina1.html', 'combo2')">
 <option value="1">Combo 1-1</option>
 <option value="2">Combo 1-2</option>
 <option value="3">Combo 1-3</option>
 </select>


 Combo 2:
 <select name="combo2" id="combo2" onchange="RetornoAjax(this.value, 'pagina2.html', 'combo3')"></select>


 Combo 3:
 <select name="combo3" id="combo3" onchange="RetornoAjax(this.value, 'pagina3.html', 'combo4')"></select>


 Combo 4:
 <select name="combo4" id="combo4"></select>

funcoes.js

function RetornoAjax(id, url, container)
 {
 var xmlHttp=GetXmlHttpObject()

 if (xmlHttp==null)
 {
     alert ("Este browser não suporta HTTP Request")
     return
 }

 var url=url;
 url=url+"?id="+id;
 url=url+"&sid="+Math.random();
 xmlHttp.onreadystatechange=function()
 {
     if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
     { 
         document.getElementById(container).innerHTML=xmlHttp.responseText
     }
 }
 xmlHttp.open("GET",url,true)
 xmlHttp.send(null)
 }

 function GetXmlHttpObject()
 {
 var objXMLHttp=null

     if (window.XMLHttpRequest)
         objXMLHttp=new XMLHttpRequest()
     else if (window.ActiveXObject)
         objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

 return objXMLHttp
 }

pagina1.html

<option value="1">Combo 2-1</option>
 <option value="2">Combo 2-2</option>
 <option value="3">Combo 2-3</option>

pagina2.html

<option value="1">Combo 3-1</option>
 <option value="2">Combo 3-2</option>
 <option value="3">Combo 3-3</option>

pagina3.html

<option value="1">Combo 4-1</option>
 <option value="2">Combo 4-2</option>
 <option value="3">Combo 4-3</option>

[Guest --Mauro --]

Fiz exatamente como falou. Vou postar o código que interessa.

index.php

Tipo <select name="combo1" id="combo1" onchange="RetornoAjax(this.value, 'busca_1.php', 'combo2')">
           <option value="1">Carro</option>
           <option value="2">Moto</option>
         </select>
  
  Marca <select name="combo2" id="combo2" onchange="RetornoAjax(this.value, 'busca_2.php', 'combo3')"></select>
  
  Modelo<select name="combo3" id="combo3"></select>

funcoes.js

function RetornoAjax(id, url, container)
{
var xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)
{
     alert ("Este browser não suporta HTTP Request")
     return
}

var url=url;
url=url+"?id="+id;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=function()
{
     if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
     { 
         document.getElementById(container).innerHTML=xmlHttp.responseText
     }
}
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function GetXmlHttpObject()
{
var objXMLHttp=null

     if (window.XMLHttpRequest)
         objXMLHttp=new XMLHttpRequest()
     else if (window.ActiveXObject)
         objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

return objXMLHttp
}

busca_1.php

<? include "inc/inc_conexao.php"; ?>
  <option value="">Selecione uma marca
  <? $link1 = mysql_query("SELECT * FROM tab_marca where tp_veiculo='$combo1 ORDER BY marca'",$conexao); ?>
  <? while($linha1 = mysql_fetch_row($link1)){ ?>                              
    <option value="<? echo $linha1[0]; ?>"><? echo $linha1[1]; ?>
  <? } ?>

busca_2.php

<? include "inc/inc_conexao.php"; ?>
  <option value="">Selecione uma marca
  <? $link2 = mysql_query("SELECT * FROM tab_modelos where id_marca='$combo2' ORDER BY modelo'",$conexao); ?>
  <? while($linha2 = mysql_fetch_row($link2)){ ?>                              
    <option value="<? echo $linha2[0]; ?>"><? echo $linha2[1]; ?>
  <? } ?>

Agradeço se puder me dar uma luz.

[.Andreia.]

E o que não deu certo? qual erro Mauro?

[marvi]

Combo roda bem! Mas seria interessante e que venho buscando e não acho era ter combo em Ajax que não fosse pré-definidos e sim que ele fosse sendo criado automaticamente até quanto for necessário...

[.Andreia.]

Marvi, para isto voce tem que criar os combos diretamente na pagina que o ajax processa.. em vez de estar estatico na pagina

[marvi]

Você fala dentro da função:

function RetornoAjax(id, url, container)
{
    if (id == "")
    {
        document.getElementById("subcategoria").innerHTML = "<select></select>";
        document.getElementById("subcategoria1").innerHTML = "<select></select>";
        document.getElementById("subcategoria2").innerHTML = "<select></select>";
        document.getElementById("subcategoria3").innerHTML = "<select></select>";
        document.getElementById("subcategoria4").innerHTML = "<select></select>";
        return
    }

var xmlHttp=GetXmlHttpObject()

if (xmlHttp==null)
{
     alert ("Este browser não suporta HTTP Request")
     return
}

var url=url;
url=url+"?id="+id;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=function()
{
     if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
     {
document.getElementById(container).innerHTML=xmlHttp.responseText;
     }
}
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function GetXmlHttpObject()
{
var objXMLHttp=null

     if (window.XMLHttpRequest)
         objXMLHttp=new XMLHttpRequest()
     else if (window.ActiveXObject)
         objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

return objXMLHttp
}

?

[Londim]

caraca esse codigo so funciona no firefox tem como adaptalo para o internet explorer 7?

Editado Outubro 23, 2008 por Londim

[.Andreia.]

Vou dar uma olhadinha se eu achar a forma posto aqui.

Mas se quiser tentar tb fica à vontade ;)