...

View Full Version : dynamic drop-downs



suu
06-30-2004, 05:34 PM
hello!

i have a problem with dynamic comboboxes.

it's like this:
- i have 4 combos that must be visible from the begining.
- 1st combo and 3rd combo are right from the begining filled with data from my DB.
- 2nd combo and 4th combo are empty in the begining.
- 2nd combo is filled when the user chooses an option on the 1st combo.
- 4th combo is filled when the user chooses an option on the 3rd combo.

in order to fill the 2nd combo(after selecting an option in the 1st combo) i post the page back to itself.

no problem here since the user hasn't chosen anything in the 3rd combo.

my problem comes when i use the same method for the 3rd combo. i post back the page to itself and while the users choice on the 3rd combo is still there, the choises he made in the 1st and 2nd combos are gone, while they should still be showing the users choices.

i basically have 2 forms on my code. i need to have one for my first combo (so the second can be filled with the values) and another form for my thrid combo(for the same reasons). it is because of this that the code isn't correct.

if i just had 2 combos this wouldn't be a problem, but i have 4, 2 of them dependent of the other 2.

can you tell me some way to dynamically link the combos WITHOUT refreshing the page?
i know how to do this but only with data in the page. i have no idea on how to do it with data from a DB.

really need help here guys.
thanks!

M@rco
07-01-2004, 08:38 PM
If you want to do it without refreshing the page, then you'll need to use a form of remote scripting. JSRS is the best (i.e. most cross-platform, easy to implement) of the available solutions (and there aren't many):

http://www.ashleyit.com/rs/

Roy Sinclair
07-02-2004, 05:06 PM
You need to change your page so that you only have ONE form, the problems you are having are directly related to your placing multiple forms on the page. Placing all the form fields into a single form would ensure that all fields get posted back each time.

suu
07-05-2004, 12:19 PM
true but i need to submit the page after one choice in one of the combos so that the user has access to the dependent combos.

if i don't submit them they'll only have access to combo 1 and 3.

unless there is a way to refresh the dependent combos without submiting the form.

M@rco
07-05-2004, 12:41 PM
unless there is a way to refresh the dependent combos without submiting the form.I've already pointed you in the right direction on how to do this. There's even a JSRS demo there that does what you need with an Access database...!

:confused: :rolleyes:

suu
07-06-2004, 12:15 PM
yes i've seen it and i'm trying to work on it.

problem is i don't work all that much in asp. not exactly a newbie but pretty close.

the demo who pointed me to works, no doubt about it, but i like to understand what it is i'm doing and i'm having a bit of difficulty with it. :confused:

not your fault. it's mine. :(

i'll continue to check on it, to try to understand. it's a really complicated code. or maybe my mind needs to speed things up a bit. :eek:

glenngv
07-07-2004, 11:02 AM
The idea behind that is you have a hidden iframe which does the request to the server and the server-side codes should output an HTML page that contains a specifically named textarea and put the output there. The generated page should have an onload handler that calls a main page's function to inform that the output data has been generated and ready for retrieval. The onload function called then retrieves the content of the textarea in the iframe and does whatever manipulation is required in the main page.

Hope that made sense. :)

Roelf
07-07-2004, 11:47 AM
is there a lot of information to be send from the database (are there a lot of option-combinations)? what you can do is build a double-combo script dynamically in the initial page. There are enough double (or triple or ...) combo scripts available on the internet. why not use one of them and create the neccesary clietn-side javascript code with your initial asp-page.

If that is not the way you want to go because the page would grow too big in size, i would use xmlhttp calls to a second asp page to provide the neccessary data for the 2nd (or 4th) based on the choice for the 1st (or 3rd)

enough information about xmlhttp can be found here (http://www.devguru.com/features/tutorials/xmlhttp/xmlhttp1.html)

glenngv
07-07-2004, 12:04 PM
iThere are enough double (or triple or ...) combo scripts available on the internet. why not use one of them and create the neccesary clietn-side javascript code with your initial asp-page.

The problem with the available double/triple combo scripts on the internet is they're not OO-based. Thus, you can't create multiple instances of the script which is what suu needed. He/She has 2 double-combo in his/her page.

suu
07-07-2004, 12:08 PM
i'm dooooooooooomed.

nah just kidding. :D

i just need a little time going through the code. it's really big and time isn't much. as always.

thanks for the help!!!

ghell
07-07-2004, 04:45 PM
couldnt you just send all the data you needed to javascript and run that dynamically on the client side.. i dont really know as i sorta got bored half way and skipped to the end of the thread :rolleyes:

Bullschmidt
07-08-2004, 04:52 AM
Perhaps this may hopefully give some ideas and it's got a downloadable sample:

ASP Design Tips - Dependent Listboxes
http://www.bullschmidt.com/devtip-dependentlistboxes.asp

suu
07-08-2004, 09:20 AM
Hi!

i just realised that i haven't posted any of my code so here is my entire page:

----------------------------------------
<HTML>

<HEAD>
<META HTTP-EQUIV="Content-Language" CONTENT="pt">
<META NAME="GENERATOR" CONTENT="Microsoft FrontPage 6.0">
<META NAME="ProgId" CONTENT="FrontPage.Editor.Document">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>LASE - MENU DE PESQUISA</TITLE>

<script language="javascript">
<!--

function change_temas(Escolha1) {

Escolha1.submit();
}

function change_origem(Escolha2) {
Escolha2.submit();
}

//-->
</script>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
<%
Dim aux_temas,aux_subtemas
dim strstatus, ShowAction, strstatus2, ShowAction2
Dim tRs, Rs, conn, connect, strSQL, strSQL2, SQLstmt, oRS, dRS, SQLstmt2

Set Conn = Server.CreateObject("ADODB.Connection")
conn.open "Provider=Microsoft.Jet.OLEDB.4.0;" &_
"Data Source=\\sacavem07\intranet\base_dados\ambiente\LASE\BD_LASE.mdb;" &_
"User Id=admin;" &_
"Password="
Set tRs = Server.CreateObject("ADODB.Recordset")
strSQL_t = "SELECT Tema FROM Temas GROUP BY Tema ORDER BY Tema ASC"
tRs.Open strSQL_t,Conn,1,2

Set oRS = Server.CreateObject("ADODB.Recordset")
strSQL_o = "SELECT Origem FROM Origens GROUP BY Origem"
oRs.Open strSQL_o,Conn,1,2

Set pRS = Server.CreateObject("ADODB.Recordset")
strSQL_p = "SELECT [Palavra-Chave2] FROM [Palavra-Chave2] GROUP BY [Palavra-Chave2]"
pRs.Open strSQL_p,Conn,1,2
%>

<P><FONT FACE="Arial"><IMG BORDER="0" SRC="../Fotos/logo%20ren.gif"></FONT></P>
<P>&nbsp;</P>
<P><B><FONT FACE="Arial" COLOR="#000080">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; MENU DE PESQUISA</FONT></B></P>


<P STYLE="margin-top: 0; margin-bottom: 0">&nbsp;</P>
<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="5" STYLE="border-collapse: collapse; border-width: 0" BORDERCOLOR="#111111" WIDTH="68%" ID="AutoNumber1" HEIGHT="132">
<TR>
<TD WIDTH="19%" STYLE="border-style: none; border-width: medium" HEIGHT="19" ALIGN="right">
<FONT FACE="Arial"><B>Tema</B></FONT></TD>

<FORM METHOD="POST" NAME="Escolha1" ACTION="">
<TD WIDTH="52%" STYLE="border-style: none; border-width: medium" HEIGHT="19">
<FONT FACE="Arial">&nbsp;&nbsp;
<SELECT SIZE="1" NAME="TabTemas" onchange="return change_temas(Escolha1)">
<option value="TEMA" selected>Escolha o tema</option>
<%While NOT tRS.EOF%>
<option value="<%=tRS("Tema")%>"<%IF request.form("TabTemas") = tRS("Tema") THEN response.write (" selected")%>><%=tRS("Tema")%></option>
<%
tRS.MoveNext
WEND
%>
</SELECT>
</FONT></TD>
<TD WIDTH="26%" STYLE="border-style: none; border-width: medium" HEIGHT="19" align="center">
&nbsp;</TD>
</TR>
<TR>
<TD WIDTH="19%" STYLE="border-style: none; border-width: medium" HEIGHT="20" ALIGN="right">
<FONT FACE="Arial"><B>SubTema</B></FONT></TD>
<TD WIDTH="52%" STYLE="border-style: none; border-width: medium" HEIGHT="20">
<FONT FACE="Arial">&nbsp;&nbsp;
<%Dim EscTemas
EscTemas = request.form("TabTemas")%>
<SELECT SIZE="1" NAME="TabSubtemas">
<%
Set t2Rs = Server.CreateObject("ADODB.Recordset")
strSQL_t2 = "SELECT * FROM Temas WHERE Tema='" & EscTemas & "' ORDER BY Subtema"
t2Rs.Open strSQL_t2,Conn,1,2
%>
<option value="SUBTEMA" selected>Escolha o subtema</option>
<%While NOT t2RS.EOF%>
<option value="<%=t2RS("Subtema")%>"><%=t2RS("Subtema")%></option>
<%
t2RS.MoveNext
WEND
%>
</SELECT></FONT></TD></FORM>
<%aux_temas=request.form("TabTemas")
aux_subtemas=request.form("TabSubtemas")
%>
<TD WIDTH="26%" STYLE="border-style: none; border-width: medium" HEIGHT="20" align="center">
<FONT FACE="Arial">
<INPUT TYPE="submit" VALUE="TODOS" NAME="TODOS" style="font-family: Arial; color: #FFFFFF; font-weight: bold; background-color: #000080"></FONT></TD>
</TR>
<TR>
<TD WIDTH="19%" STYLE="border-style: none; border-width: medium" HEIGHT="20" ALIGN="right">
<FONT FACE="Arial"><B>Origem</B></FONT></TD>

<FORM METHOD="POST" NAME="Escolha2" ACTION="">
<TD WIDTH="52%" STYLE="border-style: none; border-width: medium" HEIGHT="20">
<FONT FACE="Arial">&nbsp;&nbsp;
<SELECT SIZE="1" NAME="TabOrigem" onchange="return change_origem(Escolha2)">
<option value="ORIGEM" selected>Escolha a origem</option>
<%While NOT oRS.EOF%>
<option value="<%=oRS("Origem")%>"<%IF request.form("TabOrigem") = oRS("Origem") THEN response.write (" selected")%>><%=oRS("Origem")%></option>
<%
oRS.MoveNext
WEND
%>
</SELECT></FONT></TD>
<TD WIDTH="26%" STYLE="border-style: none; border-width: medium" HEIGHT="20" align="center">
&nbsp;</TD>
</TR>
<TR>
<TD WIDTH="19%" STYLE="border-style: none; border-width: medium" HEIGHT="20" ALIGN="right">
<FONT FACE="Arial"><B>Documento</B></FONT></TD>
<TD WIDTH="52%" STYLE="border-style: none; border-width: medium" HEIGHT="20">
<FONT FACE="Arial">&nbsp;&nbsp;
<%Dim EscOrigem
EscOrigem = request.form("TabOrigem")%>
<SELECT SIZE="1" NAME="D4">
<%
Set o2Rs = Server.CreateObject("ADODB.Recordset")
strSQL_o2 = "SELECT * FROM Origens WHERE Origem='" & EscOrigem & "' ORDER BY Documento"
o2Rs.Open strSQL_o2,Conn,1,2
%>
<option value="DOCUMENTO" selected>Escolha o documento</option>
<%While NOT o2RS.EOF%>
<option value="<%=o2RS("Documento")%>"><%=o2RS("Documento")%></option>
<%
o2RS.MoveNext
WEND
%>
</SELECT></FONT></TD></FORM>
<TD WIDTH="26%" STYLE="border-style: none; border-width: medium" HEIGHT="20" align="center">
<FONT FACE="Arial">
<INPUT TYPE="submit" VALUE="PESQUISAR" NAME="PESQUISAR" style="font-family: Arial; color: #FFFFFF; font-weight: bold; background-color: #000080"></FONT></TD>
</TR>
<TR>
<TD WIDTH="19%" STYLE="border-style: none; border-width: medium" HEIGHT="20" ALIGN="right">
<FONT FACE="Arial"><B>Palavra-Chave</B></FONT></TD>
<TD WIDTH="52%" STYLE="border-style: none; border-width: medium" HEIGHT="20">
<FONT FACE="Arial">&nbsp;&nbsp;
<SELECT SIZE="1" NAME="D5">
<option value="CHAVE" selected>Escolha a palavra-chave</option>
<%While NOT pRS.EOF%>
<option value="<%=pRS("Palavra-Chave2")%>"><%=pRS("Palavra-Chave2")%></option>
<%
pRS.MoveNext
WEND
%>
</SELECT></FONT></TD>
<TD WIDTH="26%" STYLE="border-style: none; border-width: medium" HEIGHT="20" align="center">
&nbsp;</TD>
</TR>
<TR>
<TD WIDTH="19%" STYLE="border-style: none; border-width: medium" HEIGHT="21" ALIGN="right">
<FONT FACE="Arial"><B>Entre os anos</B></FONT></TD>
<TD WIDTH="52%" STYLE="border-style: none; border-width: medium" HEIGHT="21">
<FONT FACE="Arial">&nbsp;&nbsp; <INPUT TYPE="text" NAME="T1" SIZE="4">&nbsp;
<B>e</B>&nbsp;
<INPUT TYPE="text" NAME="T2" SIZE="4"></FONT></TD>
<TD WIDTH="26%" STYLE="border-style: none; border-width: medium" HEIGHT="21" align="center">
&nbsp;</TD>
</TR>
</TABLE>
<P><FONT FACE="Arial">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </FONT></P>
<P><font face="Arial">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</font>
<INPUT TYPE="button" VALUE="AJUDA" NAME="AJUDA" OnClick="javascript:window.open('http://sacavem07:6000/LASE/Ajuda_Pesq1.htm','_newWindow','toolbar=0, location=0,directories=0,status=1,menubar=0, scrollbars=1,fullscreen=0');" STYLE="color: #FFFFFF; font-family: Arial; font-weight: bold; background-color: #000080"><font face="Arial">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</font>
<INPUT TYPE="button" VALUE="SAIR" NAME="SAIR" OnCLick="javascript:window.open('http://sacavem07:6000/LASE/Princ.htm','_self');" STYLE="font-family: Arial; color: #FFFFFF; font-weight: bold; background-color: #000080"></P>

<P>&nbsp;</P>

<%
response.write aux_temas
response.write aux_subtemas
%>

</BODY>

</HTML>

--------------------------------------------------------

:eek: I know this looks like a spam, since it's too big so my apologies.

anyway, as you can see i've got 2 dependent combos from 2 other combos (like i explained on my first post). since i have to refresh my page whenever the user selects a choice in either combo1 or combo3 to fill either combo2(dependent of combo1) or combo4 (dependent of combo3), i'll lose the previous selections.
this is what i'm trying to solve. but since i've been around this problem for a REALLY long time, i asked you guys if you knew of a way to do this without refreshing the page. i realised it's not something easy for a newbie. the code is complicated and since i like to understand what i'm doing (so i don't have to come back and ask you again about the same things) i'm still gong at it.

Bullschmidt: during my search to solve this problem i came across your site but since it showed only one dependent combo and the page had to be refreshed i ignored it. perhaps i made a mistake. is your code capable of being adapted to my case? won't i lose the first selection values?

thanks for your patience guys!

Bullschmidt
07-08-2004, 11:27 PM
<<
Bullschmidt: during my search to solve this problem i came across your site but since it showed only one dependent combo and the page had to be refreshed i ignored it. perhaps i made a mistake. is your code capable of being adapted to my case? won't i lose the first selection values?
>>

Well the page retains the values because instead of being refreshed it is posted back to itself. And this is how most of my pages are (post-back). My dependent listbox article ( http://www.bullschmidt.com/devtip-dependentlistboxes.asp ) includes a sample so you can try it to actually see it work.

And here is a little something I put together about post-back pages:

ASP Design Tips - Post Back Page
http://www.bullschmidt.com/devtip-postbackpage.asp



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum