Atualização de combos inferiores baseado nos combos superiores [Javascript]

Atualização de combos inferiores baseado nos combos superiores

Publicado por Hudson Carlos de Oliveira 25/03/2009

[ Hits: 6.412 ]

Homepage: http://hudsoncarlosdeoliveira.spaces.live.com

Download Pesquisa_detalhada.rar

0 0

Denuncie Favoritos Indicar

Este script Ajax/Javascript/Asp funciona perfeitamente. Lanço um desafio para quem consegue fazê-lo funcionar com PHP/MySQL, lembrando que para isto basta traduzir os scripts ASP para PHP

O mesmo está disponível para download e como código fonte. Ele funciona perfeitamente, executando-se até o arquivo "executa.asp", já que a partir daí trata-se de sistema múltiplo de combos, e até agora não houve êxito deste script Ajax/ASP, somente no Ajax/PHP.

Por isso, para aqueles que quiserem se aventurar, o arquivo "executa2.asp" já está pronto, e o banco de dados bairros também (para download, é claro!). O script já está todo programado e já foi testado, bastando baixá-lo e descompactá-lo no seu computador.

Lembrando também que terá que possuir o servidor compatível com ASP em seu computador, geralmente IIS (Internet Information Service), versão 3 ou superior, o que vem geralmente no CD de instalação do Windows XP SP2 (Service Pack 2) ou superior. Quem não possui este na máquina tem que instalá-lo ou outro equivalente que rode ASP, se não o script não funcionará.

Esconder código-fonte

O Código fonte é este: 
1)Arquivo: "Index.php":
<%@ Language=VBScript %>
<HTML>
            <HEAD>
                        <script>
// A função abaixo pega a versão mais nova do xmlhttp do IE e verifica se é Firefox. Funciona nos dois.
function createXMLHTTP()
            {
                        try
                        {
                                   ajax = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch(e)
                        {
                                   try
                                   {
                                               ajax = new ActiveXObject("Msxml2.XMLHTTP");
                                               alert(ajax);
                                   }
                                   catch(ex)
                                   {
                                               try
                                               {
                                                           ajax = new XMLHttpRequest();
                                               }
                                               catch(exc)
                                               {
                                                            alert("Esse browser não tem recursos para uso do Ajax");
                                                            ajax = null;
                                               }
                                   }
                                   return ajax;
                        }
           
           
               var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
               "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",
               "Microsoft.XMLHTTP"];
               for (var i=0; i < arrSignatures.length; i++) {
                                                                          try {
                                                                                                             var oRequest = new ActiveXObject(arrSignatures[i]);
                                                                                                             return oRequest;
                                                                          } catch (oError) {
                                                                          }
                                      }
           
                                      throw new Error("MSXML is not installed on your system.");
                        }                                 function recuperarCarro(sTipo)
                                   {
// Criação do objeto XMLHTTP
                                               var oHTTPRequest = createXMLHTTP();
// Abrindo a solicitação HTTP. O primeiro parâmetro informa o método post/get
// O segundo parâmetro informa o arquivo solicitado que pode ser asp, php, txt, xml, etc.
// O terceiro parametro informa que a solicitacao nao assincrona,
// Para solicitação síncrona, o parâmetro deve ser false
                                               oHTTPRequest.open("post", "executa.asp", true);
// Para solicitações utilizando o método post, deve ser acrescentado este cabecalho HTTP
                                               oHTTPRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// A função abaixo é executada sempre que o estado do objeto muda (onreadystatechange)
                                               oHTTPRequest.onreadystatechange=function() {
// O valor 4 significa que o objeto já completou a solicitação
                                                           if (oHTTPRequest.readyState==4){
// Abaixo o texto é gerado no arquivo executa.asp e colocado no div
                                                                       document.all.divCarros.innerHTML = oHTTPRequest.responseText;
                                                           }
                                               }
// Abaixo é enviada a solicitação. Note que a configuração
// do evento onreadystatechange deve ser feita antes do send.
                                               oHTTPRequest.send("estado=" + sTipo);
                                   }
                           
                        </script>
            </HEAD>
            <body onload="recuperarCarro(document.formulario.cmbEstado.value);">
                        <form id="formulario" name="formulario">
                                   
  <table border="0">
 
    <tr> 
      <td>Estado:</td>
      <td> <select name="cmbEstado" id="cmbEstado" onchange="recuperarCarro(this.value)" style="WIDTH:200px">
          <%
                                                                                  Dim oConn, oRS
                                                                                  Set oConn = Server.CreateObject   ("ADODB.Connection")
                                                                                  oConn.Open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & Server.MapPath("banco.mdb")
                                                                                  set oRS = oConn.Execute("SELECT * FROM tab_estados ORDER BY id_estado")
                                                                                  while not oRS.eof
                                                                                              Response.Write "<option value=" & oRS(0) & ">" & oRS(1) & "</option>"
                                                                                              oRS.movenext
                                                                                  wend
                                                                                  %>
        </select> </td>
    </tr>
    <tr> 
      <td>Cidade:</td>
      <td><div id="divCarros"></div></td>
    </tr>
    
 
  </table>
                        </form>
            </body>
</HTML>

2) Arquivo "executa.asp":
<select name="cmbCidades" id="cmbCidades" style="width:100%;" onChange="recuperarCarro_2()">
            <%
            Dim oConn, oRS
            Set oConn = Server.CreateObject("ADODB.Connection")
            oConn.Open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & Server.MapPath("banco.mdb")
            set oRS = oConn.Execute("SELECT * FROM tab_cidades where estado = " & Request.Form("estado") & " ORDER BY idcidade")
            while not oRS.eof
                                   Response.Write "<option value=" & oRS(0) & ">" & server.HTMLEncode(oRS(2)) & "</option>"
                                   oRS.movenext
            wend
            %>
</select>

3) Arquivo "executa2.asp":
<select name="cmbBairros" id="cmbBairros" style="width:100%;">
            <%
            Dim oConn, oRS
            Set oConn = Server.CreateObject("ADODB.Connection")
            oConn.Open "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & Server.MapPath("banco.mdb")
            set oRS = oConn.Execute("SELECT * FROM tab_bairros where cidade = " & Request.Form("cidade") & " ORDER BY id_bairros")
            while not oRS.eof
                                   Response.Write "<option value=" & oRS(0) & ">" & server.HTMLEncode(oRS(3)) & "</option>"
                                   oRS.movenext
            wend
            %>
</select>

Scripts recomendados

Palheta de cores utilizando Json e javascript não obstrutivo

elementoId

grazielly

Script para envio de varias menssagens

Carregar dados a partir de JSON

Comentários

[1] Comentário enviado por aribeiro_sjrp em 25/03/2009 - 12:19h

Hudson não sei se eh bem isso que vc pretendia, mas no meu blog tem uma explicação de como fazer isso:
http://www.bluetux.com.br/blog/show/5

Abraço,
Alfredo

0 0

[2] Comentário enviado por hudson.carlos em 27/03/2009 - 15:30h

Olá Ribeiro, é um script interessante este que você tem, mas infelizmente no meu caso ele não retornou resultado no combo cidades. O que poderá ter havido de errado? Se retornou resultado no primeiro combo, isto indica que a conexão com o banco de dados funciona. Mas há algumas dúvidas, neste script por exemplo: "opt.text = result[i].NOME;
opt.value = result[i].CIDADE;", os termos NOME e CIDADE, são variáveis do script? Pois não são declaradas e o Internet Explorer retorna como objeto não definido nesta linha. Ou se trata do nome dos campos da tabela cidades? Se puder me ajudar nessa agradeço.

0 0