I am new to xml, and need home help with how to display an xml/xsl listing inline on a standard XHTML page. I have looked and looked on the web and nothing has come even close to discribing my paticular need. Basically what I need is to be able to sort a given xml doc with internal DTD.
xml code:
<?xml version="1.0"?>
<!DOCTYPE dcl_slots [
<!ELEMENT dcl_slots (slot+)>
<!ELEMENT slot (name, type, length, width, radius, preference, pin_post_size, twist_tab_size)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT type (#PCDATA)>
<!ELEMENT length (#PCDATA)>
<!ELEMENT width (#PCDATA)>
<!ELEMENT radius (#PCDATA)>
<!ELEMENT preference (#PCDATA)>
<!ELEMENT pin_post_size (#PCDATA)>
<!ELEMENT twist_tab_size (#PCDATA)>
]>
<dcl_slots>
<slot>
<name>detail_AAA</name>
<type>Lamp</type>
<length>08.00</length>
<width>06.40</width>
<radius>-</radius>
<preference>Nonpreferred</preference>
<pin_post_size>NA</pin_post_size>
<twist_tab_size>NA</twist_tab_size>
</slot>
<slot>
<name>detail_AAB</name>
<type>Full</type>
<length>05.99</length>
<width>01.26</width>
<radius>Full</radius>
<preference>Nonpreferred</preference>
<pin_post_size>-</pin_post_size>
<twist_tab_size>-</twist_tab_size>
</slot>
<slot>
<name>detail_AAC</name>
<type>Full</type>
<length>05.30</length>
<width>00.75</width>
<radius>Full</radius>
<preference>Preferred</preference>
<pin_post_size>-</pin_post_size>
<twist_tab_size>-</twist_tab_size>
</slot>
</dcl_slots>
By two seperate xsl files (only diffrence is the sort-by "name or type").
xsl sort code1:
<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<body>
<table border="2" bgcolor="yellow">
<tr>
<th>Detail Name</th>
<th>Type</th>
<th>Length</th>
<th>Width</th>
<th>Radius</th>
</tr>
<xsl:for-each select="dcl_slots/slot" order-by="+ name">
<tr>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="type"/></td>
<td><xsl:value-of select="length"/></td>
<td><xsl:value-of select="width"/></td>
<td><xsl:value-of select="radius"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
xsl sort code2:
<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<body>
<table border="2" bgcolor="yellow">
<tr>
<th>Detail Name</th>
<th>Type</th>
<th>Length</th>
<th>Width</th>
<th>Radius</th>
</tr>
<xsl:for-each select="dcl_slots/slot" order-by="+ type">
<tr>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="type"/></td>
<td><xsl:value-of select="length"/></td>
<td><xsl:value-of select="width"/></td>
<td><xsl:value-of select="radius"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
All this is controlled by javascript in the main XHTML
xhtml code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
//<![CDATA[
function sortListBy(sortBy){
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("detail_list.xml")
// Load the XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("detail_list_"+sortBy+"_sort.xsl")
// Transform
//document.write(xml.transformNode(xsl))
display.innerText = document.write(xml.transformNode(xsl))
}
//]]>
</script>
<title></title>
</head>
<body>
<form>
<input type="button" value=http://www.webdeveloper.com/forum/archive/index.php/"Sort By Name" onclick="sortListBy('name')" />
<input type="button" value=http://www.webdeveloper.com/forum/archive/index.php/"Sort By Type" onclick="sortListBy('type')" />
</form>
<br />
<hr width="100%" />
Search Results:<br />
<iframe id="display" name="display"></iframe>
</body>
</html>
As you can see the buttons change the sort of the xml by loading a diffrent xsl style. This works but my only problem is that beacuse I am using a doc write in js, the entire page get's overwritten (hence no more buttons). How can I contain the doc write to only display in the iframe, and leave the rest of the page alone.
Also if possible how do I make this cross-browser capable, I know currently it will only work with IE. But have not even began to address the cross-browser issues. I need it in IE 5+ and Moz 1+.
xml code:
<?xml version="1.0"?>
<!DOCTYPE dcl_slots [
<!ELEMENT dcl_slots (slot+)>
<!ELEMENT slot (name, type, length, width, radius, preference, pin_post_size, twist_tab_size)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT type (#PCDATA)>
<!ELEMENT length (#PCDATA)>
<!ELEMENT width (#PCDATA)>
<!ELEMENT radius (#PCDATA)>
<!ELEMENT preference (#PCDATA)>
<!ELEMENT pin_post_size (#PCDATA)>
<!ELEMENT twist_tab_size (#PCDATA)>
]>
<dcl_slots>
<slot>
<name>detail_AAA</name>
<type>Lamp</type>
<length>08.00</length>
<width>06.40</width>
<radius>-</radius>
<preference>Nonpreferred</preference>
<pin_post_size>NA</pin_post_size>
<twist_tab_size>NA</twist_tab_size>
</slot>
<slot>
<name>detail_AAB</name>
<type>Full</type>
<length>05.99</length>
<width>01.26</width>
<radius>Full</radius>
<preference>Nonpreferred</preference>
<pin_post_size>-</pin_post_size>
<twist_tab_size>-</twist_tab_size>
</slot>
<slot>
<name>detail_AAC</name>
<type>Full</type>
<length>05.30</length>
<width>00.75</width>
<radius>Full</radius>
<preference>Preferred</preference>
<pin_post_size>-</pin_post_size>
<twist_tab_size>-</twist_tab_size>
</slot>
</dcl_slots>
By two seperate xsl files (only diffrence is the sort-by "name or type").
xsl sort code1:
<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<body>
<table border="2" bgcolor="yellow">
<tr>
<th>Detail Name</th>
<th>Type</th>
<th>Length</th>
<th>Width</th>
<th>Radius</th>
</tr>
<xsl:for-each select="dcl_slots/slot" order-by="+ name">
<tr>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="type"/></td>
<td><xsl:value-of select="length"/></td>
<td><xsl:value-of select="width"/></td>
<td><xsl:value-of select="radius"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
xsl sort code2:
<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<body>
<table border="2" bgcolor="yellow">
<tr>
<th>Detail Name</th>
<th>Type</th>
<th>Length</th>
<th>Width</th>
<th>Radius</th>
</tr>
<xsl:for-each select="dcl_slots/slot" order-by="+ type">
<tr>
<td><xsl:value-of select="name"/></td>
<td><xsl:value-of select="type"/></td>
<td><xsl:value-of select="length"/></td>
<td><xsl:value-of select="width"/></td>
<td><xsl:value-of select="radius"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
All this is controlled by javascript in the main XHTML
xhtml code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
//<![CDATA[
function sortListBy(sortBy){
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("detail_list.xml")
// Load the XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("detail_list_"+sortBy+"_sort.xsl")
// Transform
//document.write(xml.transformNode(xsl))
display.innerText = document.write(xml.transformNode(xsl))
}
//]]>
</script>
<title></title>
</head>
<body>
<form>
<input type="button" value=http://www.webdeveloper.com/forum/archive/index.php/"Sort By Name" onclick="sortListBy('name')" />
<input type="button" value=http://www.webdeveloper.com/forum/archive/index.php/"Sort By Type" onclick="sortListBy('type')" />
</form>
<br />
<hr width="100%" />
Search Results:<br />
<iframe id="display" name="display"></iframe>
</body>
</html>
As you can see the buttons change the sort of the xml by loading a diffrent xsl style. This works but my only problem is that beacuse I am using a doc write in js, the entire page get's overwritten (hence no more buttons). How can I contain the doc write to only display in the iframe, and leave the rest of the page alone.
Also if possible how do I make this cross-browser capable, I know currently it will only work with IE. But have not even began to address the cross-browser issues. I need it in IE 5+ and Moz 1+.