This work is licensed under a Creative Commons License.
Ernest Ackermann Department of Computer Science, Mary Washington College
CPSC 401 | CPSC 470S
Bibliographic Information:
May 27, 2008
Press Spacebar to continue
Press Spacebar to continue
Develop a Web page that uses the data in ~ernie/public_html/cpsc470S/faves.xml on paprika and Ajax technologies to display the Genre Artist and Title of the items represented in the file ~ernie/public_html/cpsc470S/faves.xml That file was derived from an iTunes play list.
The Web page built with books.html, books.js, and books.xml demonstrated in http://rosemary.umw.edu/%7Eernie/AjaxPhpCode/Chapter02/ajax/foundations/xml/ can be use as a model for extracting and displaying the information from a file in XML DOM format.
There are several choices you can make for displaying the data. Do it in one or more ways that are obviously useful and attractive. Some ways I can imagine are that the data will be used for archival purposes in printed form, another is that the data will be browsed by a human.
If you'd like the information in a MySQL database, get a copy of ~ernie/public_html/cpsc470S/faves.sql and import it into the version of MySQL on rosemary using the tools available in phpMyAdmin.
Press Spacebar to continue
Applying Ajax.
The notion of the double combo - pick a value in one menu and another is automatically filled.
Some examples:
Cut & Paste 2-level combo box, http://www.javascriptkit.com/script/script2/2levelcombo.shtml
Columbia Silver Ridge Shirt - Short-Sleeve - Men's, from Backcountry.com, http://www.backcountry.com/store/COL1258/Columbia-Silver-Ridge-Shirt-Short-Sleeve-Mens.html
Patagonia, Men's Nooner Jacket, http://www.patagonia.com/web/us/product/product_focus.jsp?OPTION=PRODUCT_FOCUS_DISPLAY_HANDLER&catcode=WS_SP_US.WEB_SPECIALS.MENS&style_color=11376-565&ws=true
Gap Jeans, http://www.gap.com/browse/category.do?cid=6998
Press Spacebar to continue
Example from the text: Double Combo - Ajax in Action, http://rosemary.umw.edu/~ernie/470S/ch09/original/DoubleCombo.htm
Source code on the next page
Double-combo Source Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">Real housewives write extensions.
<HTML><head><title>
Double Combo - Ajax In Action
</title><script type="text/javascript" src="net.js">
</script><script type="text/javascript"></head>
function FillTerritory(oElem,oTarget){
var strValue = oElem.options[
oElem.selectedIndex].value;
var url = 'DoubleComboXML.aspx';
var strParams = 'q=' + strValue +
"&f=" + oTarget.form.name +
"&e=" + oTarget.name;
var loader1 = new
net.ContentLoader(url,FillDropDown,null,
"POST",strParams);
}
function FillDropDown(){
var xmlDoc = this.req.responseXML.documentElement;
var xSel = xmlDoc.
getElementsByTagName('selectElement')[0];
var strFName = xSel.
childNodes[0].firstChild.nodeValue;
var strEName = xSel.
childNodes[1].firstChild.nodeValue;
var objDDL = document.forms[strFName].
elements[strEName];
objDDL.options.length = 0;
var xRows = xmlDoc.
getElementsByTagName('entry');
for(i=0;i<xRows.length;i++){
var theText = xRows[i].
childNodes[0].firstChild.nodeValue;
var theValue = xRows[i].
childNodes[1].firstChild.nodeValue;
var option = new Option(theText,
theValue);
objDDL.options.add(option,
objDDL.options.length);
}
}
</script><body></html><form name="Form1" id="Form1"></body><select name="ddlRegion" onchange="FillTerritory(this,document.Form1.ddlTerritory)" id="Select1">
<option value="-1">
Pick A Region
</option>
<option value="1">
Eastern
</option>
<option value="2">
Western
</option>
<option value="3">
Northern
</option>
<option value="4">
Southern
</option>
</select><select name="ddlTerritory" id="Select2"></form>
</select>
VB Script - DoubleComboXML.aspx.vb