How To Make ListBox Appear BEFORE HTML Table, Not After Table 1

JohnBates · Nov 13, 2002

Hi ASP experts,

The first time the page loads, a listbox is displayed at the top of the page - nothing else.

After the user makes a selection from the listbox, an SQL statement selects the rows, then a ASP sub is called to build the table rows using response.write statements

*****************************
...The problem is the table pushes the listbox to the bottom of the page, after the end of the table.
Sometimes the table is pretty long so the user has to scroll all the way to the end to make another selection from the listbox.

How can I force the table to be placed after the listbox rather than before it ?

I hope I have described my question clearly enough.
Using ASP and HTML.

Thanks for your ideas. John

Tarwn · Nov 13, 2002

All you need to do is either write the table out after you have written the listbox, or write the listbox before you write the table (same thing really). HTML is processed in the same order it is written and is generally displayed this way as well. Without code I cannot help any further.
-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
For my next trick I will pull a hat out of a rabbit (if you think thats bad you should see how the pigeon feels...)

JohnBates · Nov 13, 2002

Thanks for taking the time to reply Tarwn !

"...or write the listbox before you write the table (same thing really)."

Actually that's what I'm doing... and the listbox gets pushed down to after the table rows.

I build the listbox outside of the sub. Because when the page first displays, just want them to see the listbox.
If I build the listbox inside the sub that builds the table... they will initially see a blank form.

Can I force the table to position in a certain section of the page... leaving the listbox intact ?
Thanks, John

Tarwn · Nov 13, 2002

Call the sub to display the table after you write the listbox, that way the table will get written after the list box does and will display afterwards. If doesn't sem like it will fit your problem, show me a little of your code and I'll see if I can't find a more specific solution.
-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
For my next trick I will pull a hat out of a rabbit (if you think thats bad you should see how the pigeon feels...)

JohnBates · Nov 20, 2002

Thanks again Tarwyn,

This is the entire code for this ASP...

My objectives are to:
- Display the listbox (populated) and the footer menu links
- Then if a phone ext is selected from the list...
display :
-'Calls From Extension abcd'
-'Number of Calls listed: 999'
-The ext listbox
-followed by the table rows showing all the phone calls for the extension the user selected
-followed by the footer menu links

All this works fine... except that, after a n ext is selected... the listbox gets moved to AFTER the table rows

As you can see...the onChange="Ext.submit()" resubmits the page. Is that the problem ?

Thanks for any help, John

<%@ LANGUAGE="VBSCRIPT" %>
<% Option Explicit %>






<%
Dim OrigExt, CallDesc, CalledNo, CallingNo, CallDate, DurHH, DurMM, DurSS, AuthCode
Dim i
Dim rs
Dim sql
Dim selectExt,newExt
Dim intRecs
Dim blnFirstTime
Dim blnTimeout

blnTimeout = False

blnFirstTime = True

'Set Timeout limit it is SECONDS

server.ScriptTimeout = 120
%>

<%
'Select the call records, build the recordset

SelectData(selectExt)

sub DisplayTable

If blnTimeout = True Then

Response.Write "<H2><B>Timeout occurred - too many records selected - please change selection criteria to select less data<BR></H2></B>"

End If

Response.Write "<H2><B>Calls From Phone Extension: " & selectExt & "</H2></B>"
Response.Write "<H4><B>Number of Calls Listed: " & intRecs & "</H4></B>"

response.write "<TABLE cellspacing=2 border=1 align=center>"
' Build column headings
response.write "<tr>"

response.write "<td><B>Ext</B></TD>"
response.write "<td><B>Description</B></TD>"
response.write "<td><B>No. Called</B></TD>"
response.write "<td><B>Calling No.</B></TD>"
response.write "<td><B>Date of Call</B></TD>"
response.write "<td><B>Hours</B></TD>"
response.write "<td><B>Mins</B></TD>"
response.write "<td><B>Secs</B></TD>"
response.write "<td><B>Auth Code</B></TD>"

response.write "</tr>"

' Read thru recordset and write the table rows
DO WHILE NOT rs.eof
' put fields into variables

OrigExt=rs("OrigExt&quot

CallDesc=rs("RecDesc&quot

CalledNo=rs("CalledNo&quot

CallingNo=rs("CallingNo&quot

CallDate=rs("CallDate&quot

DurHH=rs("DurHH&quot

DurMM=rs("DurMM&quot

DurSS=rs("DurSS&quot

AuthCode=rs("AuthCode&quot

' write the fields to browser table
response.write "<tr>"

response.write "<td>"
response.write rs("OrigExt&quot

& "<br>"
response.write "</td>"

response.write "<td>"
response.write CallDesc & "<br>"
response.write "</td>"

response.write "<td>"
response.write CalledNo & "<br>"
response.write "</td>"

response.write "<td>"
response.write CallingNo & "<br>"
response.write "</td>"

response.write "<td>"
response.write CallDate & "<br>"
response.write "</td>"

response.write "<td>"
response.write DurHH & "<br>"
response.write "</td>"

response.write "<td>"
response.write DurMM & "<br>"
response.write "</td>"

response.write "<td>"
response.write DurSS & "<br>"
response.write "</td>"

response.write "<td>"
response.write AuthCode & "<br>"
response.write "</td>"

response.write "</tr>"
rs.movenext
LOOP

rs.Close
Set rs=Nothing

response.write "</TABLE>"

blnFirstTime = False

End Sub

sub SelectData(selectExt)

sql = "SELECT OrigExt, RecDesc, CalledNo, CallingNo, CallDate, DurHH, DurMM, DurSs, AuthCode FROM Calls WHERE OrigExt = '" & selectExt & "' ORDER BY CallDate"

set rs = createobject("adodb.recordset&quot

On error resume next
rs.open sql,conn, adOpenStatic, adLockReadOnly, adCmdText

If err <> 0 Then

If instr(err.description) = "ASP 0113" Then

blnTimeout = True

End If

End If

intRecs = rs.RecordCount

End Sub

%>

<HTML>
<HEAD>
<TITLE>Phone Calls for Selected Extension - EHP Springfield</TITLE>

<style type="text/css">
h2
{
font-family: Arial;
color:#990033;
}

TD
{
font-weight: bold;
}

</style>

</HEAD>

<body bgcolor="#FFFFFF">
<FORM NAME="Ext">
<CENTER>

<%

'Set a default extension to display as web page is initialized

selectExt = "9999"

'Check value of EXT, the dropdown box, to see if user has requested a different phone extension
newExt = Request("EXT&quot

If newExt <> "" Then
selectExt = newExt

End If

'Call the sub to select call data for the requested extension

If selectExt <> "9999" Then

SelectData(selectExt)

DisplayTable

End If

blnFirstTime = False

%>

<%

'Build the dropdown box entries from the extension in Extensions table

sql = "SELECT Ext FROM Extensions WHERE Ext > 0 ORDER BY Ext"

set rs = createobject("adodb.recordset&quot

rs.open sql,conn, adOpenStatic, adLockReadOnly, adCmdText

%>

<BR>
<SELECT NAME="EXT" size="1" onChange="Ext.submit()">
<option>Select an Extension #</option>

'add all the phone extensions to the dropdown listbox
<%
Do While NOT rs.eof
%>

<option value="<%=rs.Fields("Ext&quot

%>">
<%=rs.Fields("Ext&quot

%>
</option>

<%

rs.MoveNext()

Loop

%>
'... end of section that build the dropdown box entries

</SELECT>

</CENTER>

<BR>
<CENTER><TABLE CELLSPACING="0" CELLPADDING="2" BORDER="2">
<TR>
<TD><FONT SIZE=+0><FONT COLOR="#999999">
<A HREF="PhoneLogMenu.html"
onMouseOver="window.status = 'Return to the Phone Call menu';
return(true)">Return to Phone Log menu</A></FONT></FONT></TD>
<TD><FONT COLOR="#999999"><FONT SIZE=+0>
<A HREF="CallsByExt.asp"
onMouseOver="window.status = 'Display Phone Calls by Ext';
return(true)">Display Phone Calls by Ext</A></FONT></FONT></TD>
<TD><FONT COLOR="#999999"><FONT SIZE=+0>
<A HREF="faqs.html"
onMouseOver="window.status = 'Frequently Asked Questions';
return(true)">F.A.Q.s</A></FONT></FONT></TD>
</TR>
</TABLE>

</FORM>
</BODY>
</HTML>

<%

rs.close
conn.close
Set rs = nothing
set conn = nothing

%>

Tarwn · Nov 21, 2002

Here is the form with my changes. I moved the function call down to below the listbox, the function itself can be placed anywhere in the script, I generally prefer to keep it seperate from any code that is being executed outside of function calls, but that is probably a java programming influence. Anyways, here is the altered form:

Code:

<FORM NAME=&quot;Ext&quot;>
<CENTER>

<% 

'Set a default extension to display as web page is initialized

selectExt = &quot;9999&quot;

'Check value of EXT, the dropdown box, to see if user has requested a different phone extension 
newExt = Request(&quot;EXT&quot;)
If newExt <> &quot;&quot; Then
    selectExt = newExt

End If


'####################### Note: Change ###################################
'### This is being called before the listbox is created,it has been moved

'Call the sub to select call data for the requested extension

'If selectExt <> &quot;9999&quot; Then

'SelectData(selectExt)

'DisplayTable
'########################################################################

End If

blnFirstTime = False

%>


<%

'Build the dropdown box entries from the extension in Extensions table


sql = &quot;SELECT Ext FROM Extensions WHERE Ext > 0 ORDER BY Ext&quot;

set rs = createobject(&quot;adodb.recordset&quot;)

rs.open sql,conn, adOpenStatic, adLockReadOnly, adCmdText

%>

<BR>
<SELECT NAME=&quot;EXT&quot; size=&quot;1&quot; onChange=&quot;Ext.submit()&quot;>
<option>Select an Extension #</option>

'add all the phone extensions to the dropdown listbox
<%
Do While NOT rs.eof
%>

<option value=&quot;<%=rs.Fields(&quot;Ext&quot;)%>&quot;>
<%=rs.Fields(&quot;Ext&quot;)%>
</option>

<%

rs.MoveNext()

Loop

%> 
'... end of section that build the dropdown box entries

</SELECT>
<br>
<%
'####################### Note: Addition ########################
'This section was moved from above
'Call the sub to select call data for the requested extension

If selectExt <> &quot;9999&quot; Then

SelectData(selectExt)

DisplayTable
'###############################################################
%>

</CENTER>

<BR>
<CENTER><TABLE  CELLSPACING=&quot;0&quot; CELLPADDING=&quot;2&quot; BORDER=&quot;2&quot;>
<TR>
<TD><FONT SIZE=+0><FONT COLOR=&quot;#999999&quot;>
<A HREF=&quot;PhoneLogMenu.html&quot;
onMouseOver=&quot;window.status = 'Return to the Phone Call menu';
return(true)&quot;>Return to Phone Log menu</A></FONT></FONT></TD>
<TD><FONT COLOR=&quot;#999999&quot;><FONT SIZE=+0>
<A HREF=&quot;CallsByExt.asp&quot;
onMouseOver=&quot;window.status = 'Display Phone Calls by Ext';
return(true)&quot;>Display Phone Calls by Ext</A></FONT></FONT></TD>
<TD><FONT COLOR=&quot;#999999&quot;><FONT SIZE=+0>
<A HREF=&quot;faqs.html&quot;
onMouseOver=&quot;window.status = 'Frequently Asked Questions';
return(true)&quot;>F.A.Q.s</A></FONT></FONT></TD>
</TR>
</TABLE>


</FORM>

Hope that helps, also you may want to check if it is necessary to call the SelectData twice in every run. You call it once before your table sub and then again once before you make the call to your table sub, I think this may just be duplicating efforts rather than giving you valid feedback, I believe you don't need the first call above your table function declaration.

-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
For my next trick I will pull a hat out of a rabbit (if you think thats bad you should see how the pigeon feels...)

JohnBates · Nov 22, 2002

Wow, thanks for your help Tarwn !

Now the listbox is only at the top...
and I removed the other call to SeelctData - still works and the page loads faster now.

Really appreciate your ideas. John

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How To Make ListBox Appear BEFORE HTML Table, Not After Table 1

JohnBates

MIS

Tarwn

Programmer

JohnBates

MIS

Tarwn

Programmer

JohnBates

MIS

Tarwn

Programmer

JohnBates

MIS

Similar threads

Part and Inventory Search

Sponsor