Saute_King
10-23-2004, 05:27 PM
I only started working with XML recently, I hope what I'm trying to do is possible...
I have an XML file of recipes with the following structure
<CATALOG>
<RECIPE>
<TITLE>Apple Crisp</TITLE>
<MEAL_TYPE>Desserts</MEAL_TYPE>
<CATEGORY>Fruit Dishes</CATEGORY>
<INGREDIENTS>
<QUANTITY>3</QUANTITY>
<UNIT>cups</UNIT>
<INGREDIENT>Apples - Peeled, Cored, Sliced</INGREDIENT>
<QUANTITY>1</QUANTITY>
<UNIT>Tblsp.</UNIT>
<INGREDIENT>Lemon Juice</INGREDIENT>
<QUANTITY> 4</QUANTITY>
<UNIT>Tblsp.</UNIT>
<INGREDIENT>Water</INGREDIENT>
<QUANTITY>0.5</QUANTITY>
<UNIT>tsp.</UNIT>
<INGREDIENT>Cinnamon</INGREDIENT>
</INGREDIENTS>
</RECIPE>
</CATALOG>
I'd like to have an HTML file that lists the recipe names, meal_type and category information. If the user clicks on a recipe, detailed ingredient information is then display either on a new page, or in a separate table.
I found an example that used data islands to link an XML file to an HTML file, and script to display detailed information when the user clicked on a line in the list. I modified the file to fit my XML file:
<head>
<script type="text/javascript">
function testclick(field)
{
var row=field.rowIndex
xmldso_list.recordset.absoluteposition=row
td_title.innerHTML=xmldso_list.recordset("TITLE")
td_mealtype.innerHTML=xmldso_list.recordset("MEAL_TYPE")
td_category.innerHTML=xmldso_list.recordset("CATEGORY")
td_ingredients.innerHTML=xmldso_list.recordset("INGREDIENTS")
}
</script>
</head>
<body>
<xml id="xmldso_list" src="cd_catalog.xml"></xml>
<table border="1" bgcolor=#AABBFF >
<tr align="left"><th>Recipe Name: </th><td id="td_title"></td></tr>
<tr align="left"><th>Recipe Meal: </th><td id="td_mealtype"></td></tr>
<tr align="left"><th>Recipe Category:</th><td id="td_category"></td></tr>
<tr align="left"><th>Recipe Ingredients:</th><td id="td_ingredients"></td></tr>
</table>
<p><b>Click on one of the recipes below:</b></p>
<table datasrc="#xmldso_list" border="1">
<thead>
<tr align="left">
<th>Name</th>
<th>Meal</th>
<th>Category</th>
</tr>
</thead>
<tr align="left" onclick="testclick(this)">
<td><div datafld="TITLE" /></td>
<td><div datafld="MEAL_TYPE" /></td>
<td><div datafld="CATEGORY" /></td>
</tr>
</table>
This works well, but I'm stumped when it comes to "grabbing" the data from the nested <INGREDIENTS> tag. I believe that I'll need to use nested tables to display the ingredients, but I don't know how to read each of the entries. Is this possible? Any suggestions? Should I consider changing the structure of my XML file?
I have an XML file of recipes with the following structure
<CATALOG>
<RECIPE>
<TITLE>Apple Crisp</TITLE>
<MEAL_TYPE>Desserts</MEAL_TYPE>
<CATEGORY>Fruit Dishes</CATEGORY>
<INGREDIENTS>
<QUANTITY>3</QUANTITY>
<UNIT>cups</UNIT>
<INGREDIENT>Apples - Peeled, Cored, Sliced</INGREDIENT>
<QUANTITY>1</QUANTITY>
<UNIT>Tblsp.</UNIT>
<INGREDIENT>Lemon Juice</INGREDIENT>
<QUANTITY> 4</QUANTITY>
<UNIT>Tblsp.</UNIT>
<INGREDIENT>Water</INGREDIENT>
<QUANTITY>0.5</QUANTITY>
<UNIT>tsp.</UNIT>
<INGREDIENT>Cinnamon</INGREDIENT>
</INGREDIENTS>
</RECIPE>
</CATALOG>
I'd like to have an HTML file that lists the recipe names, meal_type and category information. If the user clicks on a recipe, detailed ingredient information is then display either on a new page, or in a separate table.
I found an example that used data islands to link an XML file to an HTML file, and script to display detailed information when the user clicked on a line in the list. I modified the file to fit my XML file:
<head>
<script type="text/javascript">
function testclick(field)
{
var row=field.rowIndex
xmldso_list.recordset.absoluteposition=row
td_title.innerHTML=xmldso_list.recordset("TITLE")
td_mealtype.innerHTML=xmldso_list.recordset("MEAL_TYPE")
td_category.innerHTML=xmldso_list.recordset("CATEGORY")
td_ingredients.innerHTML=xmldso_list.recordset("INGREDIENTS")
}
</script>
</head>
<body>
<xml id="xmldso_list" src="cd_catalog.xml"></xml>
<table border="1" bgcolor=#AABBFF >
<tr align="left"><th>Recipe Name: </th><td id="td_title"></td></tr>
<tr align="left"><th>Recipe Meal: </th><td id="td_mealtype"></td></tr>
<tr align="left"><th>Recipe Category:</th><td id="td_category"></td></tr>
<tr align="left"><th>Recipe Ingredients:</th><td id="td_ingredients"></td></tr>
</table>
<p><b>Click on one of the recipes below:</b></p>
<table datasrc="#xmldso_list" border="1">
<thead>
<tr align="left">
<th>Name</th>
<th>Meal</th>
<th>Category</th>
</tr>
</thead>
<tr align="left" onclick="testclick(this)">
<td><div datafld="TITLE" /></td>
<td><div datafld="MEAL_TYPE" /></td>
<td><div datafld="CATEGORY" /></td>
</tr>
</table>
This works well, but I'm stumped when it comes to "grabbing" the data from the nested <INGREDIENTS> tag. I believe that I'll need to use nested tables to display the ingredients, but I don't know how to read each of the entries. Is this possible? Any suggestions? Should I consider changing the structure of my XML file?