JavaScript and Ajax Source Code
The JavaScript is used in the management of parent and child names on the form at the client end, and the Ajax communication between the client and web server.
The function drawTree() collects the parents and child names from the form and adds them to the variable sendString to be posted up to the php application for processing.
Part of drawTree() showing assignment of variables from form values:
// Collect values from text boxes
var childList = document.getElementById('children');
var child = document.getElementById('child');
var parents = document.getElementById('parents');
Depending upon the browser used the function drawTree() creates an Ajax object, first attempting to create a Firefox session and then on failing that a Windows object using Active X.
Part of drawTree() showing the creation of the Ajax object:
// Mozilla version
if (window.XMLHttpRequest)
{
org_ajax = new XMLHttpRequest();
}
// IE version
else if (window.ActiveXObject)
{
org_ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
The string is encoded into the format used for posting data in a URI, encoding spaces etc.
Part of drawTree() showing preparation of data before sending:
sendString=encodeURIComponent(sendString);
A session is established with the server and sendString is posted to the server and the php script then takes over.
Part of drawTree() showing opening an Ajax session and sending data:
// Open connection and send header
org_ajax.open("POST","orgInterface.php");
org_ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
A function is defined for the property onreadystatechange that tests the property and if found to be 4, which represents that the data is ready to be downloaded, it initiates the download and inserts the data (html code), into the div on the page using the innerHTML property.
Part of drawTree() showing Ajax state change and collection of data:
// Test for completion and recieve data
org_ajax.onreadystatechange=function()
{
if (org_ajax.readyState==4)
{
var tree = document.getElementById('tree');
tree.innerHTML = org_ajax.responseText;
}
}
The function addChild() is triggered when the add button is clicked by the user. It checks that the data is available and triggers the drawTree() function if it is. It begins by loading the data from the tree text boxes on the form into variables. If names have been entered into the children box they are added to the hidden text box and if the hidden text box contained names they are appended with a comma to separate them. Finally if there are names in the hidden box the Remove Last Child button is enabled.
Function addChild():
function addChild()
{
// Adds text in child text box to string held in hidden
// children box
// Collect values from text boxes
var childList = document.getElementById('children');
var child = document.getElementById('child');
var parents = document.getElementById('parents');
// Test that data is available
if(child.value)
{
// Test if string holding chilren names is empty
if(!childList.value)
{
// String becomes child name
childList.value = child.value;
}
else
{
// Append child name to string
childList.value = childList.value + "," + child.value;
}
// Clear text from child text box
child.value = "";
}
// Test for parent data and run drawTree() function if so
if(parents.value)
{
drawTree();
}
// Enable 'Delete child' button
if(childList.value)
{
document.getElementById('btnDeleteChild').disabled = false;
}
}
The function deleteChild() loads the values from the child name text box and searches for the last comma in the string. As each added names are appended with a comma the last comma will be before the last name. The child text box then takes the value of the string up to the last comma.
Part of deleteChild() showing removal of last child:
// Get the string from children (hidden) text box
var childList = document.getElementById('children');
// Establish if there are multiple names - indicated by ','
if(comma = childList.value.lastIndexOf(','))
{
// String made shorter
childList.value = childList.value.substring(0, comma);
}
A further check to test if there is still a string in the box will trigger the Remove Last Child button to be disabled.
Part of deleteChild() showing disabling of Remove Last Child button:
if(childList.value == "")
{
// Dissable delete button if no names left in string
document.getElementById('btnDeleteChild').disabled = true;
}
The function addData() adds the names of the royal family into the text boxes and calls the drawTree() function.
Function addData():
function addData()
{
// Adds demo data and calls drawTree() function
// Create variables
var childList = document.getElementById('children');
var parents = document.getElementById('parents');
// Assign strings to values
childList.value = "Charles,Anne,Andrew,Edward";
parents.value = "Elizabeth => Philip";
// Enable delete child button
document.getElementById('btnDeleteChild').disabled = false;
// Redraw the tree
drawTree();
}
The clearAll() function sets the values for each of the text boxes and the div where the org chart is displayed, to be an empty string. It also disables the Remove Last Child button.
Function clearAll():
function clearAll()
{
// Clears all text boxes and resets buttons
// Clear text box values
document.getElementById('children').value = "";
document.getElementById('parents').value = "";
// Clear tree div
document.getElementById('tree').innerHTML = "<p><br /><br /><br /><br /><br /><br /></p>";
// Dissable delete child button
document.getElementById('btnDeleteChild').disabled = true;
}
The full org.js source code:
function drawTree(){
// Mozilla version
if (window.XMLHttpRequest)
{
org_ajax = new XMLHttpRequest();
}
// IE version
else if (window.ActiveXObject)
{
org_ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
// Get values from form
var parents = document.getElementById('parents').value;
var childList = document.getElementById('children').value;
// Prepare string to send
var sendString = parents + ';' + childList;
sendString = encodeURIComponent(sendString);
// Open connection and send header
org_ajax.open("POST","orgInterface.php");
org_ajax.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded; charset=UTF-8');
// Send data
org_ajax.send(sendString);
// Test for completion and recieve data
org_ajax.onreadystatechange=function()
{
if (org_ajax.readyState==4)
{
var tree = document.getElementById('tree');
tree.innerHTML = org_ajax.responseText;
}
}
}
function addChild()
{
// Adds text in child text box to string held in hidden
// children box
// Collect values from text boxes
var childList = document.getElementById('children');
var child = document.getElementById('child');
var parents = document.getElementById('parents');
// Test that data is available
if(child.value)
{
// Test if string holding chilren names is empty
if(!childList.value)
{
// String becomes child name
childList.value = child.value;
}
else
{
// Append child name to string
childList.value = childList.value + "," + child.value;
}
// Clear text from child text box
child.value = "";
}
// Test for parent data and run drawTree() function if so
if(parents.value)
{
drawTree();
}
// Enable 'Delete child' button
if(childList.value)
{
document.getElementById('btnDeleteChild').disabled = false;
}
}
function deleteChild()
{
// Removes last child entry in children string
// Get the string from children (hidden) text box
var childList = document.getElementById('children');
// Establish if there are multiple names - indicated by ','
if(comma = childList.value.lastIndexOf(','))
{
// String made shorter
childList.value = childList.value.substring(0, comma);
}
if(childList.value == "")
{
// Dissable delete button if no names left in string
document.getElementById('btnDeleteChild').disabled = true;
}
// Redraw the tree
drawTree();
}
function addData()
{
// Adds demo data and calls drawTree() function
// Create variables
var childList = document.getElementById('children');
var parents = document.getElementById('parents');
// Assign strings to values
childList.value = "Charles,Anne,Andrew,Edward";
parents.value = "Elizabeth => Philip";
// Enable delete child button
document.getElementById('btnDeleteChild').disabled = false;
// Redraw the tree
drawTree();
}
function clearAll()
{
// Clears all text boxes and resets buttons
// Clear text box values
document.getElementById('children').value = "";
document.getElementById('parents').value = "";
// Clear tree div
document.getElementById('tree').innerHTML = "<p><br /><br /><br /><br /><br /><br /></p>";
// Dissable delete child button
document.getElementById('btnDeleteChild').disabled = true;
}