Detailed Information on Demand

Contact Us or call 1-877-932-8228
Detailed Information on Demand

Detailed Information on Demand

Netflix, the online movie rental company, has a cool feature on their website (http://www.netflix.com) that allows users to hover over a picture of a movie to get more detailed information about that movie. This makes it possible to give users the detailed information they want without downloading detailed information about every movie shown on the page. A screenshot is shown below:Detailed Movie Information

We've done something similar (though not as fancy) with our Presidents page:Presidents Information

Start the Node.js server in the MoreAjaxApps/Demos directory (npm start) and visit http://localhost:8080/TableRowsMoreInfo in your browser.

The JavaScript code is shown below:

Code Sample:

MoreAjaxApps/Demos/more-info.js
function getBio(e) {
	var bioDiv = document.getElementById("Bio");
	var target = getTarget(e);
	var presID = target.parentNode.parentNode.id;
	var xmlhttp = new XMLHttpRequest();
	xmlhttp.open("GET", "Bio?id=" + presID, true);
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			showBio(xmlhttp);
		}
	}
	xmlhttp.send(null);

	function showBio(xmlhttp) {
		bioDiv.innerHTML = xmlhttp.responseText;
		bioDiv.style.marginTop = (presID * 54) + "px"; //position element (hack)
		bioDiv.style.visibility = "visible";
	}
}

function hideBio() {
	var bioDiv = document.getElementById("Bio");
	bioDiv.style.visibility = "hidden";
	bioDiv.innerHTML = "";
}

observeEvent(window, "load", function() {
	var table = document.getElementById("Table");
	var imgs = table.getElementsByTagName("img");
	var numImages = imgs.length;
	for (var i = 0; i < numImages; i++) {
		observeEvent(imgs[i], "mouseover", getBio);
		observeEvent(imgs[i], "mouseout", hideBio);
	}
});

The TableRowsMoreInfo response route in MoreAjaxApps/Demos/server.js generates, and MoreAjaxApps/Demos/TableRowsMoreInfo.jade renders, the presidents HTML table and includes the more-info.js file. When the page loads, we attach mouseover and mouseout events to the images to call showBio() and hideBio(), respectively. The getBio() function calls the Bio response route, passing along the ID of the moused-over president, and gets the biography of the associated president as a response. Its nested showBio() callback function displays the biography.

When the user mouses out, hideBio() hides the div containing biography.

Next