|
Introduction
Years ago a friend of mine asked me to help him start a new Web site called Carryout.Com. After months of working with data structures of a size I had never seen before, I turned out a decent Web site and an administration site I thought were perfect. An hour after taking a look at the new site, my friend said there was only one small problem.
"I thought it was perfect," I said.
"It is," he said. "But I don’t like the way we input restaurant menus."
"I like it," I replied. "It says ‘Internet’ to me."
"It says ‘difficult’ to me. Make something else."
So I proceeded to rack my brain day in and day out (mothers were covering their children’s ears and the kids were saying, "What kind of Web page did he say that was?") until I discovered dynamic JavaScript with ASP and data queries. The following offers an example of dynamic JavaScript for text boxes, radio buttons, and multiselect boxes.
Example
Few people realize that you can put ASP tags inside of JavaScript blocks. The following ASP code:
<script language="JavaScript">
<!--
<% for i = 0 to 3 %>
form[<%= i %>].element = "<%= i %>"
<% next %>
//-->
</script>
will produce this code in the browser:
<script language="JavaScript">
<!--
form[0].element = "0"
form[1].element = "1"
form[2].element = "2"
form[3].element = "3"
//-->
</script>
Once I learned to do this, a small light bulb turned on. The possibilites are endless. You can fit a whole lot of data into one form, on one page. I'm sure everyone who's worked with JavaScript has seen the following example that can be found in the download source in this file article_1_source.htm.
This was created easily enough by querying the database for some restaurants, looping through the recordset, and writing some static JavaScript to populate the text field with the "text" object of the select box. Here's the code:
<form name="javaRestaurant">
<% 'open the data connection %>
<!--#include file="../_include/opendatabase.asp"-->
<% dim arrRestaurant
'SQL query to the database...
SQL = "select distinct irestaurantid, vchrestaurantname " _
& "from restaurant " _
& "where vchcity like 's%'"
%><!--#include file="../_include/runsql.asp"--><%
if not rs.eof then
'if not end of file then read all Id
s and restaurants into an array . . .
' . . . there are many ways to get and read back data,
'but this is my favorite . . .
arrRestaurant = rs.getrows(,,array(0,1))
arrRestaurant_count = UBound(arrRestaurant,2)
else
'if no rows are returned, set this variable to -1
'so the for loop doesn't break . . .
arrRestaurant_count = -1
end if
%>
<table cellpadding="5" cellspacing="0" border="0">
<tr>
<td align="right"><strong>Select a Restaurant</strong></td>
<td><%'open the initial select box %>
<select name="restaurantSelect" onChange="go(this)">
<option value="-1">Choose a Restaurant</option>
<%
'loop through all records in the array and write
' out options for the select box
for i = 0 to arrRestaurant_count
Response.Write "<option value=""" & arrRestaurant(0,i) _
& """>" & arrRestaurant(1,i) & "</option>" & vbCRLf & vbTab
next %>
</select>
</td>
</tr>
<tr>
<td align="right"><strong>Restaurant Name</strong></td>
<td><input type="text" name="restaurantText" size="25"></td>
</tr>
</table>
<script language="JavaScript">
<!--
function go(thisValue)
{
var restaurantText = document.javaRestaurant.restaurantText
//If the person is choosing the first options in the select box
// set the value of the restaurant name text box to nothing . . .
if (thisValue.value == "-1")
{
restaurantText.value = ""
}
else
{
//Set the restaurant name text box to the same thing that's in the
//restaurant name select box.
restaurantText.value = thisValue.options[thisValue.selectedIndex].text
}
}
//-->
</script>
So . . . the next step is to use ASP inside of your JavaScript to determine if the selected restaurant delivers or not to see an example look at article_2_source.htm in the download provided below
I pull another column from the database called bDelivery, which is a binary column that will hold either a 0 or a 1. Then add the radio buttons to the HTML elements, and add the following code inside the JavaScript else statement:
<script language="JavaScript">
<!--
function go(thisValue)
{
...
var delivery = document.javaRestaurant.delivery
if (...)
...
......
else
{
restaurantText.value = thisVal.....
<% 'loop through the restaurant array using ASP VBScript
for i = 0 to arrRestaurant_count
'JavaScript statement to see which restaurant has been chosen and
'select the proper delivery option . . .
'ASP output inside the JavaScript quotes . . . %>
if (thisValue.value == "<%= arrRestaurant(0,i) %>")
{
//Select the index (0 or 1) of the radio button group
delivery[<%= arrRestaurant(2,i) %>].checked = true
}
<% next %>
}
}
//-->
</script>
The final (and definitely coolest) step is to have a multiple select box that shows what zip codes each of the restaurants that deliver will go to. (See Example article_3_source.htm in the download)
I pull all of the distinct zip codes that these restaurants deliver to and put them into the arrZipCodes array. Then I pull all of the zip codes that each restaurant delivers to and put them into the arrRestaurantZipCodes array. This code looks just like this:
'pull all distinct zip codes from database
dim arrZipCode
SQL = "select distinct chzipcode " _
& "from restaurantzipcodes " _
& "where irestaurantid in (select irestaurantid from restaurant " _
& "where vchcity like 's%')"
%><!--#include file="../_include/runsql.asp"--><%
if not rs.eof then
arrZipCode = rs.getrows(,,array(0))
arrZipCode_count = UBound(arrZipCode,2)
else
arrZipCode_count = -1
end if
'pull zip codes that each restaurant delivers to
dim arrRestaurantZipCode
SQL = "select distinct rzc.irestaurantid, rzc.chzipcode " _
& "from restaurantzipcodes rzc, restaurant r " _
& "where rzc.irestaurantid = r.irestaurantid " _
& "and (vchcity like 's%') " _
& "and r.bdelivery = 1 " _
& "order by rzc.irestaurantid"
%><!--#include file="../_include/runsql.asp"--><%
if not rs.eof then
arrRestaurantZipCode = rs.getrows(,,array(0,1))
arrRestaurantZipCode_count = UBound(arrRestaurantZipCode,2)
else
arrRestaurantZipCode_count = -1
end if
Then I add the multiple select box filled with zip codes to the HTML table and add the following code into the go() JavaScript function.
<script language="JavaScript">
<!--
.........
....
if (...)
..
...
else
...
<% for i = 0 to arrRestaurant_count %>
//existing --
if (thisValue.value == "<%= arrRestaurant(0,i) %>")
// |
{
// |
delivery[<%= arrRestaurant(2,i) %>].checked = true
// |
//-----------
deselectAll()
<%
'if the selected restaurant does not deliver,
'then highlight the 'No Delivery' option
' in the multiple select box
if arrRestaurant(2,i) = "0" then %>
x = findIndex("-1")
zipCodes.options[x].selected = true
<% end if
'loop through the array that holds the zip codes
'that each of the restaurants deliver to
for j = 0 to arrRestaurantZipCode_count
'if the restaurant from this inner loop equals
'the restaurant from the outer loop
if arrRestaurantZipCode(0,j) = arrRestaurant(0,i) then %>
x = findIndex("<%= arrRestaurantZipCode(1,j) %>")
zipCodes.options[x].selected = true
<% end if
next %>
}
<% next %>
//This is a function to loop through the multiple
//select box and return the index of the value passed in . . .
function findIndex(inputStr)
{
var zipCodes = document.javaRestaurant.zipCodes
//Loop through the multiple select box
for (i = 0; i < zipCodes.length;i++)
{
//If the value of the current index equals
// what was passed into the function . . .
if (zipCodes.options[i].value == inputStr)
{
//return the current index
return i
}
}
//If we get this far, we didn't find an index,
//so we'll pass back a zero.
return 0
}
//This is a function to deselect everything in
//the multiple select box.
function deselectAll()
{
var zipCodes = document.javaRestaurant.zipCodes
//Loop through the multiple select box
for (i=0;i<zipCodes.length;i++)
{
//Deselect the current index
zipCodes.options[i].selected = false
}
}
}
//-->
</script>
This is a large overview of some of the things you can do with ASP, databases, and JavaScript. The possibilities really are quite extensive. Anything that can be done with JavaScript can be dynamically created with ASP.
This ASP/JavaScript method has not only helped in Carryout, but I seem to find a use for it in just about every site that I make. Good Luck!
Download
You can download the complete source for the sample contained in this article:
http://15seconds.com/files/000210.zip
About the Author
Travis Giggy is the vice president of technology for Carryout.Com, an on-line food-ordering service. He also has his own Internet consulting firm called WebAcceleration. Travis lives in Fort Collins, Colorado, and can be reached at travisg@carryout.com.
|
