Jump to content
Fórum Script Brasil
  • 0
Sign in to follow this  
.Andreia.

Um Exemplo Do Uso Do Ajax

Question

Combos de estados e cidades usando Ajax

Funcionamento: O combo de estados é carregado ao abrir a pagina, ao selecionar um estado o combo de cidades é carregado automaticamente com as cidades referente ao estado selecionado.

São 3 arquivos: o inicial (.asp), include (.js) e o arquivo de retorno do segundo combo (.asp)

O arquivo conexao.asp é uma função que conecta ao banco de dados (access).

-> Testado no IE 7/8 e FF 3

Download dos arquivos em: http://scriptbrasil.com.br/download/codigo/6824/

conexao.asp

<%
dim conexao
sub abre_conexao
Set Conexao = Server.CreateObject("ADODB.Connection")
Conexao.Open "DBQ=CAMINHO_DA_PASTA\NOME_DO_BANCO.mdb;Driver={Microsoft Access Driver (*.mdb)}"
end sub
sub fecha_conexao
     Conexao.close
     Set Conexao = nothing
end sub 
%>
ajax_combo.asp
<!--#include file="conexao.asp"-->
<%
call abre_conexao

sql = "select id_estado, estado from estados order by estado"
set tab = conexao.execute(sql)
%>
<html>
<head>
&lt;script src="seleciona_cidade.js"></script>
</head>
<title>Exemplo de Ajax</title>

<style type="text/css">
table
{
font-family: verdana;
font-size: 11px;
color: #000099;
font-weight: bold;
}

select
{
font-family: verdana;
font-size: 11px;
}
</style>

<body>

<table border="1" width="40%" cellspacing="0" cellpadding="5" bgcolor="#EAEBEF" bordercolorlight="#FFFFFF" bordercolordark="#E3E5EA">
    <tr>
        <td width="10%">Estado:</td>
        <td width="30%"><select name="estados" onchange="MandaID(this.value)">
                <option value="">Selecione</option>
                <% while not tab.eof %>
                <option value="<%= tab("id_estado") %>"><%= tab("estado") %></option>
                <% tab.movenext
                     wend
                %>
                </select>
        </td>
    </tr>
    <tr>
        <td>Cidade:</td>
        <td><div id="exibe_cidade"><select><option value="">Selecione um estado</option></select></div></td>
    </tr>
</table>

<%
call fecha_conexao
set tab = nothing
%>

</body>
</html>
seleciona_cidade.js
var xmlHttp function MandaID(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Este browser não suporta HTTP Request") return } var url="seleciona_cidade.asp" url=url+"?id_estado="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged //ENVIO POR GET xmlHttp.open("GET",url,true) xmlHttp.send(null) //ENVIO POR POST //xmlHttp.open("POST",url,true) //xmlHttp.send(url) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("exibe_cidade").innerHTML=xmlHttp.responseText } } function GetXmlHttpObject() { var objXMLHttp=null if (window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() } else if (window.ActiveXObject) { objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") } return objXMLHttp }
seleciona_cidade.asp
<!--#include file="conexao.asp"-->

<% 
Response.Charset = "ISO-8859-1"
id_estado = request.querystring("id_estado") 
%>

<select name="cidades">
<% if id_estado = "" then %>
    <option value="">Selecione um estado</option>
<% else

      call abre_conexao
        
     sql_cidade="SELECT id_cidade, cidade FROM CIDADES WHERE id_estado="& id_estado
     set tab_cidade = conexao.execute(sql_cidade)
     while not tab_cidade.eof 
%>
        <option value="<%= tab_cidade("id_cidade") %>"><%= tab_cidade("cidade") %></option>

<% tab_cidade.movenext
     wend

     call fecha_conexao
     set tab_cidade = nothing

     end if
%>
</select>

[editando]Algumas pessoas tem me perguntado como fazer com o POST, então editei o codigo seleciona_cidade.js com as duas opcoes (destaque em azul). Testei aqui e funcionou mas caso alguém tenha problema é só avisar[/editando]

Edited by .Andreia.

Share this post


Link to post
Share on other sites

17 answers to this question

Recommended Posts

  • 0

quem tiver duvidas basta postar aqui... nume vejo nada d complicado nesse script... qualquer coisa né...

Share this post


Link to post
Share on other sites
  • 0

já editei o post colocando o arquivo conexao.asp. Atente que tem você tem que alterar o codigo colocando o nome do BD e o caminho da pasta de onde ele estiver em sua maquina.

Crie um BD no Access com a seguinte estrutura:

Nome da tabela1: Cidades

Nome do campo1: id_cidade (auto-numerico)

Nome do campo2: id_estado (número)

Nome do campo3: cidade (texto)

Nome da tabela2: Estados

Nome do campo1: id_estado (auto-numerico)

Nome do campo2: estado (texto)

Depois você precisa inserir valores neles, ou seja, jogar as cidades e os estados.

qualquer duvida estamos aí ;)

Share this post


Link to post
Share on other sites
  • 0
Guest Davi S. Dourado
Agora foi certinho, muito obrigado....

Dias atras, vi a sua página, e fiz o exemplo. Naturalmente que fiz a conexão (da forma que conheço) e funcionou.

Achei muito legal, e pra ter dizer a verdade, já fiz vários exemplos, mas esse foi o único que funcionou direitinho. Parabéns.

Por outro lado, como ainda não tinha o código da Conexao tempos atráz, fiquei pensando: O que será que tem naquele "Call Abre_conexao" e "call Fecha_conexao", e fiquei imaginando mil formas de abrir a conexão sem ter que mostrar no proprio fonte em ASP e mesmo em arquivos include (é a forma que consegui fazer em minhas aplicações até Hoje.

Atualmente estou com um exemplo em Java onde utilizo um applet. Não está 100 por cento, pois só consigo testá-lo no appeltviwer. No browse não funciona. Acredito que seja por motivo do CLASSPATH, o que já configurei, deve estar certo, mas não encontra a classe, apesar de estar lá, tudo certingo.....

alguém tem algo a dizer sobre o CLASSPATCH do Oracle

Share this post


Link to post
Share on other sites
  • 0

oi andreia_sp, parabens pelo seu codigo funcionou muito bem aqui, porem eu gostaria de pedir a sua ajuda..

gostaria de aplicar esse script para mais que 2 combos... no total seria 5 combos lendo apenas uma tabela com 5 colunas. Uma coluna dependendo da seleção da outra.

já tentei usar o seu codigo aqui postado, porém meu conhecimento não esta ajudando... gostaria muito que me ajudasse ..

eu tenho um script mas ele faz refresh na pagina e isso está atrapalhando, fora que é muito ruim o refresh na pagina.

por exemplo o ultimo select seria assim:

select coluna5

from tabela

where coluna1 = A

and coluna2 = B

and coluna3 = C

and coluna4 = D

group by coluna5

Share this post


Link to post
Share on other sites
  • 0
Guest --Dede --

ninguém ai tem o BD completo não galera? Que nem sei tdas as cidades :( sorry

Share this post


Link to post
Share on other sites
  • 0

OI Andreia_sp

Tudo funcionou muito bem.

Só tem um detalhe. Tento recuperar o valor do SELECT cidades e retorna vazio. Tento dar um cidades.focus() e diz que está invisível ou desabilitado...

E por conta disso, não estou conseguindo processar o formuário corretamento.

Saberia como resolver??

Obrigado!

Share this post


Link to post
Share on other sites
  • 0

no codigo ali o campo select da cidade ta sem nome...

coloque um nome e um id...

e experimente usar o document.getelementbyid("campo")

Share this post


Link to post
Share on other sites
  • 0

O primeiro combo, inicial, realmente não tem id mas o combo que retorna do arquivo seleciona_cidade.asp tem. é só fazer um

request("cidades")
para cidade e
request("estados")

para o estado

Share this post


Link to post
Share on other sites
  • 0

Muito otimo este combos seu andreia mais estou com um problema eu estou usando 3 tabelas uma chama depto, e as outras são suas tabelas de CIDADE e ESTADO estou conseguindo inserir o codigo tanto da cidade como do estdo dentro desta tabela depto, mais queria mostra na pagina eles não como codigo e sim pelo nome da cidade e pela sigla, teria como fazer?como?

Agradeço desde já atenção

Esta de parabens pelo combo foi o unico que consegui fazer funcionar

Share this post


Link to post
Share on other sites
  • 0

Opa valeu Kleber :)

então, você quer colocar 3 combos ligados entre si ou você quer substituir em vez de ESTADO -> CIDADE para CIDADE -> SIGLA ??

Essa sigla seria do estado ne? Bom, se for isso, o que você tem que ter é a ID da cidade selecionada sendo passada para o ajax ir lá na pagina de pesquisa e filtrar só as siglas com aquele ID..

Share this post


Link to post
Share on other sites
  • 0
Guest Diego Lazzari

Cara muito interessante esse tutorial resolveu ate metade do meu problema. Converti esse codigo para php e funcionou perfeitamente o problema que insiste em persistir é o navegador

Utilizo rotinas em php + ajax + xml que rodam perfeitamente no IE, instalei o google chrome e notei que nele essas rotinas não rodavam, o mesmo acontecia com o Firefox, essa solução acima funcionou no Google Chrome mais no Firefox continua com problema não sei se fiz algo errado ou realmente essa rotina não funciona no FIREFOX

Share this post


Link to post
Share on other sites
  • 0
Guest Jonathan

Poderiam por gentileza me enviar o arquivo do bando acess, pois só tenho o sql na minha máquina.

Grato

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  



  • Forum Statistics

    • Total Topics
      148575
    • Total Posts
      644272
×
×
  • Create New...