Working on the Homework Question Below: Create an Ajax-based product catalog that obtains its data from JSON files located on the server. The data should be separated into four JSON files. The first should be a summary file, containing a list of products. Each product should have a title, an image filename for a thumbnail image and a price. The second file should contain a list of descriptions for each product. The third file should contain a list of filenames for the full-size product images. The last file should contain a list of the thumbnail-image file names. Each item in a catalogue should have a unique ID that should be included with the entries for that product in every file. Next, create an Ajax-enabled web page that displays the product information in a table. The catalog should initially display a list of product names with their associated thumbnail images and prices. When the mouse hovers over a thumbnail image, the larger product image should be displayed. When the user moves the mouse away from that image, the original thumbnail should be redisplayed. You should provide a button that the user can click to display the product description.
I currently have the following html file but for some reason, it is not working. There is a summary, Thumbs, images, and descriptions JSON file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ift.tt/kkyg93">
<html xmlns="http://ift.tt/lH0Osb">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>16.8 Zack Davidson</title>
<style type="text/css">
table, th, tr, td
{
border: 1px solid black;
}
</style>
<script type = "text/javascript">
var productsData;
var thumbsData;
var imageData;
var descriptionData;
var asyncRequest1;
var asyncRequest2;
var asyncRequest3;
var asyncRequest4;
var imageTag;
var thumbTag;
var i;
function loadJSON(url1, url2, url3, url4)
{
// attempt to create the XMLHttpRequest and make the request
try
{
asyncRequest1 = new XMLHttpRequest(); // create request object
asyncRequest1.onreadystatechange = parseData;
asyncRequest1.open( 'GET', url1, true ); // prepare the request
asyncRequest1.send( null ); // send the request
asyncRequest2 = new XMLHttpRequest(); // create request object
asyncRequest2.onreadystatechange = parseData;
asyncRequest2.open( 'GET', url2, true ); // prepare the request
asyncRequest2.send( null ); // send the request
asyncRequest3 = new XMLHttpRequest(); // create request object
asyncRequest3.onreadystatechange = parseData;
asyncRequest3.open( 'GET', url3, true ); // prepare the request
asyncRequest3.send( null ); // send the request
asyncRequest4 = new XMLHttpRequest(); // create request object
asyncRequest4.onreadystatechange = parseData;
asyncRequest4.open( 'GET', url4, true ); // prepare the request
asyncRequest4.send( null ); // send the request
} // end try
catch ( exception )
{
alert( 'Request Failed' );
} // end catch
} // end function loadProducts
function parseData()
{
// if request has completed successfully process the response
if ( asyncRequest1.readyState == 4 && asyncRequest1.status == 200 && asyncRequest2.readyState == 4 && asyncRequest2.status == 200 && asyncRequest3.readyState == 4 && asyncRequest3.status == 200 && asyncRequest4.readyState == 4 && asyncRequest4.status == 200)
{
// convert the JSON string to an Object
productsData = JSON.parse(asyncRequest1.responseText);
thumbsData = JSON.parse(asyncRequest2.responseText);
imageData = JSON.parse(asyncRequest3.responseText);
descriptionData = JSON.parse(asyncRequest4.responseText);
displayNames( productsData, thumbsData ); // display data on the page
} // end if
} // end function parseData
function displayNames( productsData, thumbsData )
{
var output = document.getElementById( "products" );
var productTable = document.createElement( 'table' );
var tableBody = document.createElement( 'tbody' );
for ( i = 0; i < productsData.product.length; i++ )
{
var productRow = document.createElement( "tr" );
var thumbnail = thumbsData.thumbs[ i ].thumbnail;
var imageCell = document.createElement( "td" );
var dataCell = document.createElement( "td" );
var fillRow = document.createElement( "tr" );
var imageTag = document.createElement( "img" );
var spanTag = document.createElement( "span" );
var imageSpan = document.createElement( "span" );
var buttonInput = document.createElement( "input" );
var moreinfoCell = document.createElement( "td" );
moreinfoCell.setAttribute( "colspan", 2 );
tableBody.setAttribute( "align", "right" );
var filler = document.createElement( "div" );
imageSpan.setAttribute( "ID" , "filler" + i );
thumbTag = document.createElement( "img" );
buttonInput.setAttribute( "type", "button" );
buttonInput.setAttribute( "value", "Description" );
buttonInput.setAttribute( "onclick", "addDescription(" + i + ")" );
buttonInput.setAttribute( "align", "right" );
spanTag.setAttribute("ID", "data" + i );
spanTag.setAttribute("align", "left" );
//thumbTag.onmouseover = function () { mouseOver( this )};
thumbTag.setAttribute( "onmouseover", "mouseOver(" + i + ")" );
thumbTag.setAttribute( "src", "/~jtalbott/chapter_15/Thumbs/" + thumbnail );
thumbTag.setAttribute("ID", i );
imageCell.appendChild( thumbTag );
dataCell.appendChild( spanTag );
var spanID = "data" + i;
productRow.appendChild( imageCell );
productRow.appendChild( dataCell );
filler.appendChild( imageSpan );
filler.appendChild( buttonInput );
moreinfoCell.appendChild( filler );
fillRow.appendChild( moreinfoCell );
tableBody.appendChild( productRow );
tableBody.appendChild( fillRow );
productTable.appendChild( tableBody );
output.appendChild( productTable );
document.getElementById( spanID ).innerHTML = productsData.product[ i ].title + '<p><strong>Price: ' + productsData.product[ i ].price + '</strong> </p>';
}
}
function mouseOver( id )
{
var fillerBox = document.getElementById( "filler" + id ).innerHTML = "<img src=\"/~jtalbott/chapter_15/FullSizeImages/" + imageData.images[ id ].fullImage + "></img>";
}
function addDescription( id )
{
var fillerBox = document.getElementById( "filler" + id ).innerHTML = descriptionData.product[ id ].description;
}
</script>
</head>
<body onload = 'loadJSON("summary.json","thumbs.json","images.json", "descriptions.json")'>
<div id = "products">
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire