[Resolvido] combos dinâmicos

marvi · Julho 3, 2008

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... Alguém conhece um modelo, exemplo desses combos que rodem ou que possa rodar com 4 combos?

Preciso muito!

Obrigado!

Marcelo

Salgado · Julho 3, 2008

Dê uma pesquisada por AJAX, é a melhor forma de fazer o que você quer.

marvi · Julho 3, 2008

Olá Salgado, é isso, já estou tentando com AJAX:

Eu já estou fazendo, no meu caso será País - Estado - Cidade - Profissionais, coloquei o do carro 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>

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


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


Combo 4:
<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, se eu achar eu te aviso também...

Obrigado mesmo!

Marcelo

Salgado · Julho 4, 2008

Tem ele rodando online? Aparentemente é algum erro no JavaScript.

Adaptei algo que eu tinha e aparentemente está funcionando: teste. Os códigos são:

default.asp

<html>
<head><title>Teste SelectBox</title>
<script src="funcoes.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function RetornoAjax(id, url, container) {
document.getElementById(container).innerHTML = '<option>Carregando..</option>';
ajax = ajaxInit();
if(ajax) {
  caminho = url + "?id=" + id + "&sid=" + Math.random();
  ajax.open("GET", caminho, true);
  ajax.onreadystatechange = function() {
 if(ajax.readyState == 4) {
   if(ajax.status == 200) {
	 document.getElementById(container).innerHTML = ajax.responseText;
	 document.getElementById(container).disabled = false;
   } else {
	 alert(ajax.statusText);
   }
 }
  }
  ajax.send(null);
}
}</script>
<link href="estilo.css" rel="stylesheet" type="text/css">
</head>
<body>
Combo 1:
<select  name="combo1" id="combo1" onchange="RetornoAjax(this.value, 'executa.asp', 'combo2');" class="caixa">
<option value="">Selecione o País</option>
<option value="1">País 1</option>
<option value="2">País 2</option>
<option value="3">País 3</option>
</select>
<br>
Combo 2:
<select name="combo2" id="combo2" onchange="RetornoAjax(this.value, 'executa.asp', 'combo3');" disabled class="caixa"></select>
<br>
Combo 3:
<select name="combo3" id="combo3" onchange="RetornoAjax(this.value, 'executa.asp', 'combo4');" disabled class="caixa"></select>
<br>
Combo 4:
<select name="combo4" id="combo4" disabled class="caixa"></select>
</body>

executa.asp

<% id = request.querystring("id")
Valor = "<option value="""">Selecione</option>"
Select Case id
Case 1
Valor = Valor &"<option value="""& id &""">País 1</option>"
Case 2
Valor = Valor &"<option value="""& id &""">País 2</option>"
Case 3
Valor = Valor &"<option value="""& id &""">País 3</option>"
Case Else
Valor = "<option value="""& id &""">Nada Selecionado</option>"

End Select
%><%=Valor%>

funcoes.js

function ajaxInit() {
var req;

try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
try {
 req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(ex) {
 try {
  req = new XMLHttpRequest();
 } catch(exc) {
  alert("Esse browser não tem recursos para uso do Ajax");
  req = null;
 }
}
}

return req;
}

Agora é basicamente ajustar para pegar os dados do BD no arquivo execute.asp e na default, e também verificar o caso dos acentos, é algo com a codificação de exibição da página.

marvi · Julho 4, 2008

Ok, ja foi resolvido!

Obrigado mesmo!!!

marvi · Julho 4, 2008

Olá pessoal,

Eu tenho um sistema de combos que só roda no Fire Fox e não roda no internet explorer em nenhuma versão, eu uso o IE 7. No IE 7 ele fica parado, não dar erro e também não roda...

Quem quiser abaixar o sistema clique aqui

No mais, passo os códigos:

Default.asp:

<!--#include file="conexao_marvi.asp"-->
<script src="funcoes.js" type="text/javascript"></script>

<%
call abre_conexao

sql = "select * from paises order by pais"
set tab = conexao.execute(sql)

%>
Países:
<select name="paises" id="paises" onchange="RetornoAjax(this.value, 'estados.asp', 'estados')">
<option value="">-Selecione-</option>
<% while not tab.eof %>
<option value="<%= tab("id_pais")%>"><%= tab("pais")%></option>
<% tab.movenext
  wend
%>

</select>


Estados:
<select name="estados" id="estados" onchange="RetornoAjax(this.value, 'cidades.asp', 'cidades')"></select>


Cidades:
<select name="cidades" id="cidades" onchange="RetornoAjax(this.value, 'profissionais.asp', 'profs')"></select>


Profissionais:
<select name="profs" id="profs"></select>


<%
conexao.close
set tab = nothing
%>

Funções.js:

function RetornoAjax(id, url, container)
{
if (id == "")
 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
}

Uma página para verem que eles chamam.

estados.asp:

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

<%
Response.Charset = "ISO-8859-1"
call abre_conexao
id = request.querystring("id")

sql = "select * from estados where id_pais ="& id &" order by estado"
set tab = conexao.execute(sql)
%>
<option value="">-Selecione-</option>
<% while not tab.eof %>
<option value="<%= tab("id_estado")%>"><%= tab("estado")%></option>
<% tab.movenext
  wend
 conexao.close
 set tab = nothing
%>

Se alguém pode me ajudar fico muito grato... Pois tenho uma semana com isso...

Obrigado!

Marcelo

marvi · Julho 4, 2008

ok, resolvi, obrigado!

Salgado · Julho 4, 2008

Qual era o problema? Assim corrijo o meu AJAX também.

Arquivado

[Resolvido] combos dinâmicos

Recommended Posts

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Salgado 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Salgado 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Salgado 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Fóruns

Tempo Real

Informação importante