ASP Generated JavaScript Functions

ASP is a useful technology for interrogating the contents of a database, especially where the result determines the contents of a subsequent web page. But once the page is loaded, without refreshing or reloading the page, its becomes impossible to re-interrogate the database as ASP is, by nature, a server side technology.

The only solution is to use client-side scripting which relies on VBScript or JavaScript. However, without wanting to prompt a debate on the most appropriate browser scripting language; at present as JavaScript is readily supported by both Netscape and IE without requiring plug-ins. Therefore I'm opting for this, despite my personal preference for VBScript, due to my VB background. That aside, the following examples could just as easily use VBScript if only IE is to by used, say, within a controlled intranet environment.

The aim of this exercise is to show through a typical application, how to hold the contents of a recordset on the client. Consider a currency converter example where users can select a country and enter a value and receive a resultant value in the local currency of the selected country. Admittedly the conversion rates could by hard-coded into a JavaScript function, but this isn't practical as exchange rates constantly change and would require continuous recoding. An easier option is to update an exchange rate table and dynamically create a client-side function using the table's contents, which will then be used to calculate the local currency. The following code shows such a JavaScript function containing ASP content:

   <head>
   <%
   'open a record set with county and conversion rate fields
   strSQL="SELECT country, conv_rate FROM exchange_rate"
   set rs=conn.execute(strSQL)
   %>	  
   
   <SCRIPT language="JavaScript">
     <!--

     function calcCurr(frmExchRate)
     {
     //populate arrays with recordset content
     var country() = new Array;
     var rate() = new Array;
     var conversion_rate;
     <%
     intCount = 0
     do until rs.eof
        strCountry = rs("country")
        strConvRate = rs("conv_rate")
        response.write "country[" & intCount & "] = " & strCountry & chr(13)
        response.write "rate[" & intCount & "] = " & strConvRate & chr(13)
        intCount = intCount + 1
        rs.movenext
     loop
     %>
     for (i=0; i<<%=intCount + 1%>; i++)
        {
        if (frmExchRate.SelectCountry.value == country[i])
           {
           conversion_rate=rate[i]
           }
        }
     frmExchRate.ValueCalc = frmExchRate.ValueEntered * conversion_rate
     }

     // -->
   </SCRIPT>

   </head>
   <body>

   'populate dropdown country menu
   <form name="frmExchRate">
   <input type=text name="ValueEntered" onChange="calcCurr(frmExchRate);">
   <p>
   <select name="SelectCountry" onChange="calcCurr(frmExchRate);">
   <%
   if intCount > 0 then
      rs.movefirst
      do until rs.eof
         strCountry = rs("country")
         response.write "<option value=""" & strCountry & """>" & strCountry
         rs.movenext
      loop
   end if
   %>
   </select><p>
   <input type=text name="ValueCalc">
   </form>

   </body>

As the page loads, the calcCurr JavaScript function is dynamically created with 2 arrays containing an equal number of elements with country and corresponding exchange rate details. A loop is employed to iterate through the arrays to find the appropriate country and exchange rate, and thereby calculate the correct local currency value for the selected country and amount entered. To ensure the ValueEntered textbox amount contains a numeric value, use a JavaScript numeric validation function. The ASP script then populates the dropdown box from the country field to make sure the only countries selectable are those with associated conversion rates. Also as connection objects are specific to a database, server, username and password, I've omitted this code to keep the example generic.