Frames and Communication between XML and HTML

Post by **syxxzonz** » Wed Jun 08, 2005 12:19 am

Here is my main HTML document ("demo.html"):

<html>
<head>
<title>Example</title>
<script language="javascript">

function populateFrames()
{
var x = new ActiveXObject("Microsoft.XMLDOM");
var s = new ActiveXObject("Microsoft.XMLDOM");

x.async = false
s.async = false

x.load("prime.xml");
s.load("customers.xsl");

var html = x.transformNode(s);
var destination = document.frames("main").document.open("text/html",
"replace");
destination.write(html);
}
</script>
</head>

<frameset onload="populateFrames()" rows="*,64">
<frame name="main" scrolling="yes">
<frame name="footer" scrolling="no" noresize target="main" src="legend.html">
</frameset>

</html>
--------------------------------------------------------------
Here is my XML document ("prime.xml")

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="customers.xsl"?>
<database>
<element>
<transaction>
<day>Monday</day>
<time>2:00pm</time>
</transaction>
</element>
<element>
<customer>
<name>Dan Subaitani</name>
<order>Big Screen TV</order>
<price>$5000.00</price>
</customer>
</element>
<element>
<transaction>
<day>Wednesday</day>
<time>4:30pm</time>
</transaction>
</element>
<element>
<customer>
<name>Renato Guevara</name>
<order>laptop</order>
<price>$2000.00</price>
</customer>
</element>
<element>
<customer>
<name>Andrew Gabino</name>
<order>Keyboard</order>
<price>$20.00</price>
</customer>
</element>
<element>
<customer>
<name>Melody Heydari</name>
<order>Tablet PC</order>
<price>$400.00</price>
</customer>
</element>
</database>
------------------------------------------------------------------
Here is my XSL stylesheet ("customers.xsl")

<?xml version="1.0" encoding="ISO-8859-1" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" indent="yes" />
<xsl:template match="/database">
<html>
<head>
<title>clients</title>
<script type="text/javascript">
<![CDATA[
function show_hide()
{
var st1;

if(button1.value=="Hide Name")
{
st1="none";
button1.value="Show Name";
}
else
{
st1="block";
button1.value="Hide Name";
}

var tb1 = document.getElementById("main");
var rows1 = tb1.getElementsByTagName("tr");

for (var row=0; row<rows1.length; row++)
{
var cels = rows1[row].getElementsByTagName("td");
cels[0].style.display=st1;
}
}

function show_hide_tran()
{
var st1;
if(button2.value=="Hide Transactions")
{
st1="none";
button2.value="Display Transactions";
}
else
{
st1="block";
button2.value="Hide Transactions";
}

var tb2 = document.getElementById("main");
var rows2 = tb2.getElementsByTagName("tr");
var cels2 = rows2[0].getElementsByTagName("td");

for (var index=0; index<rows2.length; index++)
{
if (rows2[index].style.color == "blue")
{
rows2[index].style.display = st1;
}

}
}

]]>

</script>
</head>
<body>

<input type="button" id="button1" value="Hide Name" onClick="show_hide()"/>
<input type="button" id="button2" value="Hide Transactions" onClick="show_hide_tran()"/>
<table id="main" border="3" cellspacing="1" cellpadding="1">
<xsl:apply-templates select="element"/>
</table>
</body>
</html>
</xsl:template>

<xsl:template match="element">
<xsl:apply-templates select="customer" />
<xsl:apply-templates select="transaction" />
</xsl:template>

<xsl:template match="customer">
<tr>
<td><xsl:apply-templates select="name"/></td>
<td><xsl:apply-templates select="order"/></td>
<td><xsl:apply-templates select="price"/></td>
</tr>
</xsl:template>

<xsl:template match="transaction">
<tr style="color:blue">
<td><xsl:apply-templates select="day"/></td>
<td colspan="2"><div><xsl:apply-templates select="time"/></div></td>
</tr>

</xsl:template>

</xsl:stylesheet>
-----------------------------------------------------------
and here is another HTML document("legend.html")

<html>
<head>

</head>

<body>

<input type="button" id="button1" value="Hide Name" onClick="renato()">
<input type="button" id="button2" value="Hide Transactions" onClick="guevara()">

</body>

</html>

------------------------------------------------

What I'm trying to do is have the buttons located in legend.html call the functions that are in the script from customers.xsl to control the table actions. I don't know how to call functions from one frame which was originally in xsl in another frame which is html. Thank you in advance. Any leads would be greatly appreciated.

Renato

Post by **george** » Wed Jun 15, 2005 3:07 pm

Hi Renato,

The XSL has no direct role here. You should look at the place where you put the result of the transformation and consider that as it will be a static document.

Best Regards,
George