Handling responseXML - Exercise

Contact Us or call 1-877-932-8228
Handling responseXML - Exercise

Handling responseXML

Duration: 20 to 30 minutes.

In this exercise, you will modify the Table.html file we have just been discussing so that it has two buttons, one for showing employees and the other for showing shipping companies. The shipping data will be retrieved from the Node.js server; to see the XML, visit http://localhost:8080/Shippers in your browser. The XML will be structured like this:XML Structure

  1. If needed, navigate to the directory PassingData/Exercises/ from the command line and type npm start to start the Node.js server.
  2. Open PassingData/Exercises/Table.html for editing.
  3. Create a global variable called tableDataOptions holding an object with the following properties:
    • employees (object):
      • tableDataSrc: "Employees"
      • rowElement: "Employee"
      • columnNames (array):
        • "Salesperson"
        • "Title"
        • "Birth Date"
        • "Hire Date"
        • "Extension"
      • columnWidths (array):
        • 24
        • 24
        • 21
        • 21
        • 8
    • shippers (object):
      • tableDataSrc: "Shippers"
      • rowElement: "Shipper"
      • columnNames (array):
        • "CompanyName"
        • "Phone"
        • "ShipperID"
      • columnWidths (array):
        • 45
        • 41
        • 14
    • active: "employees"
    The employees and shippers properties hold the data for getting and outputting those tables. The active property holds the table to currently display.
  4. Modify the buildTable() function so that it takes a single argument: table and sets the active property of tableDataOptions to the lowercased passed-in table name.
  5. Change the page so that it displays two buttons reading "Employees" and "Shippers". When the user clicks on the Employees button, the employees should be listed on the page. When the user clicks on the Shippers button, the shippers should be listed.
  6. You will need to modify the getRows(), showResult(), and createHeaderRow() functions so that they work off the "active" table.
  7. Test your solution by opening PassingData/Exercises/Table.html in a browser.

Challenge

When the tables load, there is sometimes a delay that might make the user wonder what's happening. Provide a "Loading" message that shows up when the user clicks the link and goes away when the table appears.

Solution:

PassingData/Solutions/Table.html
---- C O D E   O M I T T E D ----

<script type="text/javascript">
	var tableDataOptions = {
		employees: {
			tableDataSrc: "Employees",
			rowElement: "Employee",
			columnNames: ["Salesperson", "Title", "Birth Date", "Hire Date", "Extension"],
			columnWidths: [24, 24, 21, 21, 8]
		},
		orders: {
			tableDataSrc: "Orders",
			rowElement: "Order",
			columnNames: ["Salesperson", "Customer", "Order ID", "Order Date"],
			columnWidths: [29, 34, 14, 23]
		},
		active: "employees"
	};

	function buildTable(table) {
		tableDataOptions["active"] = table.toLowerCase();
		removeAllChildren(document.getElementById("HeaderRow"));
		removeAllChildren(document.getElementById("BodyRows"));
		createHeaderRow();
		getRows();
	}

	function getRows() {
		var tableName = tableDataOptions["active"];
		var tableDataSrc = tableDataOptions[tableName].tableDataSrc;
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.open("get", tableDataSrc, true);
		xmlhttp.onreadystatechange = function() {
			if (this.readyState == 4 && this.status == 200) {
				showResult(this);
			}
		};
		xmlhttp.send(null);
	}

	function showResult(xmlhttp) {
		var xmlDoc = xmlhttp.responseXML.documentElement;
		var tableName = tableDataOptions["active"];
		var rowElement = tableDataOptions[tableName].rowElement;
		var outputResult, rowData;

		removeWhitespace(xmlDoc, true);
		outputResult = document.getElementById("BodyRows");
		rowData = xmlDoc.getElementsByTagName(rowElement);

		addTableRowsFromXmlDoc(rowData, outputResult);
	}

	function createHeaderRow() {
		var headerRow = document.getElementById("HeaderRow");
		var tableName = tableDataOptions["active"];
		var colNames = tableDataOptions[tableName].columnNames;
		var colWidths = tableDataOptions[tableName].columnWidths;

		for (var i = 0; i < colNames.length; i++) {
			var width = colWidths[i];
			var atts = new Object();
			atts["style"] = "width:" + width + "%;";
			addChild(document, headerRow, "th", colNames[i], atts);
		}
	}

	function addTableRowsFromXmlDoc(xmlNodes, tableNode) {
		var theTable = tableNode.parentNode;
		var newRow, newCell, i;

		for (i = 0; i < xmlNodes.length; i++) {
			newRow = tableNode.insertRow(i);

			newRow.className = (i % 2) ? "OddRow" : "EvenRow";

			for (j = 0; j < xmlNodes[i].childNodes.length; j++) {
				newCell = newRow.insertCell(newRow.cells.length);
				newCell.innerHTML = decodeURIComponent(xmlNodes[i].childNodes[j].firstChild.nodeValue);
			}
		}
		theTable.appendChild(tableNode);
	}

	observeEvent(window, "load", function() {
		var btnEmployees = document.getElementById("btnEmployees");
		var btnOrders = document.getElementById("btnOrders");
		observeEvent(btnEmployees, "click", function() {
			buildTable("Employees");
		});
		observeEvent(btnOrders, "click", function() {
			buildTable("Orders");
		});
	});
</script>
</head>
<body>
	<h1>Please choose a table to show:</h1>
	<button id="btnEmployees">Employees</button>
	<button id="btnOrders">Orders</button>

---- C O D E   O M I T T E D ----

Challenge Solution:

PassingData/Solutions/Table-challenge.html
---- C O D E   O M I T T E D ----

	function buildTable(table) {
		tableDataOptions["active"] = table.toLowerCase();
		removeAllChildren(document.getElementById("HeaderRow"));
		removeAllChildren(document.getElementById("BodyRows"));
		showLoadingMessage();
		createHeaderRow();
		getRows();
	}
	
---- C O D E   O M I T T E D ----

	function showResult(xmlhttp) {
		var xmlDoc = xmlhttp.responseXML.documentElement;
		var tableName = tableDataOptions["active"];
		var rowElement = tableDataOptions[tableName].rowElement;
		var outputResult, rowData;

		removeWhitespace(xmlDoc, true);
		outputResult = document.getElementById("BodyRows");
		rowData = xmlDoc.getElementsByTagName(rowElement);

		addTableRowsFromXmlDoc(rowData, outputResult);
		hideLoadingMessage();
	}
	
---- C O D E   O M I T T E D ----

	function showLoadingMessage() {
		var loadingDiv = document.getElementById("LoadingMessage");
		loadingDiv.style.visibility = "visible";
		document.bgColor = "#9999cc";
	}

	function hideLoadingMessage() {
		var loadingDiv = document.getElementById("LoadingMessage");
		loadingDiv.style.visibility = "hidden";
		document.bgColor = "#ffffff";
	}
	
---- C O D E   O M I T T E D ----

	<div id="LoadingMessage">Loading...</div>

---- C O D E   O M I T T E D ----
>
Next