If your application is data intensive, and you want the user to be able to sort the data after it is received, then using the full power of DHTML to create, update, and rearrange HTML elements on a page can be superior to dynamically generating a page on the server that becomes a static page on the user's mobile device. The page in this sample application, leads.html, dynamically creates and sorts four tables. The workings of this page are described in detail in Leads page: dynamically creating and sorting a table.
The full source code for leads.html is listed below. For instructions on downloading this source code, see Downloading and accessing the JavaScript engine sample files.
<html> |
<head> |
<title>Lead Manager</title> |
<meta name="HandheldFriendly" content="True"> |
<script language="JavaScript1.2"> |
<!-- |
// // FILE: leads.html // // Revision Date: March 15, 2002 // // Copyright (c) 2006, iAnywhere Solutions, Inc. // //--> |
<!--
//
// Globals
//
var oldTD = null; |
//
// Lead Manager: Leads tab data
//
var intLM_LeadsTab = 1;
var arrLM_Leads =[
["Name", "Company", "Status"],
["Chambers, B.", "Starco", "Open"],
["Johnson, E.", "J & A Inc.", "Closed"],
["Perez, R.", "Lux. P&T", "Working"],
["Smyth, S.", "Gen. Comp.", "Contacted"],
["Weller, P", "Lexin Ind.", "Open"],
["Williams, M.", "Telco GBMH", "Working"],
["Rock, F.", "US Airways", "Open"],
["Webb, S.", "Air, Inc.", "Closed"]
]; |
//
// Lead Manager: Accounts tab data
//
var intLM_AccountsTab = 2;
var arrLM_Accounts =[
["Name", "Region", "Phone", "Owner"],
["BBI", "Europe", "44 2345...", "JB"],
["FTel", "US West", "1 310 55...", "DB"],
["IBT Co.", "Japan", "81 4567...", "JB"],
["KDNY", "US East", "1 212 55..", "DB"],
["Tel Ital", "Europe", "39 4567...", "AF"],
["ZedCo", "US East", "1 617 55...", "JB"],
["SingP", "Asia", "39 4567...", "AF"],
["ManilaTel", "Asia", "44 3454...", "JB"]
]; |
//
// Lead Manager: Contacts tab data
//
var intLM_ContactsTab = 3;
var arrLM_Contacts =[["Name", "Company", "Status"],
["Chambers, B.", "Starco", "Open"],
["Johnson, E.", "J & A Inc.", "Closed"],
["Perez, R.", "Lux. P&T", "Working"],
["Smyth, S.", "Gen. Comp.", "Contacted"],
["Weller, P.", "Lexin Ind.", "Open"],
["Williams, M.", "Telco GBMH", "Working"],
["Rock, F.", "US Airways", "Open"],
["Webb, S.", "Air, Inc.", "Closed"]
]; |
//
// Lead Manager: Opportunities tab data
//
var intLM_OppsTab = 4;
var arrLM_Opps =[["Name", "Amount ($)", "Close Date"],
["InfoCorp", "35k", "6/12/01"],
["BBI", "170k", "Closed"],
["BBI", "390k", "6/17/01"],
["FTEL", "1000k", "8/23/01"],
["ZBT Corp", "48k", "10/14/01"],
["IndiaTel", "275k", "10/20/01"],
["British Telecom", "1135k", "12/12/01"],
["Lucent", "35k", "12/19/01"]
]; |
//
// FUNCTION: Initialize()
//
function Initialize()
{ |
var i;
var objMasterTabsDIV;
var objDIV;
var objTABLE;
var objTBODY;
var objTR;
var objTD;
var objBR; |
if (arguments.length != 0)
throw new Error("function Initialize()
incorrectly called"); |
//
// Setup the four Lead Manager tabs.
//
objTABLE = document.getElementById("TableTabs");
objTR = objTABLE.firstChild.childNodes[0];
objTR.align = "center";
objTD = objTR.childNodes[0];
oldTD = objTD;
SetTabColors(objTD, 1); |
//
// Initially the first Lead Manager tab is selected.
//
for (i = 1; i <= 3; i++)
SetTabColors(objTR.childNodes[i], 0); |
//
// Dynamically generate the four Lead Manager tables.
//
objMasterTabsDIV = document.getElementById("TabTablesDiv"); |
for (i = 1; i <= 4; i++)
{
//
// DIV
//
objDIV = document.createElement("DIV");
objMasterTabsDIV.appendChild(objDIV)
objDIV.id="MainT" + i + "Div";
objDIV.style.display = (i == 1) ? "block" : "none"; |
//
// DIV => TABLE
//
objTABLE = document.createElement("TABLE");
objDIV.appendChild(objTABLE);
objTABLE.id = "Table" + i;
objTABLE.border = "1";
objTABLE.cellSpacing = "0";
objTABLE.width = "134px";
objTABLE.style.fontSize = "8px"; |
//
// DIV => TABLE => TBODY
//
objTBODY = document.createElement("TBODY");
objTABLE.appendChild(objTBODY); |
//
// DIV => TABLE => TBODY
// => BR
//
objBR = document.createElement("BR");
objDIV.appendChild(objBR);
} // for |
//
// Dynamically load the data into the Lead
// Manager tables.
//
// Adds the TR and TD elements to the above
// tables.
// |
LoadLeadManagerTable("Table1", arrLM_Leads);
LoadLeadManagerTable("Table2", arrLM_Accounts);
LoadLeadManagerTable("Table3", arrLM_Contacts);
LoadLeadManagerTable("Table4", arrLM_Opps); |
return;
} // Initialize |
//
// FUNCTION: InitializeNav()
//
function InitializeNav()
{ |
if (arguments.length != 0)
throw new Error("function InitializeNav()
incorrectly called"); |
Initialize(); |
//
// By default, the navigation bar is not displayed.
//
HideNav(); |
//
// Show the navigation URLs that are at the bottom of the HTML
document.
//
document.getElementById("navurls").style.display = "block"; |
return; |
} // InitializeNav |
//
// FUNCTION: ShowNav()
//
// Purpose: Show the dropdown navigation bar.
//
function ShowNav()
{ |
if (arguments.length != 0)
throw new Error("function ShowNav()
incorrectly called"); |
document.getElementById('openNav').style.display="block";
document.getElementById('closedNav').style.display="none";
document.getElementById('nav').style.display="block"; |
return; |
} // ShowNav |
//
// FUNCTION: HideNav()
//
// Purpose: Hide the dropdown navigation bar.
//
function HideNav()
{ |
if (arguments.length != 0)
throw new Error("function HideNav()
incorrectly called"); |
document.getElementById('openNav').style.display="none";
document.getElementById('closedNav').style.display="block";
document.getElementById('nav').style.display="none"; |
return; |
} // HideNav |
function ArrayBubbleSort(arrValuesIN, intColumn)
{ |
var temp;
var i;
var j;
var intLength; |
if (arguments.length != 2)
throw new Error("function ArrayBubbleSort()
incorrectly called"); |
intLength = arrValuesIN.length |
//
// Skip the first row: we do not want to sort the table
column headings.
//
for (i = 1; i < (intLength-1); i++) { |
for (j = i + 1; j < intLength; j++) { |
if (arrValuesIN[j][intColumn] < arrValuesIN[i][intColumn])
{
temp = arrValuesIN[i];
arrValuesIN[i] = arrValuesIN[j];
arrValuesIN[j] = temp;
} // if |
} // for j |
} // for i |
return; |
} // FUNCTION: ArrayBubbleSort |
//
// FUNCTION: SortLeadManagerTableElements
//
function SortLeadManagerTableElements(objTargetTBODY,
arrValues, intColumn)
{
var i;
var j;
var intColumns;
var intRows; |
if (arguments.length != 3)
throw new Error("function SortLeadManagerTableElements()
incorrectly called"); |
ArrayBubbleSort(arrValues, intColumn); |
intColumns = arrValues[0].length;
intRows = arrValues.length; |
//
// Reload the table with the sorted values.
//
for (i = 1; i < intRows; i++)
{ |
var objRow = objTargetTBODY.childNodes[i];
for (j = 0; j < intColumns; j++)
{ |
var objCell = objRow.childNodes[j]; |
var objText = objCell.childNodes[0]; |
objText.nodeValue = arrValues[i][j]; |
} /// for j (each column in the row) |
} // for i (each row) |
return; |
} // SortLeadManagerTableElements |
//
// FUNCTION: SortLeadManagerTable
//
function SortLeadManagerTable(event)
{ |
var objTD;
var objTBODY;
var intColumn;
var strTableID; |
//
// HTML event handlers assigned using
// JavaScript are only passed 1 argument:
// an event object.
//
if (arguments.length > 1)
throw new Error("function SortLeadManagerTable()
incorrectly called"); |
//
// Identify the column and table that needs
// to be sorted.
//
objTD = this; |
intColumn = objTD.cellIndex; |
//
// TD => TR => TBODY => TABLE => TABLE.id
//
objTBODY = objTD.parentNode.parentNode;
strTableID = objTBODY.parentNode.id; |
//
// Sort the correct table.
//
switch (strTableID) { |
case "Table1":
SortLeadManagerTableElements(objTBODY,
arrLM_Leads, intColumn); break; |
case "Table2":
SortLeadManagerTableElements(objTBODY,
arrLM_Accounts, intColumn); break; |
case "Table3":
SortLeadManagerTableElements(objTBODY,
arrLM_Contacts, intColumn); break; |
case "Table4":
SortLeadManagerTableElements(objTBODY,
arrLM_Opps, intColumn); break; |
default:
alert("Demo Application Error:
SortLeadManagerTable - switch"); break; |
} // switch |
return; |
} // SortLeadManagerTable |
//
// FUNCTION: LoadLeadManagerTable()
//
function LoadLeadManagerTable(strTableName, arrTableData)
{ |
var objTable;
var eleTR;
var fChangeColor;
var intTableRows;
var intTableCols;
var i; |
if (arguments.length != 2)
throw new Error("function LoadLeadManagerTable()
incorrectly called"); |
fChangeColor = 0; |
objTable = document.getElementById(strTableName); |
intInitialRows = objTable.rows.length |
//
// Delete the existing rows in the table.
//
intTableRows = objTable.ROWS; |
for (i = 0; i < intTableRows; i++)
objTable.deleteRow(0); |
//
// Add the records to the table.
//
fChangeColor = 0; |
//
// How many columns does this table have?
//
if (arrTableData.length > 0)
intTableCols = arrTableData[0].length |
//
// Load the data into the table.
//
for (i = 0; i < arrTableData.length; i++)
{ |
//
// Insert a new table row for each record: adds a TR element.
//
eleTR = objTable.insertRow(i); |
if (i == 0) {
eleTR.style.color = "white";
eleTR.align = "center";
eleTR.valign = "top";
}
else {
eleTR.style.color = "black";
} |
//
// Add cells to the row: add TD elements.
//
for (j = 0; j < intTableCols; j++)
{ |
cell = eleTR.insertCell(j);
cell.border = 1; |
if (i == 0) {
cell.onclick = SortLeadManagerTable;
cell.style.backgroundColor = "navy";
}
else {
cell.style.backgroundColor =
(fChangeColor == 1) ? "aqua" : "white";
} |
cell.appendChild(
document.createTextNode(
arrTableData[i][j])); |
} // for |
//
// Create the alternating row colors.
//
if (fChangeColor == 1)
fChangeColor = 0;
else
fChangeColor = 1; |
} // for add rows |
return; |
} // LoadLeadManagerTable |
//
// FUNCTION: SetTabColors() |
//
function SetTabColors(inTD, fState)
{
if (fState == 1)
inTD.style.backgroundColor = "white";
else
inTD.style.backgroundColor = "silver"; |
return; |
} // SetTabColors |
//
// FUNCTION: ShowMain()
//
function ShowMain(newTD)
{
if (arguments.length != 1)
throw new Error("function ShowMain()
incorrectly called"); |
if (newTD == oldTD)
return; |
//
// Hide the parent DIV element for the previously selected table.
//
if (oldTD != null) {
document.getElementById('Main' + oldTD.id +
'Div').style.display = 'none';
SetTabColors(oldTD, 0);
SetTabColors(newTD, 1);
} // if |
//
// Show the parent DIV element for the selected table.
//
document.getElementById('Main' + newTD.id + 'Div').style.display
= 'block'; |
oldTD = newTD;
return; |
} // ShowMain |
//--> |
</script> |
</head> |
<body onload="InitializeNav()"
style="font-family:verdana,geneva,arial;font-size:8px;color:#000000;
margin-left:0px; margin-top:0px;"> |
<table border="0" width="144" style="font-size: 8px; COLOR: #000000;"> |
<tr>
<td valign="top" width="128">
<img src="logo.gif" width="118" height="34" border="0">
<img src="darkdotline.gif" width="118" height="5" border="0">
<br> |
<span style="COLOR: #333333; FONT-SIZE: 8px;">
LEAD MANAGER
</span>
<br>
<img src="darkdotline.gif" width="118" height="5" border="0"> |
<!-- Tabs --> |
<table id="TableTabs" border="1px" cellspacing="0px"
width="120" style="font-size:8px;"> |
<tr> |
<td onclick="ShowMain(this)" id=T1>Leads</td>
<td onclick="ShowMain(this)" id=T2>Accts</td>
<td onclick="ShowMain(this)" id=T3>Contacts</td>
<td onclick="ShowMain(this)" id=T4>Opps</td>
</tr> |
</table> |
<div id="TabTablesDiv"> |
<!-- ----------- START TABS CONTENT ----------- --> |
</div> |
</td> |
<td valign="top" align="right" width="16"> |
<div id="openNav" onclick="HideNav()">
<img src="open.gif" width="16" height="11" border="0">
</div> |
<div id="closedNav" onclick="ShowNav()">
<img src="closed.gif" width="16" height="11" border="0">
</div> |
<div id="nav">
<img src="docs_nav.gif" width="16" height="92" usemap="#nav" border="0">
</div> |
</td> |
</tr> |
</table> |
<map name="nav"> <area shape="RECT" coords="0,0,15,15" href="index.html"> <area shape="RECT" coords="0,19,15,34" href="calendar.html"> <area shape="RECT" coords="0,38,15,53" href="chart.html"> <area shape="RECT" coords="0,57,15,72" href="mail.html"> <area shape="RECT" coords="0,76,15,91" href="leads.html"> </map> |
<div ID="navurls"> |
<table border="0" width="120"
style="FONT-SIZE: 8px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px;
FONT-FAMILY: verdana,geneva,arial"> |
<tr align="center" valign="top" >
<td><A href="index.html">Home</A></td>
<td><A href="calendar.html">Cal</A></td>
<td><A href="chart.html">Chart</A></td>
<td><A href="mail.html">Mail</A></td>
<td><A href="leads.html">Leads</A></td>
</tr> |
</table> |
</div> |
</body> |
</html> |
| Send feedback about this page using email. | Copyright © 2008, iAnywhere Solutions, Inc. |