Wrox Home  
Search P2P Archive for: Go

  Return to Index  

interdev_programming thread: Re: JavaScript and ASP


Message #1 by "Kaine Varley" <Kaine@T...> on Thu, 10 Jan 2002 11:10:34
Elizabeta,

Writing JavaScript from ASP is just the same as writing HTML, in that as 
far as the ASP is concerned, it is just text that is being generated. It 
is the client that must try to interprit the resulting output. So, if you 
have a recordset that needs to write JavaScript, you could simply do the 
following:

Do Until rs.EOF
  i = i + 1
%>
  jsArray[<%i%>] = <%rs("RecordsetField")%>;
%>
  rs.MoveNext
Loop

It shouldn't matter where, in the HTML, your JavaScript is located, but as 
a standard, I place it between the <HEAD> tags. This follows that 
JavaScript is for processing, and will never be seen by the user, only 
it's results, usually.

I have written a simple HTML page that shows a few JavaScript arrays, and 
a function that updates an HTML select object dynamically. (Please be 
aware that it may not be correctly formatted in this message). Although 
the arrays are hard coded, they could simply be built up with ASP using 
the technique I suggested above.

Hope it helps,


Kaine

<HTML>
<HEAD>
<TITLE>Dynamic Drop Down</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--

// Create three blank arrays.
var arrArray1 = new Array();
var arrArray2 = new Array();
var arrArray3 = new Array();


// Load array number 1.
arrArray1[0] = new Array();	// Add new second dimensional array.
arrArray1[0][0] = "Array 1, Name 1";
arrArray1[0][1] = "Array 1, Value 1";
arrArray1[1] = new Array();	// Add new second dimensional array.
arrArray1[1][0] = "Array 1, Name 2";
arrArray1[1][1] = "Array 1, Value 2";
arrArray1[2] = new Array();	// Add new second dimensional array.
arrArray1[2][0] = "Array 1, Name 3";
arrArray1[2][1] = "Array 1, Value 3";
arrArray1[3] = new Array();	// Add new second dimensional array.
arrArray1[3][0] = "Array 1, Name 4";
arrArray1[3][1] = "Array 1, Value 4";

// Load array number 2.
arrArray2[0] = new Array();	// Add new second dimensional array.
arrArray2[0][0] = "Array 2, Name 1";
arrArray2[0][1] = "Array 2, Value 1";
arrArray2[1] = new Array();	// Add new second dimensional array.
arrArray2[1][0] = "Array 2, Name 2";
arrArray2[1][1] = "Array 2, Value 2";
arrArray2[2] = new Array();	// Add new second dimensional array.
arrArray2[2][0] = "Array 2, Name 3";
arrArray2[2][1] = "Array 2, Value 3";
arrArray2[3] = new Array();	// Add new second dimensional array.
arrArray2[3][0] = "Array 2, Name 4";
arrArray2[3][1] = "Array 2, Value 4";

// Load array number 3
arrArray3[0] = new Array();	// Add new second dimensional array.
arrArray3[0][0] = "Array 3, Name 1";
arrArray3[0][1] = "Array 3, Value 1";
arrArray3[1] = new Array();	// Add new second dimensional array.
arrArray3[1][0] = "Array 3, Name 2";
arrArray3[1][1] = "Array 3, Value 2";
arrArray3[2] = new Array();	// Add new second dimensional array.
arrArray3[2][0] = "Array 3, Name 3";
arrArray3[2][1] = "Array 3, Value 3";
arrArray3[3] = new Array();	// Add new second dimensional array.
arrArray3[3][0] = "Array 3, Name 4";
arrArray3[3][1] = "Array 3, Value 4";


// function to swap the array.
function swapArray(arrToUse){
  // Grab a reference to the select object.
  var frmSelect = document.frmForm.mySelect;


  // Iterate through the first dimension of the arrToUse.
  for(var i = 0; i < arrToUse.length; i++){

    // Create a new select option using the name/value pair held in
    // the second dimension, and add it to the select object.
    frmSelect.options[i] = new Option(arrToUse[i][0], arrToUse[i][1]);

  };
};


//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="frmForm">
<TABLE>
<TR>
  <TD><SELECT NAME="mySelect"></SELECT></TD>
</TR>
</TABLE>

<BR>

<TABLE>
<TR>
  <TD>
    <INPUT TYPE="radio" NAME="useArray" VALUE="1" onClick="JavaScript:void
(swapArray(arrArray1));">
    <INPUT TYPE="radio" NAME="useArray" VALUE="2" onClick="JavaScript:void
(swapArray(arrArray2));">
    <INPUT TYPE="radio" NAME="useArray" VALUE="3" onClick="JavaScript:void
(swapArray(arrArray3));">
  </TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

  Return to Index