Coding *List.js

Each *List.htm file uses the functions in a corresponding JavaScript file. For example, ActivtityList.htm (all language versions) uses the functions in ActivityList.js. The following topics describe the *List.js functions:

Adapting window_onLoad to a Form

The window_onLoad function in *List.js is the event handler for the onload event of a window (the frame named LEFTFRAME is the window when the *List.htm is loading); script in this function runs when the window is loaded.

The URLs that run viewData.asp in the *List.js JavaScript files vary depending on the functionality that the list provides in the PT application. The text strings that contain URLs assigned to the xml variable reflect these tasks, which are shown in the following list:

The following two code fragments are from Activity.js. The first one illustrates a URL that provides information to viewData.asp that enables a SELECT SQL statement on the Activity table in the Eval database. This statement returns all ActivityId and Description fields from the table and sorts records on the Description column. 

var xml = '../Scripts/viewData.asp?tableName=activity&fieldList=ActivityId,Description&sortBy=Description';

The next code fragment shows the script that determines whether an id variable is present in the URL and whether an alternative URL is used. Calling getParam to Extract a Parameter Value describes how the getParam function in the GetParam.js file works. This URL makes the name of a stored procedure (lw_getActivityList), the parameter name for the stored procedure (groupId), and the parameter value (id) available to viewData.asp.

var id = getParam('id');
   if (id != null) xml = '../Scripts/viewData.asp?procName=lw_getActivityList&groupId=' + id;

The doLoad function in LoadList.js is the event handler for the ondataavailable event of the XMLDocument object; its script runs when the ondataavailable event fires. The XMLDocument is loaded with the resultant XML recordset. The following lines of code illustrate this process:

   xmldso.XMLDocument.ondataavailable = doLoad;
   xmldso.XMLDocument.load(xml);

Run Script in doLoad Function describes the script in doLoad. Using LoadList.js to Load XML Data into a List and Coding *List.htm describe the processes and functions that work together to load the list in the left pane.

Inserting Cells With formatCell

The formatCell function dynamically creates HTML for a new row in the TargetTable element. The function accepts the current row in the rows collection (TR elements) as a parameter, inserts values into cells in that row, and returns the HTML. The following code fragment from ActivityList.js illustrates the process of adding an ActivityId (row.cells[0].innerText) and a Description (row.cells[1].innerText) to a row: 

return '<SPAN STYLE="display:none">' + row.cells[0].innerText + '</SPAN>' +
          '<IMG border="0" width="24" height="24" src="../images/eval.gif" align="left" hspace="4">' +
          '<SPAN>' + row.cells[1].innerText + '</SPAN>';

Initiating Right Pane Display with selectCell

When the user clicks an entry in the left pane list, the script in selectColor (a function in LoadList.js) runs because selectColor is the event handler for the onclick event of the row. The following code fragment from the copyRows function in LoadList.js shows the statements that make this assignment:

var copyRow = TargetBody.insertRow();
var copyCell = copyRow.insertCell();
…
copyCell.onclick     = selectColor;

The selectColor function calls the selectCell function, passing the value of Window.event.srcElement (in the variable e) as a parameter. The following line of code shows the call to selectCell: 

selectCell(e);

The following code is from selectCell in ActivityList.js, but all selectCell functions in *List.js files contain identical code. The code captures the Activityid in the id variable and calls the load function in Activity.js, which is the JavaScript file included in Activity.htm. The use of the parent object links the LEFTPANE frame (*List.htm) with the RIGHTPANE frame (*.htm). Coding *.htm and Coding *.js describes the process of populating a single record in the right pane, which selectCell initiates. 

function selectCell(elem) {
   var id = elem.firstChild.innerText;
   parent.frames("RIGHTPANE").window.load(id);

Search Functions in *List.js

The PT application's Group, Location, and User forms include a search facility. A user can enter search criteria, perform a full-text search on specified columns in Eval database tables, and display the search results in the list in the left pane.

The following code from the search function in GroupList.js shows how the search criteria are first captured in the term variable and appended to the URL. Next, the search function calls the resetRows function in LoadList.js to cancel the transfer of data (for more information, see Functions in LoadList.js). The function then assigns the dataAvailable function to the onreadystatechange event for the XMLDocument and loads the XMLDocument with data from an XML recordset.

function search() {
   var term = frmSearch.searchTerm.value;
   if (term != "") {
      resetRows();
      var xml = '../Scripts/viewData.asp?tableName=group&fieldList=GroupId,Name&sortBy=Name&search=' + term;
      xmldso.XMLDocument.ondataavailable = noOp; // won't accept null
      xmldso.XMLDocument.onreadystatechange = dataAvailable;
      xmldso.XMLDocument.load(xml);

If the user clicks Enter instead of the search image, the document_onKeyPressEvent function captures the keycode and calls the search function.