Visual Basic
Python
Active Server Page
Java
Online Tools
Click Here


Home

What's New

Articles

Code Downloads

Code Snippets

Message boards

Links
Tool Box

Books

Mailing List
Receive free code snippets and notices when this site is updated.

Contact

 

Tell a friend about this article

Cross browser Client side record sets in Java script

With IE 4.0 came the ability to bind database fields to elements on a web page and manipulate them on the client.  Unfortunately theses techniques don't work with Netscape Navigator.  In this article I will describe a way that a read only recordset can be created in Javascript that will work with both Internet Explorer and Netscape.


To explain how this solution works we will go through the process of creating an employee contact database that allows the records to be navigated through on the client.

This solution uses Active Server Pages to load the records from an Access database and put them into Javascript objects.  ASP is simply used to create a Javascript file that can be included in our web page.

The structure of the database is shown below:

Two Javascript classes are used in this system:

  • Employee
  • Recordset

Employee Class

The Javascript class Employee holds the records from the database and is defined in the ASP page "employeeObj.asp".  The methods and properties of the Employee class are shown below.

  Employee
Constructor Employee(EmployeeName, JobTitle, Phone, Email)
Properties EmployeeName
JobTitle
Phone
Email

The ASP page creates an instance of the Employee class for each record in the "Employees" table of the database.  The full listing of "employeeObj.asp" is shown below.

"employeeObj.asp"

function Employee(EmployeeName, JobTitle, Phone,Email) {
	this.EmployeeName = EmployeeName;
	this.JobTitle = JobTitle;
	this.Phone= Phone;
	this.Email = Email;
}
var employees = new Array();
<%
   Set objConn = CreateObject("ADODB.Connection")
   objConn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & _
                Server.MapPath("db\phonedb.mdb"))

   Set rsEmployees = objConn.Execute("SELECT * FROM Employees")

   i = 0
  ' Create the instances
   Do While Not rsEmployees.EOF		
      Response.write "employees[" & i & "] = new Employee(""" & rsEmployees("Name") & _
         """,""" & rsEmployees("JobTitle") & """,""" & rsEmployees("Phone") & """,""" & _
         rsEmployees("Email") & """);" & vbcrlf
      i = i + 1
      rsEmployees.MoveNext
   Loop
   rsEmployees.close
   set rsEmployees = Nothing
   objConn.close
   set objConn = Nothing
%>

The Javascript outputted by this ASP page could look like this:

function Employee(EmployeeName, JobTitle, Phone,Email) {
	function Employee(EmployeeName, JobTitle, Phone,Email) {
	this.EmployeeName = EmployeeName;
	this.JobTitle = JobTitle;
	this.Phone= Phone;
	this.Email = Email;
}
var employees = new Array();
employees[0] = new Employee("John Pom","Sales Manager","42 421414","johnp@somecompany.com");
employees[1] = new Employee("Sally Jessy","IS Consultant","42 453242","sallyj@somecompany.com");

The output of the ASP page is then used in "employeedb.htm" which has the job of allowing the records to be viewed and navigated.  It is imported it like this:

<SCRIPT language="Javascript" src="employeeObj.asp"></SCRIPT>

Recordset Class

Unlike the Employee class that is specific to the table we are using the Recordset class can be used to navigate any array.  It's properties and Methods are shown below.

  Recordset
Constructor Recordset(Data, OnMoveEvent)
Properties Position
RecordCount
Fields
Methods MoveFirst()
MovePrevious()
MoveNext()
MoveLast()

The Recordset object has been separated into another file "recordset.js" so that it can easily be used in different pages and is included in "employeedb.htm" using
 <SCRIPT language="Javascript" src="recordset.js"></SCRIPT>

The Recordset object is created using:

employeeRecordset = new Recordset(employees, FillFields);

This creates a Recordset object that will move though the array "employees" and calls the method FillFields() when ever the MoveFirst, MovePrevious, MoveNext or MoveLast methods are called.  The FillFields function then places the data into textboxes.

Below is the script in "employeedb.htm" that fills the textboxes with data.

<SCRIPT language="Javascript">

employeeRecordset = new Recordset(employees, FillFields);

function FillFields()
{

  document.EmployeeRecordsForm.txtName.value = employeeRecordset.Fields.EmployeeName;
  document.EmployeeRecordsForm.txtJobTitle.value = employeeRecordset.Fields.JobTitle;
  document.EmployeeRecordsForm.txtPhone.value = employeeRecordset.Fields.Phone;
  document.EmployeeRecordsForm.txtEmail.value = employeeRecordset.Fields.Email;

}

FillFields();

</SCRIPT>


You can see this script in action by clicking here.

Download Example.


The Complete code for employeedb.htm

<html><head><title>Javascript Client Side Record Set Example</title>
<SCRIPT language
="Javascript" src="employeeObj.asp"></SCRIPT>
<SCRIPT language
="Javascript" src="recordset.js"></SCRIPT>
</head>

<body>
<h1>
Employee Contact Database</h1>

<form name="EmployeeRecordsForm">
 <p>Name <input type="text" name="txtName" size="20"></p>
 <p>Job Title <input type="text" name="txtJobTitle" size="20"></p>
 <p>Phone <input type="text" name="txtPhone" size="20"></p>
 <p>Email <input type="text" name="txtEmail" size="20"></p>
 <p>
  <input type=
"button" value="Move First" name="cmdMoveFirst" onclick="employeeRecordset.MoveFirst();">
  <input type=
"button" value="&lt;" onclick="employeeRecordset.MovePrevious();" name="cmdMovePrevious">
  <input type=
"button" value="&gt;" name="cmdMoveNext" onclick="employeeRecordset.MoveNext();">
  <input type=
"button" value="Move Last" name="cmdMoveLast" onclick="employeeRecordset.MoveLast();">
</p>

</form>

<SCRIPT language="Javascript">
  employeeRecordset = new Recordset(employees, FillFields);
  function FillFields() {
   document.EmployeeRecordsForm.txtName.value = employeeRecordset.Fields.EmployeeName;
   document.EmployeeRecordsForm.txtJobTitle.value = employeeRecordset.Fields.JobTitle;
   document.EmployeeRecordsForm.txtPhone.value = employeeRecordset.Fields.Phone;
   document.EmployeeRecordsForm.txtEmail.value = employeeRecordset.Fields.Email;
  }

   if (employeeRecordset.RecordCount > 0)
       FillFields();

</SCRIPT>

</body>
</html>

Recordset Class (recordset.js)

function Recordset(Data, OnMoveEvent)
{
	this.records = Data;
	this.MoveNext = MoveNext;
	this.MovePrevious = MovePrevious;
	this.MoveFirst = MoveFirst;
	this.MoveLast = MoveLast;
	this.Position = 0;
	this.RecordCount = Data.length;

	if (this.RecordCount > 0)
		this.Fields = this.records [0];

	this.OnMoveEvent = OnMoveEvent;
}

function MoveFirst()
{
	if (this.RecordCount > 0) {
		this.Position = 0;
		this.Fields = this.records[0];
		this.OnMoveEvent();
	}
}

function MoveLast()
{
	if (this.RecordCount > 0) {
		this.Position = this.RecordCount-1;
		this.Fields = this.records[this.RecordCount-1];
		this.OnMoveEvent();
	}
}

function MoveNext()
{
	if (this.Position < this.RecordCount-1) {
		this.Position++;
		this.Fields = this.records[this.Position];
		this.OnMoveEvent();
	}
}

function MovePrevious()
{
	if (this.Position > 0) {
		this.Position--;
		this.Fields = this.records[this.Position];
		this.OnMoveEvent();
	}
}