We help IT Professionals succeed at work.

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>&#10;&#13;</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>

Open in new window

Comment
Watch Question

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Any errors in the console?

Author

Commented:
If you are referring to Chrome's JS console, no, there are not any warnings present.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
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

Author

Commented:
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.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
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
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
try:
<?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>&#10;&#13;</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>

Open in new window


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:CoverageLevel) > 0">
              <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.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.