none
Combos dinâmicos RRS feed

  • Pergunta

  • Olá pessoal,

    Estou querendo fazer 4 combos dinâmicos, onde a pessoa seleciona um, depois o outro... Ou seja, um combo é carregado a partir do outro combo anterior... veja o exemplo desse site: http://portal.mundiauto.com.br/mundiautos/home.aspx na opção BUSCAR POR VEÍCULOS tem vários combos para pesquisa, quero algo assim, no meu caso será 4 combos.

    O que acontece é que tentei com meus códigos e nada, encontrei uns exemplos na Internet e só achei com 2 combos, mesmo assim tentei implementar e nada, foram em AJAX e java script... Alguém conhece um modelo, exemplo desses combos que rodem ou que possa rodar com 4 combos?

     

    Aproveitando, estou com uma programação de combos atualmente que é essa e quem pode ajudar:


    Eu já estou fazendo, no meu caso, será País - Estado - Cidade - Profissionais, coloquei o do carro a cima só como exemplo...

     

    Ok, meu combo 1 já gera os paises do banco de dados:


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

    Combo 1:
    <select  name="combo1" id="combo1" onchange="RetornoAjax(this.value, 'pagina1.asp', 'combo2')" style="color: #575757; border: 1px solid #C0C0C0; background-color: #FFFFFF">
    <option value="Selecione o Estado">Selecione o País</option>
    <%
    executar = "select * from paises order by id"
    dim conexao

    Call abre_conexao

    Set rsbusca=Conexao.Execute(executar)

    Do Until rsbusca.EOF
      Response.Write "<option value="&rsbusca("id")&">"&rsbusca("paises")&"</option>"
      rsbusca.MoveNext
    Loop
    %>
    </select>

     

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


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


    <select name="combo4" id="combo4"></select>

     

    ---------------------------------------------------------------------------------

     

    Até aí tudo bem, pelo que vemos temos o onchange="RetornoAjax(this.value, 'pagina1.asp', 'combo2')"  que chama a pagina1.asp

     

    A pagina1.asp:


    <!--#include file="conexao1.asp"-->

    <% id = request.querystring("id")

    sql = "select * from estados where id_pais = "& id
    set tab = conexao.execute(sql)

    while not tab.eof
    %>
    <option value="<%= tab("id")%>"><%= tab("estado")%></option>
    <% tab.movenext
    wend %>

     

    --------------------------------------------------------------------------

    Meu ajax:


    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("post",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
    }

     

    -------------------------------------------------------------------------------------------------

     

    Encontrou algum erro até aí? Pois aqui deu um erro de script mesmo, o erro ocorre quando seleciono no combo1 o país, não sei como colocar esse erro aqui, mas ele diz:

     

    Linha 19
    Caractere 10
    Erro: Erro em tempo de execução desconhecido
    Codigo 0
    URL index.asp

     

    O que deve ser? Pois não consigo ver o errro... Enquanto isso vou tentando descobrir aqui...

     

    Obrigado mesmo!

     

    Marcelo

    quinta-feira, 3 de julho de 2008 17:01

Respostas

  • Marcelo, creio que a melhor forma de se fazer isso seria utilizando o xml, ou seja, o asp gera um XML que vai ser recuperado pelo objeto JS, vou exemplificar como:

     

    <%
    id = split(Request.QueryString("id"),"|")
    info = id(0)

    sql = "select * from estados where id_pais = "& info
    set tab = conexao.execute(sql)

     

    Response.Write("<?xml version='1.0' encoding='ISO-8859-1'?>")

    Response.Write("<estados>")

    while not tab.eof

         Response.Write("<estado id=""" & tab("id") & """>" & tab("estado") & "</estado>")
    tab.movenext
    wend

    Response.Write("</estados>")

     %>

     

    Isso vai gerar o XML de retorno já no javascript voce trocaria pelo código a seguir, no qual altera a chamada de responseText para responseXML. A montagem dos options dentro do select também é diferente.

     


    xmlHttp.onreadystatechange=function()
    {
         if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
         {

             if (xmlHttp.status == 200)

             {

                   var xml = xmlHttp.responseXML;
                   var select = document.getElementById("id_do_seu_select");

                   var array_estados = xml.getElementsByTagName("estado");

                   for (i=0; i < array_estados.length; i++)

                   {

                          var new_option = document.createElement("option");

                          new_option.value = array_estadosIdea.getAttribute("id");

                          new_option.innerHTML = array_estadosIdea.firstChild.nodeValue;

                          select.appendChild(new_option);

                    }

             }

             else

             {

                   alert("Erro na página asp:\nStatus:" + xmlHttp.status);

             }
         }
    }

     

     

    Bom faça um teste ai.

     

    Abraços

     

    Estevam

    sexta-feira, 4 de julho de 2008 16:31

Todas as Respostas

  • Marcelo, depois das linhas abaixo de um alert na URL e veja o que aparece, pois o problema parece estar ocorrendo na abertura do objeto.

     

     

    var url=url;
    url=url+"?id="+id;
    url=url+"&sid="+Math.random();

    -->

    alert("URL: " + url);

     

     

    Abraço

     

    Estevam

    quinta-feira, 3 de julho de 2008 18:39
  • Luiz,

     

    Fiz o que você falou e deu essa mensagem: URL: pagina1.asp?id=1&sid=0.6209015357485326

     

    Agora não sei se deveria ir só o valor 1 ou esse sid=0.6209015357485326...

     

    Eu acho que deveria ir só o valor 1 do id...

     

    Para testar coloquei o split na pagina1.asp:

     

    <%
    id = split(Request.QueryString("id"),"|")
    info = id(0)

    sql = "select * from estados where id_pais = "& info
    set tab = conexao.execute(sql)

    while not tab.eof
    %>
    <option value="<%= tab("id")%>"><%= tab("estado")%></option>
    <% tab.movenext
    wend %>

     

    ----------------------------

     

    Mas continua o erro...

     

    Obrigado

     

    Marcelo

    quinta-feira, 3 de julho de 2008 19:28
  • Marcelo, na verdade o sid continua sim, do jeito que esta, pelo que parece ele esta usando o sid para gerar um numero aleatório, pois os browsers guardam cache de URL, ai quando recebe uma requisiçao que já tinha sido feita ele nao faz o processamento, ele pega o resultado do cache, mas tente trocar a parte do código abaixo:

     

    xmlHttp.onreadystatechange=function()
    {
         if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
         {
             document.getElementById(container).innerHTML=xmlHttp.responseText
         }
    }

     

     

    Para:

     

    xmlHttp.onreadystatechange=function()
    {
         if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
         { 

             if (xmlHttp.status == 200)

             {
                   alert("ok");

                   document.getElementById(container).innerHTML=xmlHttp.responseText

             }

             else

             {

                   alert("Erro na página asp:\nStatus:" + xmlHttp.status);

             }
         }
    }

     

    Abraços

     

    Estevam

    quinta-feira, 3 de julho de 2008 19:42
  • Olá Luiz,

     

    Fiz o que você falou, mas deu esse erro:

     

    Erro na página asp:

    Status:500

     

    O que significa?

     

    Obrigado!

     

    Marcelo

    quinta-feira, 3 de julho de 2008 19:57
  • Entao isso quer dizer que voce esta com algum erro de programaçao na pagina asp que o XMLHttp faz a requisicao, no seu caso se nao me engano é a pagina1.asp, para testar voce pode tentar acessar ela direto pelo browser passando o id manualmente para verificar o que esta ocorrendo

     

    Tipo assim:

     

    http://localhost/meusite/pagina1.asp?id=2

     

    Lembrando que é só um exemplo,voce tem que colocar um id válido e veja o que a página asp retorna.

     

    Abraço

     

    Estevam

    quinta-feira, 3 de julho de 2008 20:32
  •  

    Certo, fiz isso e encontrei dois erros, os quais eu corrigir e exibiu o estado correspondente, ok, isso na pagina1.asp...

     

    Mas, voltando para index onde deve exibir os estados no combo 2, nada acontece, não da erro, está ok mas nada acontece... Acho que as minhas referências estão ok, não? Tenho meu id e name do select mostrando combo2...

     

     

    Fiz: alert("container: " + container); e deu combo2 sim... ok... mas não responde o meu select combo 2...

     

    Obrigado pela atenção!

     

    Marcelo

    quinta-feira, 3 de julho de 2008 20:54
  • Descobrir a questão... o problema é que ele não roda no IE 7 ou internet explorer de outras versões, só roda no Fire Fox, mas não sei o porque e como resolver...

     

    Obrigado

     

    Marcelo

    sexta-feira, 4 de julho de 2008 13:28
  • Marcelo, creio que a melhor forma de se fazer isso seria utilizando o xml, ou seja, o asp gera um XML que vai ser recuperado pelo objeto JS, vou exemplificar como:

     

    <%
    id = split(Request.QueryString("id"),"|")
    info = id(0)

    sql = "select * from estados where id_pais = "& info
    set tab = conexao.execute(sql)

     

    Response.Write("<?xml version='1.0' encoding='ISO-8859-1'?>")

    Response.Write("<estados>")

    while not tab.eof

         Response.Write("<estado id=""" & tab("id") & """>" & tab("estado") & "</estado>")
    tab.movenext
    wend

    Response.Write("</estados>")

     %>

     

    Isso vai gerar o XML de retorno já no javascript voce trocaria pelo código a seguir, no qual altera a chamada de responseText para responseXML. A montagem dos options dentro do select também é diferente.

     


    xmlHttp.onreadystatechange=function()
    {
         if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
         {

             if (xmlHttp.status == 200)

             {

                   var xml = xmlHttp.responseXML;
                   var select = document.getElementById("id_do_seu_select");

                   var array_estados = xml.getElementsByTagName("estado");

                   for (i=0; i < array_estados.length; i++)

                   {

                          var new_option = document.createElement("option");

                          new_option.value = array_estadosIdea.getAttribute("id");

                          new_option.innerHTML = array_estadosIdea.firstChild.nodeValue;

                          select.appendChild(new_option);

                    }

             }

             else

             {

                   alert("Erro na página asp:\nStatus:" + xmlHttp.status);

             }
         }
    }

     

     

    Bom faça um teste ai.

     

    Abraços

     

    Estevam

    sexta-feira, 4 de julho de 2008 16:31
  • Beleza isso mesmo!

     

    Valeu pela dica, me ajudou e acho que resolvi aqui com um xml... Já estava vendo isso, mas o seu exemplo me ajudou aqui!

     

    Obrigado mesmo!

     

    sexta-feira, 4 de julho de 2008 16:35

  • Pessoal, fazer algo parecido aqui onde trabalho, so que nunca trabalhei com asp, so asp.net e nao tenho muito tempo para tentar aprender isso, sera que teria como alguem me passar um projetinho deste tipo funcionando para eu tentar adaptar ao meu sistema?

    Agradeceria muito caso alguem ajuda-se.

    Aguardo,
    quinta-feira, 16 de outubro de 2008 19:05