asked on

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

Michel Plungjan

Any errors in the console?

ComputerAidedTech2

ASKER

If you are referring to Chrome's JS console, no, there are not any warnings present.

Michel Plungjan

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

ComputerAidedTech2

ASKER

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 Plungjan

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

hielo

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 ]]>

ASKER CERTIFIED SOLUTION

ComputerAidedTech2

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial