Javascript/JQuery not running in FF or Chrome
I'm using a stylesheet to transform some XML. The following code works fine in IE9 but the javascript does not work in FF or Chrome. I need this to work with the JQuery Library embedded in the file. The javascript following the library hides columns with no data in the table.
<?xml version="1.0"?>
<!--THE FOLLOWING STYLESHEET IS A DEFAULT TEMPLATE FOR ELIBILITY-->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
xmlns:hip="http://www.oopfactory.com/2011/XSL/Hipaa">
<xsl:output method="html" doctype-system="http://www.w3.org/TR/html4/strict.dtd"
doctype-public="-//W3C//DTD HTML 4.01//EN" indent="yes"/>
<xsl:variable name="smallcase" select="'abcdefghijklmnopqrstuvwxyz'"/>
<xsl:variable name="uppercase" select="'ABCDEFGHIJKLMNOPQRSTUVWXYZ'"/>
<xsl:template match="/">
<xsl:comment> saved from url=(0014)about:internet </xsl:comment>
<xsl:text> </xsl:text>
<html>
<head>
<style>
#section1Table {
width: 100%;
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
}
#providerTable {
width: 100%;
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
border-collapse:collapse;
text-align: center;
}
#subscriberTable, #dependentTable, #deductibleTable {
width: 100%;
font-family:Tahoma, Geneva, sans-serif;
font-size:9px;
border-collapse:collapse;
text-align: center;
}
.mainHeader {
background:#666;
color:#FFF;
font-size:12px;
}
.subHeader {
font-family:Tahoma, Geneva, sans-serif;
background:#CCCCCC;
color: #00F;
}
.pageHeader {
font-family:Tahoma, Geneva, sans-serif;
font-size:16px;
}
.pageHeader1 {
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-style: italic;
}
.subHeader2 {
font-family:Tahoma, Geneva, sans-serif;
color: #00F;
font-size:12px;
}
.subHeader3 {
font-family:Tahoma, Geneva, sans-serif;
color: #00F;
font-size:9px;
text-align: right;
background:#CCCCCC;
padding-right: 5px;
}
.subData2 {
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
.summaryTable, .summaryIndTable {
width: 100%;
font-family:Tahoma, Geneva, sans-serif;
font-size:9px;
border-collapse:collapse;
}
.mainHeader2 {
background:#666;
color:#FFF;
font-size:12px;
}
.subHeader3 {
font-family:Tahoma, Geneva, sans-serif;
background:#CCCCCC;
color: #00F;
text-align:center;
}
#requestValidationTable {
width: 100%;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
border-collapse:collapse;
text-align: left;
}
.detailTable, #activecoverageTable {
width: 100%;
font-family:Tahoma, Geneva, sans-serif;
font-size:7px;
border-collapse:collapse;
text-align: center;
}
.summaryFamTable, .summaryIndTable {
display:inline;
width: 100%;
font-family:Tahoma, Geneva, sans-serif;
font-size:9px;
border-collapse:collapse;
display: -moz-inline-stack;
vertical-align:top;
}
p {
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
}
h5 {
font-family:Tahoma, Geneva, sans-serif;
}
th, tr, table {
border-collapse:collapse;
font-family:Tahoma, Geneva, sans-serif;
}
</style>
<title>Eligibilty Benefit Response</title>
<script type="text/javascript">
<![CDATA[
[b]THIS IS WHERE I HAVE THE JQUERY LIBRARY[/b]
]]>
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.detailTable').each(function() {
$(this).find("th").each(function(i) {
var remove = true;
var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')');
if (tds.filter(":parent").length == 0) {
$(this).hide();
tds.hide();
}
});
});
});
</script>
</head>
Do you have an example of the xml that shows the issue? Or perhaps a test site?
Also I do not see any transformation statements or where the html ends up
Also I do not see any transformation statements or where the html ends up
I cut out the transformation statements. There's over a 1000 lines of code. I can get this to work in IE just fine, but Chrome and FF seem to ignore the javascript all together. I'm running everything locally and do not have a test site. In Chrome and FF, all data presents and transforms correctly, but the hide columns function is not executing so i am getting columns that have no data.
Whether I embed the Library, call the Lib as an external js file or reference google/microsofts CDN address the code never executes.
Whether I embed the Library, call the Lib as an external js file or reference google/microsofts CDN address the code never executes.
Please make a jsfiddle.net with a few rows of rendered HTML, relevant CSS and the javascript
I have no way of helping you when I cannot even see if the rendered HTML is valid
I have no way of helping you when I cannot even see if the rendered HTML is valid
try:
Notice the javascript line comments before the <![CDATA[ and the ]]>
<?xml version="1.0"?>
<!--THE FOLLOWING STYLESHEET IS A DEFAULT TEMPLATE FOR ELIBILITY-->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
xmlns:hip="http://www.oopfactory.com/2011/XSL/Hipaa">
<xsl:output method="html" doctype-system="http://www.w3.org/TR/html4/strict.dtd"
doctype-public="-//W3C//DTD HTML 4.01//EN" indent="yes"/>
<xsl:variable name="smallcase" select="'abcdefghijklmnopqrstuvwxyz'"/>
<xsl:variable name="uppercase" select="'ABCDEFGHIJKLMNOPQRSTUVWXYZ'"/>
<xsl:template match="/">
<xsl:comment> saved from url=(0014)about:internet </xsl:comment>
<xsl:text> </xsl:text>
<html>
<head>
<style type="text/css"><![CDATA[
#section1Table {
width: 100%;
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
}
#providerTable {
width: 100%;
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
border-collapse:collapse;
text-align: center;
}
#subscriberTable, #dependentTable, #deductibleTable {
width: 100%;
font-family:Tahoma, Geneva, sans-serif;
font-size:9px;
border-collapse:collapse;
text-align: center;
}
.mainHeader {
background:#666;
color:#FFF;
font-size:12px;
}
.subHeader {
font-family:Tahoma, Geneva, sans-serif;
background:#CCCCCC;
color: #00F;
}
.pageHeader {
font-family:Tahoma, Geneva, sans-serif;
font-size:16px;
}
.pageHeader1 {
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
font-style: italic;
}
.subHeader2 {
font-family:Tahoma, Geneva, sans-serif;
color: #00F;
font-size:12px;
}
.subHeader3 {
font-family:Tahoma, Geneva, sans-serif;
color: #00F;
font-size:9px;
text-align: right;
background:#CCCCCC;
padding-right: 5px;
}
.subData2 {
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
.summaryTable, .summaryIndTable {
width: 100%;
font-family:Tahoma, Geneva, sans-serif;
font-size:9px;
border-collapse:collapse;
}
.mainHeader2 {
background:#666;
color:#FFF;
font-size:12px;
}
.subHeader3 {
font-family:Tahoma, Geneva, sans-serif;
background:#CCCCCC;
color: #00F;
text-align:center;
}
#requestValidationTable {
width: 100%;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
border-collapse:collapse;
text-align: left;
}
.detailTable, #activecoverageTable {
width: 100%;
font-family:Tahoma, Geneva, sans-serif;
font-size:7px;
border-collapse:collapse;
text-align: center;
}
.summaryFamTable, .summaryIndTable {
display:inline;
width: 100%;
font-family:Tahoma, Geneva, sans-serif;
font-size:9px;
border-collapse:collapse;
display: -moz-inline-stack;
vertical-align:top;
}
p {
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
}
h5 {
font-family:Tahoma, Geneva, sans-serif;
}
th, tr, table {
border-collapse:collapse;
font-family:Tahoma, Geneva, sans-serif;
}
]]></style>
<title>Eligibilty Benefit Response</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('.detailTable').each(function() {
$(this).find("th").each(function(i) {
var remove = true;
var tds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')');
if (tds.filter(":parent").length == 0) {
$(this).hide();
tds.hide();
}
});
});
});
//]]></script>
</head>
<body>
<table class="detailTable">
<tr><th>A</th><th>B</th><th>C</th><th>D</th></tr>
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr>
</table>
</body>
</html>
Notice the javascript line comments before the <![CDATA[ and the ]]>
This is a solution I came up with...Not sure completely why it worked, but it did.
Before XSLT:
<td>
<xsl:value-of select="hip:CoverageLevel"
</td>
Outputted HTML (no value - so assuming whitespace or hidden characters present so Javascript/JQuery in FF/Chrome was not executing. It did execute in IE9 though... again not sure why):
<TD>
</TD>
Fixed XSLT:
<td>
<xsl:if test="string-length(hip:Co
<xsl:value-of select="hip:CoverageLevel"
</xsl:if>
</td>
Outputted HTML (this worked in all browsers. I understand why it worked):
<TD></TD>
Prior to me finding a fix. I using XSLTs strip-space and CSS whitespace with no luck.
Before XSLT:
<td>
<xsl:value-of select="hip:CoverageLevel"
</td>
Outputted HTML (no value - so assuming whitespace or hidden characters present so Javascript/JQuery in FF/Chrome was not executing. It did execute in IE9 though... again not sure why):
<TD>
</TD>
Fixed XSLT:
<td>
<xsl:if test="string-length(hip:Co
<xsl:value-of select="hip:CoverageLevel"
</xsl:if>
</td>
Outputted HTML (this worked in all browsers. I understand why it worked):
<TD></TD>
Prior to me finding a fix. I using XSLTs strip-space and CSS whitespace with no luck.
Premium Content
You need an Expert Office subscription to comment.Start Free Trial