Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

idemilson

[Resolvido] ComboBox

Por , em ASP Clássico

Recommended Posts

idemilson    0

idemilson
Postado

Boa tarde pessoal,

 

Estou precisando fazer uma alteração em uma página, agora o cliente quer que uma ComboBox seja populada apartir de uma seleção feita na ComboBox anterior !

 

Combo 01:

 

Escolho a UF

 

Combo 02:

 

Populada com os municípios da UF selecionada

 

É possível fazer sem usar AJAX e sem Submeter a página ? :ermm:

 

Alguém já implementou dessa forma ?

 

Valeu a ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

idemilson    0

idemilson
Postado

Vinicius,

 

Li o artigo indicado, peguei o arquivo com os fontes.

 

Adaptei para a minha necessidade, mas não consigo fazer funcionar !

 

Alguém pode me ajudar ?

 

Segue abaixo o código:

 

 

Função que chama a página que vai popular a combo

function populaProjeto() {
   	alert("Popula Projeto !");
   	var comboproj = createXMLHTTP();
   	comboproj.open("post", "criarSolicitacaoComboProjetoAjax.asp", true);
   	comboproj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   	comboproj.onreadystatechange = function() {
   	if (comboproj.readyState == 4) {// abaixo o texto do gerado no arquivo executa.asp e colocado no div
       	document.all.divcomboproj.innerHTML = comboproj.responseText;
       	}
   	}
   	alert("Cheguei até aqui !");
   	comboproj.send("codestado=" + frmCriarSolicitacao.centro.value);

 

O problema é a linha abaixo do segundo alert, quando executo aparece a mensagem, via firebug, frmCriarSolicitacao is not defined !

 

Valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vinicius Ianni    189

Vinicius Ianni
Postado

Não uso firebug, então não sei como ele funciona.

Mas testou normalmente esse codigo ?

Esse erro que o firebug acusa, esse campo existe no formulário ?

E o formulário está nomeado como frm ?

Se for, falta um ponto frmCriarSolicitacao ficando frm.CriarSolicitacao

Compartilhar este post

Link para o post
Compartilhar em outros sites

idemilson    0

idemilson
Postado

Vinicius,

 

O campo existe sim !

 

O nome do formulário está correto !

 

Então poderia ser assim frm. frmCriarSolicitacao ?

 

Vou fazer o teste!

 

Abraço

 

Não uso firebug, então não sei como ele funciona.

Mas testou normalmente esse codigo ?

Esse erro que o firebug acusa, esse campo existe no formulário ?

E o formulário está nomeado como frm ?

Se for, falta um ponto frmCriarSolicitacao ficando frm.CriarSolicitacao

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

olha este exemplo, e fique livre para alterá-lo conforme sua necessidade

 

 

Tabela estados

Campos: Cod, Estado

 

Tabela Cidades

Campos: CodCidade, Cidade, CodEstado

 

Tabela Imoveis

Campos: CodImovel, CodEstado, Imoveis, CodCidade

 

Arquivo default.asp

 

CÓDIGO

<%
'AQUI REALIZAMOS A CONEXÃO COM O BANCO DE DADOS. NENHUM SEGREDO.
Set conexao = Server.CreateObject("ADODB.connection")
DSNtest = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.Mappath("dados_01.mdb")
conexao.Open DSNtest

sql = "select * from estados"
set rs = conexao.Execute(sql)
%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>:: ::</title>
<style type="text/css">
<!--
/*AQUI APLICAMOS UMA PEQUENO CSS SIMPLES.*/
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>

<body>
<!-- CHAMAMOS AQUELA FAMOSA FUNÇÃO DE AJAX QUE COMO SEMPRE DIGO É PADRÃO PARA TUDO.
VEJA EXPLICAÇÕES DELA EM OUTROS ARTIGOS MEUS, QUE SE TRATA DE AJAX.
-->
<script language="javascript" src="ajax.js"></script>
<FORM method="post" name="frm1" id="frm1">
<table width="779" height="19" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
   <td width="163" height="40" valign="top"><table width="163" border="0" cellspacing="0" cellpadding="0">
     <tr>
       <td height="29" background="Imagens/menu_001.gif"> </td>
     </tr>
     <tr>
       <td height="450" valign="top" bgcolor="#ECF2F0"><table width="150" border="0" cellspacing="0" cellpadding="0">
         <tr>
           <td height="19">
      <select style="width:200" id="estado" name="estado" onchange="trazdados();">
    <option value="0"></option>
               <%
   'ABAIXO NÓS PREENCHEMOS A PRIMEIRA COMBO. ATÉ AQUI TAMBÉM SEM NENHUM SEGREDO, NÉ?
   'NÃO ESQUEÇAM DE UMA COISA: PRECISAREMIS DO ID DA PRIMEIRA COMBO PARA PREENCHER O AS OUTRAS DUAS.
   'PORTANTO COLOQUEM NO VALUE DA COMBO O CÓDIGO DELA. PARA PEGARMOS DEPOIS...
   while not rs.EOF
   %>
               <option value="<%Response.Write(rs("COD") & "|" & rs("ESTADO"))%>" <%=selected%>><%=rs("ESTADO")%></option>
               <%
      rs.MoveNext
     wend

     rs.close
     set rs = nothing  
     %>
             </select>
           </td>
         </tr>
         <tr>
           <td height="19">
  <!-- VEJAM QUE AQUI EU NÃO FAÇO A SEGUNDA COMBO. COLOCO ELA VAZIA, APENAS PARA QUANDO O USUÁRIO ENTRAR
   VER QUE TEM A COMBO.
   E REPAREM QUE EXISTE ABAIXO ISSO: <span id='divcombouf'>. ESSA DIVI SERÁ A SEGUNDA COMBO QUE VIRÁ PREENCHIDA APÓS
   SELECIONAR UM REGISTRO NA PRIMEIRA COMBO. MAIS A FRENTE SERÁ EXPLICADO COMO E QUAL A FUNÇÃO QUE FAZ ISSO.
    -->
  <span id='divcombouf'>
             <select style="width:200" id="cidade" name="cidade" onChange="dadoscidade();">
     <option value="0"></option>
    </select>
  </span>
  </td>
         </tr>
         <tr>
           <td height="19">
  <!-- ESSA É A TERCEIRA COMBO. A EXPLICAÇÃO DA SEGUNDA (ACIMA) É EXATEMENTE IGUAL. NÃO MUDA NADA. -->
  <span id='divcomboimovel'>
             <select style="width:200" id="imovel" name="imovel">
               <option value="0"></option>
             </select>
  </span>
  </td>
         </tr>
         <tr>
           <td height="19"> </td>
         </tr>
       </table></td>
     </tr>
   </table></td>
   <td width="453"></td>
   <td width="163" valign="top"><table width="163" border="0" cellspacing="0" cellpadding="0">
     <tr>
       <td height="29" background="Imagens/menu_002.gif"> </td>
     </tr>
     <tr>
       <td height="450" bgcolor="#F9FBFA"> </td>
     </tr>
   </table></td>
 </tr>
</table>
<table width="779" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
   <td height="33" background="Imagens/barra_003.gif"> </td>
 </tr>
</table>

<!-- AQUI COMO JÁ TINHA DITO PRECISO DOS ID'S DOS REGISTROS QUE ESTÃO NA COMBO PARA PODER PREENCHER CADA UMA.
ENTÃO CRIA - SE UM CAMPO HIDDEN PARA CADA COMBO. ASSIM QUANDO SELECIONAR UM REGISTRO, O ID DELE IRÁ PARA OS CAMPOS HIDDEN'S.
ISSO VALE PARA AS TRÊS COMBOS.
-->
<input type="hidden" name="codestado" id="codestado" value="<%=codestado%>" size="3">
<input type="hidden" name="codcidade" id="codcidade" value="<%=codcidade%>" size="3">
<input type="hidden" name="codimovel" id="codimovel" value="<%=codimovel%>" size="3">
</form>
</body>
</html>

<script>

//ESSA FUNÇÃO IRÁ TRAZER O ID DO ESTADO SELECIONADO NA PRIMEITA COMBO PARA PODERMOS PREENCHER A SEGUNDA E TERCEIRA COMBO.
function trazdados()
{
   //AQUI "INFORMAMOS" QUE O PRIMEIRA COMBO SERÁ SELECIOANDA E DEPOIS DAMOS UM SPLIT NA BARRA (|) QUE
   //SEPARA OS VALORES QUE ESTÃO NO VALUE DA COMBO1. SE você'S EXIBREM O CÓDIGO FONTE NO BROWSER VERÃO QUE A COMBO1 ESTARÁ ASSIM:
   // IDESTADO | NOMEESTADO.
   var arr = new String(frm1.estado.value);
   arr = arr.split('|');

 //AQUI TRAZEMOS APENAS O ID DE CADA ESTADO QUE FOR SELECIONADO.  
   frm1.codestado.value = arr[0];

 combocidade(); //CHAMA A FUNÇÃO AJAX QUE PREENCHER A COMBO CIDADE, ASSIM QUE É SELECIONADO UM REGISTRO NA COMBO1.
 comboimovel(); //CHAMA A FUNÇÃO AJAX QUE PREENCHER A COMBO IMÓVEK, ASSIM QUE É SELECIONADO UM REGISTRO NA COMBO1.    

}

//AQUI É A FUNÇÃO QUE PREENCHE A COMBO CIDADE.
//NÃO VOU ME APROFUNDAR NA EXPLICAÇÃO DESSA FUNÇÃO, JÁ QUE NOS OUTROS ARTIGOS QUE FIZ SOBRE AJAX, TEM A EXPLICAÇÃO SOBRE ELA.
//MAS REPAREM NO NOME DA DIV QUE DEMOS AQUI: divcombouf. É O MESMO NOME QUE DEMOS NO ID DAQUELA DIV QUE EXISTE ANTES DA COMBO2 NA PÁGINA.
function combocidade()
{
   var combouf = createXMLHTTP();
   combouf.open("post", "objestado.asp", true);
   combouf.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   combouf.onreadystatechange=function(){
    if (combouf.readyState==4){// abaixo o texto do gerado no arquivo executa.asp e colocado no div
     document.all.divcombouf.innerHTML = combouf.responseText;}}
     combouf.send("codestado=" + frm1.codestado.value);

}

//AQUI É A FUNÇÃO QUE SERÁ PREENCHIDA DE ACORDO COM O REGISTRO SELECIONADO NA COMBO1 E NA COMBO2.
//A EXPLICAÇÃO DA FUNÇÃO ACIMA VALE PARA ESSA TAMBÉM, JÁ QUE SÃO IGUAIS.
function comboimovel()
{
   var comboimovel = createXMLHTTP();
   comboimovel.open("post", "objimovel.asp", true);
   comboimovel.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   comboimovel.onreadystatechange=function(){
    if (comboimovel.readyState==4){// abaixo o texto do gerado no arquivo executa.asp e colocado no div
     document.all.divcomboimovel.innerHTML = comboimovel.responseText;}}
     comboimovel.send("codestado=" + frm1.codestado.value + "&codcidade="+frm1.codcidade.value);

}

//NESTA FUNÇÃO IREMOS OBTER O ID DA CIDADE. E PRA QUE PRECISAMOS DELA? PARA PREENCHER A COMBO IMÓVEL.
//A COMBO IMÓVEL SÓ TRARÁ REGISTROS DE ACORDO COM O REGISTRO SELECIONADO NA COMBO2.
//A EXPLICAÇÃO DA FUNÇÃO TRAZDADOS TAMBÉM VALE PARA ESSA.
function dadoscidade()
{
   var arr = new String(frm1.cidade.value);
   arr = arr.split("|");

   frm1.codcidade.value = arr[3];

   //VEJA QUE CHAMAMOS A FUNÇÃO QUE PREENCHE A COMBO IMÓVEL, DEPOIS QUE UM REGISTRO DA COMBO CIDADE É SELECIONADA.
   comboimovel();
}

//VOCÊS DEVEM TER REPARADO QUE NAS FUNÇÕES combocidade E comboimovel EXISTEM ESSE CAMINHO OBJETO/NOMEDOARQUIVO.ASP. CERTO?
//PORQUE CRIEI? PORQUE SE NO SEU SISTEMA VOCÊ PRECISAR USAR UMA DESSAS COMBOS, VOCÊ CHAMA APENAS O OBJETO.
//É COMO TRABALHAR COM ORIENTAÇÃO A OBJETOS.

//VEJA A EXPLICAÇÃO DAS PÁGINAS LOGO ABAIXO:
</script>


Arquivo objestado.asp

CÓDIGO
<%
'FAZ A CONEXÃO, SEM NENHUM SEGREDO.
Set conexao = Server.CreateObject("ADODB.connection")
DSNtest = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.Mappath("dados_01.mdb")
conexao.Open DSNtest

'RESGATA O ID DO ESTADO SELECIONADO PARA FAZER A SELAÇÃO DA COMBO DOIS (CIDADE).
codestado = request("codestado")

'AQUI ESTÁ NOSSO SELECT.
sql = "SELECT ESTADOS.COD, ESTADOS.ESTADO, CIDADES.CIDADE, CIDADES.CODCIDADE, IMOVEIS.CODIMOVEL, IMOVEIS.IMOVEIS "
sql = sql & "FROM (ESTADOS INNER JOIN CIDADES ON ESTADOS.COD = CIDADES.CODESTADO) "
sql = sql & "INNER JOIN IMOVEIS ON CIDADES.CODCIDADE = IMOVEIS.CODCIDADE WHERE ESTADOS.COD = " & codestado & " order by cidades.cidade"
set rs = conexao.Execute(sql)
%>

<!-- AUI MONTAMOS NOSSA COMBO DE CIDADE, CONFORME O ESTADO SELECIONADO -->
<table cellpadding="0" cellspacing="0" border="0">
<tr>
 <td>
      <select style="width:200" id="cidade" name="cidade" onChange="dadoscidade(this.value);">
               <%
     while not rs.EOF

      'if CStr(codestado) = Cstr(rs("COD")) then
      ' selected = "selected"
      'else
      ' selected = ""
      'end if
     %>
               <option value="<%Response.Write(rs("COD") & "|" & rs("ESTADO") & "|" & rs("CIDADE") & "|" & rs("CODCIDADE") & "|" & rs("CODIMOVEL") & "|" & rs("IMOVEIS"))%>" <%'=selected%>><%=server.HTMLEncode(rs("CIDADE"))%></option>
               <%
       rs.MoveNext
     wend

     rs.close
     set rs = nothing  
     %>
             </select>
 </td>
</tr>
</table>



Arquivo objimovel.asp

CÓDIGO
<%
'CONEXÃO COM O BANCO.
Set conexao = Server.CreateObject("ADODB.connection")
DSNtest = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.Mappath("dados_01.mdb")
conexao.Open DSNtest

'RESGATAMOS O ID DO ESTADO E DA CIDADE. PORQUE? PORQUE QUANDO SELECIONARMOS UM ESTADO A COMBO DE CIDADES E INÓVEL SERÁ PREENCHIDA.
'E QUANDO SELECIONARMOS UMA CIDADE A COMBO IMÓVEL SERÉ PREENCHIDA COM O REGISTRO CERTO.
codestado = request("codestado")
codcidade = request("codcidade")

'UMA PEQUENA COMPRAÇÃO PARA NÃO FAZER TODA A INSTRUÇÃO DENTRO DO SELECT.
'BEM SIMPLES, NÃO É? RSRSRSRS
if len(codcidade) then
filtro = " and CIDADES.codcidade = "&codcidade
else
filtro = ""
end if

'NOSSA SQL. VEJA QUE CHAMA A VARIÁVEL FILTRO NO SQL. É COMO SUBSTITUIR AQUELE INSTRUÇÃO QUE ATRIBUI A FILTRO NA CLÁSULA SQL.
sql = "SELECT ESTADOS.COD, ESTADOS.ESTADO, CIDADES.CIDADE, CIDADES.CODCIDADE, IMOVEIS.CODIMOVEL, IMOVEIS.IMOVEIS "
sql = sql & "FROM ESTADOS INNER JOIN (CIDADES INNER JOIN IMOVEIS "
sql = sql & "ON CIDADES.CODCIDADE = IMOVEIS.CODCIDADE) ON ESTADOS.COD = CIDADES.CODESTADO "
sql = sql & "WHERE ESTADOS.COD = " & codestado & filtro & " ORDER BY IMOVEIS.IMOVEIS"
'response.Write(sql)
'response.End()
set rs = conexao.Execute(sql)
%>

<!-- AQUI MONTAMOS NOSSA COMBO DE IMÓVEL
PARA QUANDO FOR SELECIONADO UM REGISTRO NA COMBO ESTADO E NA COMBO CIDADE.
-->
<table cellpadding="0" cellspacing="0" border="0">
<tr>
 <td>
      <select style="width:200" id="imovel" name="imovel">
               <%while not rs.EOF%>
               <option value="<%Response.Write(rs("COD") & "|" & rs("ESTADO") & "|" & rs("CIDADE") & "|" & rs("CODCIDADE") & "|" & rs("CODIMOVEL") & "|" & rs("IMOVEIS"))%>" <%'=selected%>><%=server.HTMLEncode(rs("IMOVEIS"))%></option>
               <%
       rs.MoveNext
     wend

     rs.close
     set rs = nothing  
     %>
             </select>
 </td>
</tr>
</table>

Compartilhar este post

Link para o post
Compartilhar em outros sites

saloeric    1

saloeric
Postado

olhe este exemplo, se já tem as relações na base de dados, depois com jquery é simples fazer isso,

 

o html, as combobox, adapte às suas necessidades, apenas tou a colocar o código da parte que intressa

   <tr>
    <td>Cliente</td>
    <td>
    <select name="clienteajax" id="clienteajax" class="inputs">
     <option value="">Seleccione</option>
     <%
     sql = "select * from algumacoisa"      
    set rs = conexao.execute(sql)
     if not rs.eof then
      while not rs.eof
       response.write "<option value="""&rs("id")&""">"&rs("nome")&"</option>"
      rs.movenext
      wend
     end if
     rs.close
     set rs = nothing
     %>
    </select> *
    </td>
   </tr>
   <tr><td style="height:15px;"></td></tr>
   <tr>
    <td>Loja</td>
    <td>
    <select name="lojaajax" id="lojaajax" class="inputs">
     <option value="">Seleccione</option>
    </select> *
    </td>
   </tr>

 

o jquery, se não sabe de jquery tente lêr alguns artigos que vale a pena, aqui fica apenas a função que vai tratar de encher a 2ª combobox

//ajax cliente/loja
$("#clienteajax").change(function() {
 if($(this).val() != ""){
  $.ajax({
     type: "POST",
     url: "ajax/ajax.asp",
     data: "tipo=ajaxcliente&id="+$(this).val(),
       success: function(msg){
     $("#lojaajax").html(msg);
       }
    });
 }
 else{
  $("#lojaajax").html('<option value="0">Seleccione</option>');
 }
});

 

o código asp que trata de retornar os dados para encher a combobox, passou o id do primeiro combobox portanto pode usar aqui


 sql = "select * from algumacoisa2 que pertence ao primeiro combobox where idprimeiratabela="request("id")  
set rs = conexao.execute(sql)
 response.write "<option value=""0"">Seleccione</option>"
 if not rs.eof then
  while not rs.eof
   response.write "<option value="""&rs("id")&""">"&rs("nome")&"</option>"
  rs.movenext
  wend
 end if
 rs.close
 set rs = nothing

 

 

e já tem o seu segundo combobox actualizado via ajax

Compartilhar este post

Link para o post
Compartilhar em outros sites

idemilson    0

idemilson
Postado

Galera,

 

Problema resolvido !

 

Era o nome da varável !

 

Valeu a ajuda ! :clap:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos ASP Clássico
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito