Create Navigable Table Rows - Exercise

Contact Us or call 1-877-932-8228
Create Navigable Table Rows - Exercise

Create Navigable Table Rows

Duration: 20 to 30 minutes.

Using AjaxApplications/Demos/SlideShow-preloaded.html as a guide, you will complete the following code where you see the two "Task:" comments:

The server-side script (the TableRows response route in AjaxApplications/Exercises/server.js) expects Row (the current row number) and RowsToShow (the number of rows to show) to be passed in. It will return XML that looks like this:Returned XML The number of nodes will depend on the value of RowsToShow (currently set to 2).

Solution:

AjaxApplications/Solutions/TableRows.html
---- C O D E   O M I T T E D ----

		url = "TableRows?Row=" + curRow + "&RowsToShow=" + rowsToShow;
		xmlhttp = new XMLHttpRequest();
		xmlhttp.open("get", url, true);

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				changeRows(xmlhttp);
			}
		}
		xmlhttp.send(null);

		function changeRows(xmlhttp) {
			var docElem = xmlhttp.responseXML.documentElement;
			var lastSetStart = totalRows - rowsToShow + 1;
			var prevRowPos = (curRow == 1) ? null : 0;
			var curRowPos = (curRow == 1) ? 0 : rowsToShow;
			var nextRowPos = (curRow == 1) ? rowsToShow :
				(curRow >= lastSetStart) ? null : 2 * rowsToShow;

			removeWhitespace(docElem, true);

			if (prevRowPos !== null) {
				loadRows("Prev", prevRowPos, docElem);
				btnPrev.disabled = false;
			}

			if (nextRowPos !== null) {
				loadRows("Next", nextRowPos, docElem);
				btnNext.disabled = false;
			}

			if (rowSource == "ajax") {
				loadRows("Cur", curRowPos, docElem);
				message("Loading from Ajax");
			}

			curRowStart.innerHTML = curRow;
			curRowEnd.innerHTML = curRow + rowsToShow - 1;

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

We make an Ajax request to /TableRows (served up by the Node.js server), passing GET variables curRow (the current row) and rowsToShow (number of rows to show).

If the Ajax call finishes successfully, we invoke function changeRows, which sets values for the previous row position, current row position, and next row position. If previous/next rows exist, then they are loaded (via function loadRows); if not, then their respective buttons are disabled.

Next