WebReference.com - Universal Related Pop-up Menus - Single Form Version II - (2/6) | WebReference

WebReference.com - Universal Related Pop-up Menus - Single Form Version II - (2/6)

To page 1current pageTo page 3To page 4To page 5To page 6
[previous] [next]

URPM: Single Form Version II

Part 1: The JavaScript Code

The first incarnation of the single form URPM did not keep track of menu values because my client only stored the text property. Since then, many people I heard from expressed their need to have the code sent to the server, rather than the description. To add the codes to the arrays, I stored literal arrays within each array element - in effect creating a 2 dimensional array. Most people familiar with JavaScript are use to defining arrays with a constructor - e.g.: var a = new Array() or Array( "dog", "cat", 4, 56.43 ). What is less commonly known, is that we can also create an array literal by enclosing the elements with square brackets ( [] ). Literal values are the ones you type directly into mathematical or string expressions, as opposed to data which is stored in a variable. For example 23 (an integer), 12.32E23 (a floating point), or 'flopsy the Hamster' (a string) are all examples of literals. More complicated data types such as Regular Expressions and Arrays also support literals.

With respect to Objects, literals are a great time saver by allowing the programmer to create the Object and assign a value to it simultaneously. Whether you're defining a string or an Array of strings, unless you're waiting for some kind of special occasion, you should assign its data at the same time if you already know the value(s). To illustrate, let's say that I want to assign a name to a string for safe keeping. I would write the following line:

var name = "Fred";

I could do the same using the String constructor:

var name = new String("Fred");

Both are identical in terms of function, but the first is shorter. Similarly, if you wanted to assign the values of an array right away, there would be no real reason to go through the constructor (that is, unless you like typing). You would just assign them like so:

var a = [ "Fred", "Joe", "Mary" ]; 
// same as new Array("Fred", "Joe", "Mary");

WARNING: Array literals are not supported by really old browsers such as Netscape and IE 3 or below. If you want to make everyone happy, use the constructor.

There are many times that you will want to assign the array elements one at a time because you don't how many or what kind of data types will be coming your way. Since I knew in advance exactly what I needed to store, I opted to use the more succinct array literal over the longer Array constuctor. I stored the text in the first element, and the value in the second one. Here is a comparison of the old and the new arrays:

Legend:
blue text: JavaScript
green text: modified code

OLD ARRAY:

//an empty array that will hold the final Objects.
var m            = new Array();
var manufacturer = new Array(); //list 1
var model        = new Array(); //list 2
var level        = new Array(); //list 3
 manufacturer[0]="ACURA";
  model[0]="CL";
   level[0]="2.2 PREMIUM";
   level[1]="2.3";
   level[2]="3.0";
   level[3]="";
  model[1]="EL";
   level[4]="PREMIUM";
   level[5]="SE";
   level[6]="SPORT";
   level[7]="";
  model[2]="INTEGRA";
   level[8]="GS";
   level[9]="GS-R";
   level[10]="LS";
   level[11]="RS";
   level[12]="SE";
   level[13]="TYPE-R";
   level[14]="";
  model[3]="";
 manufacturer[1]="ALFA ROMEO";
  model[4]="SEDAN LS";
   level[31]="LEVEL N/A";
   level[32]="";
  model[5]="SPIDER";
   level[33]="LEVEL N/A";
   level[34]="VELOCE";
   level[35]="";
  model[6]="";
  ...

NEW ARRAY:

//an empty array that will hold the final Objects.
var m            = new Array();
var manufacturer = new Array(); //list 1
var model        = new Array(); //list 2
var level        = new Array(); //list 3
 manufacturer[0]=["ACURA", "ACU"];
  model[0]="CL";   //no value
   level[0]=["2.2 PREMIUM", "2.2"];
   level[1]="2.3";
   level[2]="3.0";
   level[3]=[];    //"" still works too
  model[1]="EL";
   level[4]=["PREMIUM", "PRE"];
   level[5]="SE";
   level[6]=["SPORT", "SP"];
   level[7]=[];
  model[2]=["INTEGRA", "INT"];
   level[8]="GS";
   level[9]=["GS-R", "GRS"];
   level[10]="LS";
   level[11]="RS";
   level[12]="SE";
   level[13]=["TYPE-R", "TYR"];
   level[14]=[];
  model[3]=[];
 manufacturer[1]=["ALFA ROMEO", "AR"];
  model[4]=["SEDAN LS", "SLS"];
   level[31]=["LEVEL N/A", "NA"];
   level[32]=[];
  model[5]=["SPIDER", "SPI"];
   level[33]=["LEVEL N/A", "NA"];
   level[34]=["VELOCE", "VEL"];
   level[35]=[];
  model[6]=[];
  ...

My goal was to make adding the value property as easy as possible, so I only added values where the text is not the same. If it is, the script will not assign a value to the listbox, which will ultimately lead to the Web page sending the text property to the server instead. Since they are the same, it will make no difference from the database's point of view. Whether or not you need to always have a value will depend on what kind of text you are displaying in your lists, and what you plan on doing with the listboxes. Either way, both these arrays will work with the new code.


To page 1current pageTo page 3To page 4To page 5To page 6
[previous] [next]

Written by Robert Gravelle and Created: October 2, 2001
Revised: October 2, 2001


URL: http://webreference.com/dev/menus/oneformv2/2.html