Using JavaScript with XML and XSL

F

fareeda

Is it possible to use JavaScript with XML and XSL?
I tried the following but it does not work.. anything missing?

test.xml file:
--------------
<?xml version="1.0" encoding="ISO8859-1" ?>
<?xml-stylesheet type="text/xsl" href="test.xsl"?>
<REPORT>

<FOOTER>
<FIELD id="errors">
<KEY>Error Code</KEY>
<VALUE>2000145</VALUE>
</FIELD>
<FIELD id="configuration">
<KEY>DEBUG</KEY>
<VALUE>TRUE</VALUE>
</FIELD>
</FOOTER>

</REPORT>

test.xsl file:
--------------
<?xml version='1.0'?>
<xsl:stylesheet version='1.0'
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">

<HTML>
<BODY bgcolor="palegoldenrod">

<SCRIPT LANGUAGE="javascript">
<!--
function seeFooter_onclick()
{
footer1.style.display = "none"
}
//-->
</SCRIPT>

<INPUT id="seeFooter" type="checkbox" LANGUAGE="javascript"

onclick="seeFooter_onclick()">FOOTER</INPUT>
<TABLE id="footer1" bgcolor="#d1d2d2" border="1" width="100%">
<xsl:for-each select="REPORT/FOOTER/FIELD">
<TR>
<TD width="40%"><xsl:value-of select="KEY"/></TD>
<TD><xsl:value-of select="VALUE"/></TD>
</TR>
</xsl:for-each>
</TABLE>

</BODY>
</HTML>

</xsl:template>
</xsl:stylesheet>

The basic requirement is on the click of checkbox the <TABLE> should
disappear. But when i click the checkbox, browser generates an error.

I might also be posting this in the wrong newsgroup, so the pointer to
the right also would help

Regards
Fareeda
 
M

Martin Honnen

fareeda said:
Is it possible to use JavaScript with XML and XSL?
Click to expand...

What you have below is simply some script in the HTML result document of
an XSLT transformation, that shouldn't pose any problems different from
using script directly in an HTML document.
I tried the following but it does not work.. anything missing?

test.xml file:
--------------
<?xml version="1.0" encoding="ISO8859-1" ?>
<?xml-stylesheet type="text/xsl" href="test.xsl"?>
<REPORT>

<FOOTER>
<FIELD id="errors">
<KEY>Error Code</KEY>
<VALUE>2000145</VALUE>
</FIELD>
<FIELD id="configuration">
<KEY>DEBUG</KEY>
<VALUE>TRUE</VALUE>
</FIELD>
</FOOTER>

</REPORT>

test.xsl file:
--------------
<?xml version='1.0'?>
<xsl:stylesheet version='1.0'
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">

<HTML>
<BODY bgcolor="palegoldenrod">

<SCRIPT LANGUAGE="javascript">
<!--
function seeFooter_onclick()
{
footer1.style.display = "none"
}
//-->
</SCRIPT>

<INPUT id="seeFooter" type="checkbox" LANGUAGE="javascript"

onclick="seeFooter_onclick()">FOOTER</INPUT>
<TABLE id="footer1" bgcolor="#d1d2d2" border="1" width="100%">
<xsl:for-each select="REPORT/FOOTER/FIELD">
<TR>
<TD width="40%"><xsl:value-of select="KEY"/></TD>
<TD><xsl:value-of select="VALUE"/></TD>
</TR>
</xsl:for-each>
</TABLE>

</BODY>
</HTML>

</xsl:template>
</xsl:stylesheet>

The basic requirement is on the click of checkbox the <TABLE> should
disappear. But when i click the checkbox, browser generates an error.
Click to expand...

Which browser is that, Mozilla or Netscape?
To make your script work with DOM compliant browsers like
Mozilla/Netscape you should use

function seeFooter_onclick () {
if (document.getElementById) {
var footer = document.getElementById('footer1');
if (footer && footer.style) {
footer.style.display = 'none';
}
}
}
 
Y

Yann-Erwan Perio

fareeda said:
<SCRIPT LANGUAGE="javascript">
<!--
function seeFooter_onclick()
{
footer1.style.display = "none"
}
//-->
</SCRIPT>
Click to expand...

You've got three problems here:
- you use the "language" attribute while you should prefer the "type"
attribute,
- you've enclosed the script part into comments, as a result it's not
even interpreted,
- you're using IE-specific object accessors, while using the standard
document.getElementById would make your script work on more platforms.

Note that it's usually recommended to externalize the script part in a
javascript include, to avoid parsing issues with the script content.
<INPUT id="seeFooter" type="checkbox" LANGUAGE="javascript"
Click to expand...

An input element doesn't have a "language" attribute.
onclick="seeFooter_onclick()">FOOTER</INPUT>
Click to expand...

An input element doesn't have any closing tag.


<?xml version='1.0'?>
<xsl:stylesheet
version='1.0'
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">

<html>
<head>
<title>Hello, World!</title>
<style type="text/css">
body { background-color:palegoldenrod }
</style>
<script type="text/javascript">
function seeFooter_onclick(){
if(document.getElementById){
with(document.getElementById("footer1"))
style.display=style.display=="none"?"":"none";
}
}
</script>
</head>
<body>
<input type="checkbox" onclick="seeFooter_onclick()" />
FOOTER
<table id="footer1" border="1" width="100%">
<xsl:for-each select="REPORT/FOOTER/FIELD">
<tr>
<td width="40%"><xsl:value-of select="KEY" /></td>
<td><xsl:value-of select="VALUE" /></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>

</xsl:template>
</xsl:stylesheet>


HTH,
Yep.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery? 4
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
XSL Calculation 0
Checking dynamically populated data using ajax with user entered value 5
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is 0
newbie using group by in XSL on XLM 6
Passing a javascript variable to an external xsl/xml file 1

Members online

No members online now.
Total: 298 (members: 0, guests: 298)
Robots: 436

Forum statistics

Threads
474,430
Messages
2,571,676
Members
48,796
Latest member
Greg L.

Latest Threads

Top