Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Javascript/JQuery not running in FF or Chrome

Posted on 2012-08-15
9
Medium Priority
?
284 Views
Last Modified: 2013-11-23
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

0
Comment
Question by:ComputerAidedTech2
  • 3
  • 3
7 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38296446
Any errors in the console?
0
 

Author Comment

by:ComputerAidedTech2
ID: 38296495
If you are referring to Chrome's JS console, no, there are not any warnings present.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38296605
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
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:ComputerAidedTech2
ID: 38296632
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.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38296681
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
0
 
LVL 82

Expert Comment

by:hielo
ID: 38303409
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 ]]>
0
 

Accepted Solution

by:
ComputerAidedTech2 earned 0 total points
ID: 38304696
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.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to dynamically set the form action using jQuery.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
Suggested Courses

572 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question