Inquiridor
Mesclagem ASP + JS

Pergunta
-
Preciso fazer uma coisa aqui mas não sei como farei.
Tenho uma tabela que tem nela Menu, Submenu1 e Submenu2.
Tenho que fazer que nem no mercado livre.
Que os itens do menu sao listados em um listbox. ai quando clico em um item do menu carrega o submenu1 referente a ele em outro listbox e e clicando em algum item do submenu1 carrega o submenu2 em outro listbox referente ai submenu1.
Como faço isso, travei aqui.
Parece que tem que usar onchange.
Mas como faço?
Obrigado desde já
Todas as Respostas
-
Fábio;
Se fosse em asp.net seria muito mais fácil. Mas a lógica deve ser a mesma.
Acredito que vc deve criar uma ou mais tabelas de banco de dados para sua navegação (a forma mais fácil seria uma tabela para cada nível de menu).
Quando alterado o primeiro menu vc faria uma consulta para alimentar o menu dois filtrando com o id "pai".Repetir o procedimento para os outros submenus.
Se não quiser que a página fique dando refresh's, coloque os combos dentro de um iframe.
A forma que me ocorreu foi esta.
Espero ter ajudado.
Qualquer dúvida, poste aí... -
Glauber está tudo numa tabela só, consegui fazer isso definindo as posiçoes do menu com dois campos nela. POS e POS2.
O problema é que tenho que fazer agora que nem aquela página do mercado que esta no topo da página dele.
Clique em "Vender" lá veja só como é que carrega. Tipo não fará diferença as tabelas e sim como montar o ASP com o JS.
Tem como vc me dar uma luz com isso?
Cara te agradeceria muito. -
Glauber quanto as tabelas pode ser uma só pois ja está em uma só e nos menus e tal funciona tranquilo.
Só nessa parte que esta dando esse problema.
Não sei como fazer isso igual esta la no mercado livre.
De uma olhada lá para ver como é exatamente e me diga se é muito complicado fazer isso que nem eles fizeram.
No Topo do site do mercado livre tem um link chamado vender.
Clica nele e se loga.
Vai aparecer uma tela com uns listbox.
Não consigo fazer isso.
Voce sabe fazer que nem eles fizeram?
Mas com os loops na mesma página?
Cara te agraderei muito se puder me dar essa luz. -
-
-
Dá uma olhada, vê se te ajuda. Depois é só vc fazer um select com o id enviado.
<script type="text/javascript">
function abre(){
window.open('minhaPagina.asp?id='+document.getElementById("seleciona").value,'_self');
}
window.open
</script></head>
<body>
<form name="form1" method="post" action="">
<select onChange="abre()" name="select" size="4" id="seleciona">
<option value="1">teste 1</option>
<option value="2">teste 2</option>
<option value="3">teste 3</option>
<option value="4">teste 4</option>
</select>
</form> -
-
-
Dá uma olha nisso
<script type="text/javascript">
function abre(){
window.open('minhaPagina.asp?id='+document.getElementById("seleciona").value,'_self');
}
window.open
</script></head>
<body>
<form name="form1" method="post" action="">
<select onChange="abre()" name="select" size="4" id="seleciona">
<option value="1">teste 1</option>
<option value="2">teste 2</option>
<option value="3">teste 3</option>
<option value="4">teste 4</option>
</select>
<%
if request.querystring("id") <> "" Then
%>
<select onChange="abre2()" size="4" id="seleciona2">
<option value="1">teste 1</option>
<option value="2">teste 2</option>
<option value="3">teste 3</option>
<option value="4">teste 4</option>
</select>
<%
end if
%>
</form> -
Só que sao varios IDS
e Cara não sei pq nao consigo recuperar o valor da variavel.
Veja oque to fazendo errado aqui tem como???
____________________________
<!--#include file="conexao.asp"-->
<html>
<head>
<title>Untitled Document</title>
<%
id = request.querystring("id")
%>
<script type="text/javascript">
function abre(){
window.open('teste2.asp?id='+document.getElementById("seleciona").value,'_self');
}
window.open
</script>
</head><body>
<%
if id = "" thenMN2 = "select * from Menus where pos=0 and pos2=0"
Set TMN2 = BC.Execute(MN2)else
MN3 = "select * from Menus where pos="&id&" and pos2=0"
Set TMN3 = BC.Execute(MN3)end if
%>
<form name="form1" method="post" action="">
<select onChange="abre()" name="id" size="4" id="seleciona">
<%While Not TMN2.EOF%>
<option value="<%=TMN2("id")%>"><%=TMN2("nome")%></option>
<%TMN2.MoveNext%>
<%Wend%>
</select>
<br>
<br>
</form>
</body>
</html>______________________
Não traz cara.
Dou uns response.write no ID e nao vem.
-
-
Cara nao ta rolando ele ta se perdendo e carrega coisas nada a ver, veja só:
__________________________
<!--#include file="conexao.asp"-->
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
function abre(){
window.open('teste2.asp?id='+document.getElementById("seleciona").value,'_self');
}
window.open
</script><script type="text/javascript">
function abre2(){
window.open('teste2.asp?id='+document.getElementById("seleciona").value,'_self');
}
window.open
</script>
</head><body>
<form name="form1" method="post" action=""><%if request.querystring("id") = "" Then
MN2 = "select * from Menus where pos=0 and pos2=0"
Set TMN2 = BC.Execute(MN2)
%>
<select onChange="abre()" name="select" size="4" id="seleciona">
<%While Not TMN2.EOF%>
<option value="<%=TMN2("id")%>"><%=TMN2("nome")%></option>
<%TMN2.MoveNext%>
<%Wend%>
</select>
<%end if%>
<%
if request.querystring("id") <> "" Then
MN3 = "select * from Menus where pos="&id&" and pos2=0"
Set TMN3 = BC.Execute(MN3)
%>
<select onChange="abre2()" size="4" id="seleciona2">
<%While Not TMN3.EOF%>
<option value="<%=TMN3("id")%>"><%=TMN3("nome")%></option>
<%TMN3.MoveNext%>
<%Wend%>
</select>
<%else%>
<select size="4" id="seleciona2">
<option value=""></option>
</select>
<%
end if
%>
</form></body>
</html>_________________
-
Fábio;
Essa seria a base para desenvolver a interface agora precisa desenvolver a "lógica de negócios".
Eu faria algo mais ou menos assim:
Minhas tabelas:-------------------------------
menu
id
Item
--------------------------------
subMenu
id
IdPai
Item
-------------------------------Aí sempre faria um select na submenu para popular os subitems da seguinte forma:
Select * from subMenu where idPai = Request.Querystrin(id)
Acho que com algo parecido vc consegue o que quer. Dava até pra sinplificar e usar uma tabela só -
Mas esta tudo numa tabela só.
Veja como estou fazendo agora.
Já carrega o Submenu1 falta só o Submenu2 porem ele ta dando erro de javascript quando clico no menu raiz denovo depois que carrega o submenu1. Enão consigo trazer a id do submenu1.
Sabe pq?
Veja só
---------------------------------------------
<!--#include file="conexao.asp"-->
<%id = request.querystring("id")%>
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
function abre(){
window.open('teste2.asp?id='+document.getElementById("seleciona").value,'_self');
}
window.open
</script><script type="text/javascript">
function abre2(){
window.open('teste2.asp?id='+document.getElementById("seleciona").value,'&id2='+document.getElementById("seleciona2").value,'_self');
}
window.open
</script>
</head><body>
<form name="form1" method="post" action=""><%if request.querystring("id") = "" Then
MN2 = "select * from Menus where pos=0 and pos2=0"
Set TMN2 = BC.Execute(MN2)
%>
<select onChange="abre()" name="select" size="4" id="seleciona">
<%While Not TMN2.EOF%>
<option value="<%=TMN2("id")%>"><%=TMN2("nome")%></option>
<%TMN2.MoveNext%>
<%Wend%>
</select>
<br><br>
<select size="4" id="seleciona2">
<option value=""></option>
</select>
<%end if%>
<%
if request.querystring("id") <> "" Then
MN2 = "select * from Menus where pos=0 and pos2=0"
Set TMN2 = BC.Execute(MN2)
%>
<select onChange="abre()" name="select" size="4" id="seleciona">
<%While Not TMN2.EOF%>
<option value="<%=TMN2("id")%>"><%=TMN2("nome")%></option>
<%TMN2.MoveNext%>
<%Wend%>
</select>
<br><br>
<%
MN3 = "select * from Menus where pos="&id&" and pos2=0"
Set TMN3 = BC.Execute(MN3)
%>
<select onChange="abre2()" size="4" id="seleciona2">
<%While Not TMN3.EOF%>
<option value="<%=TMN3("id")%>"><%=TMN3("nome")%></option>
<%TMN3.MoveNext%>
<%Wend%>
</select>
<%
end if
%>
</form></body>
</html> -
-
Cara Consegui mas
mas tenho um probleminha la.
ele nao deixa selecionado oque eu cliquei.
Sabe como faço isso???Olha o código Final.
Agora o Problema é deixar selecionado o que foi clicado.
_______________________________
<!--#include file="conexao.asp"-->
<%id = request.querystring("id")%>
<%id2 = request.querystring("id2")%>
<%id3 = request.querystring("id3")%>
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
function abre(){
window.open('teste2.asp?id='+document.getElementById("seleciona").value,'_self');
}
window.open
function abre2(){
window.open('teste2.asp?id=<%=id%>&id2='+document.getElementById("seleciona2").value,'_self');
}
window.open
function abre3(){
window.open('teste2.asp?id=<%=id%>&id2=<%=id2%>&id3='+document.getElementById("seleciona3").value,'_self');
}
window.open
</script>
</head>
<body>
<form name="form1" method="post" action="">
<%if request.querystring("id") = "" Then
MN2 = "select * from Menus where pos=0 and pos2=0"
Set TMN2 = BC.Execute(MN2)
%>
<select onChange="abre()" name="select" size="4" id="seleciona">
<%While Not TMN2.EOF%>
<option value="<%=TMN2("id")%>"><%=TMN2("nome")%></option>
<%TMN2.MoveNext%>
<%Wend%>
</select>
<br><br>
<select size="4" id="seleciona2">
<option value=""></option>
</select>
<br><br>
<select size="4" id="seleciona3">
<option value=""></option>
</select>
<%end if%>
<%
if request.querystring("id") <> "" Then
MN2 = "select * from Menus where pos=0 and pos2=0"
Set TMN2 = BC.Execute(MN2)
%>
<select onChange="abre()" name="select" size="4" id="seleciona">
<%While Not TMN2.EOF%>
<option value="<%=TMN2("id")%>"><%=TMN2("nome")%></option>
<%TMN2.MoveNext%>
<%Wend%>
</select>
<br><br>
<%
MN3 = "select * from Menus where pos="&id&" and pos2=0"
Set TMN3 = BC.Execute(MN3)
%>
<select onChange="abre2()" size="4" id="seleciona2">
<%While Not TMN3.EOF%>
<option value="<%=TMN3("id")%>"><%=TMN3("nome")%></option>
<%TMN3.MoveNext%>
<%Wend%>
</select>
<br><br>
<%
if request.querystring("id2") <> "" Then
MN4 = "select * from Menus where pos="&id&" and pos2="&id2&""
Set TMN4 = BC.Execute(MN4)
%>
<select onChange="abre3()" size="4" id="seleciona3">
<%While Not TMN4.EOF%>
<option value="<%=TMN4("id")%>"><%=TMN4("nome")%></option>
<%TMN4.MoveNext%>
<%Wend%>
</select>
<%else%>
<select onChange="abre3()" size="4" id="seleciona3">
<option value=""></option>
</select>
<%
end if
%>
<%
end if
%>
</form>
</body>
</html>
_____________________________ -
Fábio;
Não fica selecionado pois a página recebe um refresh. Para "manter" selecionado, vc deveria pegar o id enviado para página e posicionar no list.
Para isso vc vai precisar fazer um request.querystring em seu javascript e depois posicionar na mão o list segundo cada id passado.
Dê uma pesquisada nisso, o java script não tem um método para request.querystring, vc vai precisacr criar uma função para isso e depois posicionar seu list.Espero ter ajudado, se ajudou, marque "SIM"...
-
-
Fábio;
Para fazer isso sem usar o refresh vc vai tem duas possibilidades:
1º - Usar apenas tecnologias do lado do cliente
- Javascript
- HtmlDOM
- XML
O famoso AJAX.
Como vc está usando asp, tem que ser feito tudo na mão.
Não é tão difícil qto parece, mas vc vai ter que refazer tudo. E com isso vc iria aprender a fazer vários truques para impressionar seus clientes e amigos hehehe2º - Para cada list, criar um frame ou um iframe.
Esse seria o modo mais fácil -
-
-
-
Para o método do iframe, basta vc colcoar um iframe para cada list e no window.open('meuarquivo.asp?id=<% id %>','idDoIframe')
Vc coloca o "Target" no window.open.
O resto do código fica mais ou menos a mesma coisa.
Separando cada bloco de consulta para seu respectivo iframe.
Se tiver dificuldade é só dizer...