Why does the google code prettifier refuse to work with XSLT? - javascript

The google code prettifier (which is also used here, on SO) parses the content of a .prettyprint and injects some <span>s to allow highlighting via css.
This works perfectly simple, unless I'm serving an XML file with an XSLT. Then, the prettifier only runs correctly in Opera, but refuses to work with Firefox or Chrome (Chromium to be precise). I complied a minimal example, see below.
If I open the XHTML file (generated on the server with xsltproc) directly, Firefox suddenly does manage to run prettyprint correctly. But if it transforms the XML itself, prettify stops working. How can I get around this? Am I perhaps doing something wrong?
This is the XML file
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="test.xslt" type="text/xsl" ?>
<root><![CDATA[
int main() {
float x {7.7};
return 0;
}
]]></root>
And this is the stylesheet:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
>
<xsl:output method="xml" version="1.0" indent="yes"
doctype-public="-//W3C//DTD XHTML 1.1//EN"
doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
/>
<xsl:template match="/">
<html><head>
<link rel="stylesheet" type="text/css" href="_include/gcp/prettify.css" />
<script type="text/javascript" src="_include/gcp/prettify.js"> </script>
</head>
<body onload="prettyPrint()">
<pre class="prettyprint"><xsl:value-of select="." /></pre>
</body></html>
</xsl:template>
</xsl:stylesheet>
For reference, this is the XHTML 1.1 that is generated by xsltproc:
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="_include/gcp/prettify.css"/>
<script type="text/javascript" src="_include/gcp/prettify.js"/>
</head>
<body onload="prettyPrint()">
<pre class="prettyprint">
int main() {
float x {7.7};
return 0;
}
</pre>
</body>
</html>
Edit:
This is the markup as rendered by Firefox (extracted using Ctrl+Shift+I)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="gcp/prettify.css"/>
<script type="text/javascript" src="gcp/prettify.js"/>
</head>
<body onload="prettyPrint()">
<pre class="prettyprint">
<SPAN xmlns=""> </SPAN>
<SPAN xmlns="">int</SPAN>
<SPAN xmlns=""> main</SPAN>
<SPAN xmlns="">()</SPAN>
<SPAN xmlns=""> </SPAN>
<SPAN xmlns="">{</SPAN>
<SPAN xmlns="">
</SPAN>
<SPAN xmlns="">float</SPAN>
<SPAN xmlns=""> x </SPAN>
<SPAN xmlns="">{</SPAN>
<SPAN xmlns="">7.7</SPAN>
<SPAN xmlns="">};</SPAN>
<SPAN xmlns="">
</SPAN>
<SPAN xmlns="">return</SPAN>
<SPAN xmlns=""> </SPAN>
<SPAN xmlns="">0</SPAN>
<SPAN xmlns="">;</SPAN>
<SPAN xmlns="">
</SPAN>
<SPAN xmlns="">}</SPAN>
</pre>
</body>
</html>

Maybe you could try adding a
<script>prettyPrint()</script>
after the body. I think that maybe Firefox executes the code line by line, so it will first try to execute prettyPrint() and insert the XSLT content after, so prettyPrint() won't have anything to execute...

Update the output method of your xsl from xml to html.
<xsl:output method="html" version="1.0" indent="yes"
doctype-public="-//W3C//DTD XHTML 1.1//EN"
doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"/>

Related

learning javascript, why code will not work for javascript

I use IE 11 with the scripting option enabled. Even on other browsers it does not work. Using notepad++ to code and run... I'm currently learning javascript. I have a .js and .html file - the html has 3 sets of headings/paragraphs where the paragraphs should only show if i click the headings. This does not work. I downloaded a copy of the java library as well... I assume it has something to do with the Doctype statement ?
Any thoughts:
mcode.js
$(document).ready(function() {
$("p").hide();
$("h1").click(function() {
$(this).next().slideToggle(300);
});
});
myhtml.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Heading one</h1>
<p>This is just some text for heading 1</p>
<h1>Heading two</h1>
<p>This is just some text for heading 2</p>
<h1>Heading three</h1>
<p>This is just some text for heading 3</p>
<!-- FIRST BELOW POINTS TO WHERE THE JAVA SCRIPT LIBRARY IS -->
<!-- SECOND IS MY JAVASCRIPT CODE THAT WILL BE USED -->
<!--<script type="text/javascript" src="jquery-1.8.0.min.js"></script>-->
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>
</html>
You have listed your javascript as mcode.js in the question, but referenced src="my_code.js". Change your src in the html to the correct file and it should work fine.
<script type="text/javascript" src="mcode.js"></script>
That should be what you are after :)
You have to add mcode.js in your html file. Add a script in your head linked to mcode.js.

How to include jqplot dateAxisRenderer.min.js file in your xhtml page

I would like to include jqplot.dateAxisRenderer.min.js file in your xhtml page.
How do i do ?
PF Version : 6.0.0
Added Dependency using POM:
<dependency>
<groupId>org.wicketstuff</groupId>
<artifactId>jqplot</artifactId>
<version>7.6.0</version>
</dependency>
How to add in xhtml file?
Following is my xhtml file code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<ui:composition template="/pages/layout.xhtml">
<ui:define name="pageTitle">
<h:outputText value="Page 3" />
</ui:define>
<ui:define name="centerContent">
<div class="contentdetailheadline parbase">
<h1>Page 1</h1>
</div>
<div class="bodycopy parbase">
<div style="clear: both"></div>
<div class="content-body">
<p>
Welcome to My Page !!!
</p>
</div>
<div style="clear: both"></div>
</div>
</ui:define>
</ui:composition>
</html>

post content of xslt transformation in seperate divs with javascript function

I am trying to read through an xml file with xslt transformations and place the content into different divs. I am limited in some solutions in that I CANNOT use any server side languages this content will run local (direct from a cd) and must work in IE (i know why right?) per client specs
Essentially I would like to put all the phases in the "phase" div with an onClick function that loads the lessons into the "lessons" div
some of the code below is pseudo and does not function
thanks in advance for any assistance.
XML File
<?xml version="1.0" encoding="utf-8"?>
<menu frame="UH1Y" curriculum="Crew Chief Training ICW">
<phase name='Unit 01'>
<lesson link='lesson01/menu.htm'>lesson 01</lesson>
<lesson link='lesson02/menu.htm'>lesson 02</lesson>
<lesson link='lesson03/menu.htm'>lesson 03</lesson>
<lesson link='lesson04/menu.htm'>lesson 04</lesson>
<lesson link='lesson0/menu.htm'>lesson 05</lesson>
</phase>
<phase name='Unit 02'>
<lesson link='lesson01/menu.htm'>lesson 01</lesson>
<lesson link='lesson02/menu.htm'>lesson 02</lesson>
<lesson link='lesson03/menu.htm'>lesson 03</lesson>
</phase>
</menu>
XSL File
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>menu</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="scripts/menu.js" type="text/javascript"></script>
</head>
<body>
<div id="container2">
<div id="phase">
<ul>
<xsl:for-each select="menu/phase">
<li onclick='loadLesson(<xsl:value-of select="menu/phase/#name[current()]"/>);'>
<xsl:value-of select="#name"/></li>
</xsl:for-each>
</ul>
</div>
<div id="lesson2">
<ul>
<xsl:for-each select="menu/phase[position() = {*the current phase*]/lesson">
<li><xsl:value-of select="."/></li>
</xsl:for-each>
</ul>
</div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
JS file
function loadLesson(x) {
alert(x);
//<xsl:value-of select="menu/phase/#name[current()]"/>
theDiv=document.getElementById('lesson2')
theDiv.innerHTML = x;
}
Rather than do another XSLT transform each time a user clicks a link, it might be worth simply rendering out all possible divs on the page in the first place, and making them all hidden (using the CSS display property). Then, when they select a 'phase' simply make the relevant div visible.
The first problem with your XSLT though is this
<li onclick='loadLesson(<xsl:value-of select="menu/phase/#name[current()]"/>);'>
It is not valid to have XSLT elements embedded in an attribute like this. In this case, you would really need to use "Attribute Value Templates". Also note as you are already positioned on a phase element, you don't need to write the full path here, just #name would do.
<li onclick="loadLesson('{#name}');'>
Note the curly braces here, as this indicates the Attribute Value Template, and the contents of the braces are evaluated, rather than output literally.
Actually, because you are going to have a separate div for each phase, each such div would need a unique Id, one without spaces in, so it might be better to do this
<li onclick="loadLesson('phase_{generate-id()}');">
Then to render out the lessons for each phase, you could do this
<xsl:for-each select="menu/phase">
<div id="phase_{generate-id()}" style="display:none">
<ul>
<xsl:for-each select="lesson">
<li><xsl:value-of select="."/></li>
</xsl:for-each>
</ul>
</div>
</xsl:for-each>
Again note the use of Attribute Value Templates to set the Id of the div.
Then, finally, you would write your javascript function loadLesson like so:
var current_div = null;
function loadLesson(divId)
{
if (current_div != null) current_div.style.display = 'none';
current_div = document.getElementById(divId);
current_div.style.display = 'block';
}
Here is the full XSLT in this case:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>menu</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="scripts/menu.js" type="text/javascript"></script>
</head>
<body>
<div id="container2">
<div id="phase">
<ul>
<xsl:for-each select="menu/phase">
<li onclick="loadLesson('phase_{generate-id()}');">
<xsl:value-of select="#name"/>
</li>
</xsl:for-each>
</ul>
</div>
<xsl:for-each select="menu/phase">
<div id="phase_{generate-id()}" style="display:none">
<ul>
<xsl:for-each select="lesson">
<li><xsl:value-of select="."/></li>
</xsl:for-each>
</ul>
</div>
</xsl:for-each>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

XSLT: Constructing an HTML file from code snippet in XML node

I wonder if anybody could help me please with a tricky problem I am having. Probably asking the impossible here but would be interested to hear any suggestions.
I have an XML file that in one of the nodes contains the HTML of a page. I would like to take the data in that node and some how create an HTML file from it. So, from the example XML below, I want to transform and pick cell[2] node from //dvm/rows/row and place that in another file so that I can actually see what that HTML mark-up shows and display as a proper web page rather than the code.
If I put it in and XSL like this, would it work?
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output indent="yes" method="html"/>
<xsl:template match="/">
<xsl:value-of select="//dvm/rows/row/cell[2]" disable-output-escaping="yes"/>
</xsl:template>
</xsl:stylesheet>
The XML is:
<dvm>
<description>This is a DVM file</description>
<columns>
<column name="lang"/>
<column name="text"/>
<column name="code" qualifier="true" order="1"/>
<column name="type" qualifier="true" order="2"/>
<column name="subj"/>
<column name="urem"/>
<column name="vreq"/>
</columns>
<rows>
<row>
<cell>English(UK)</cell>
<cell><![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My HTML File</title>
</head>
<body>
<div class="text">
<p>This is a line of text</p>
<p>This is a line of text</p>
<p>This is a line of text</p>
</div>
</body>
</html>]]>
</cell>
<cell>Code 1</cell>
<cell>Text</cell>
<cell>HTML Block 1</cell>
<cell/>
<cell/>
</row>
</rows>
</dvm>
You must get rid of the CDATA section and use the text it contains as regular markup. The DOCTYPE should also be removed (it will be generated by the transformation):
<?xml-stylesheet type="text/xsl" href="delete_3.xsl" ?>
<dvm>
<description>This is a DVM file</description>
<columns>
<column name="lang"/>
<column name="text"/>
<column name="code" qualifier="true" order="1"/>
<column name="type" qualifier="true" order="2"/>
<column name="subj"/>
<column name="urem"/>
<column name="vreq"/>
</columns>
<rows>
<row>
<cell>English(UK)</cell>
<cell>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My HTML File</title>
</head>
<body>
<div class="text">
<p>This is a line of text</p>
<p>This is a line of text</p>
<p>This is a line of text</p>
</div>
</body>
</html>
</cell>
<cell>Code 1</cell>
<cell>Text</cell>
<cell>HTML Block 1</cell>
<cell/>
<cell/>
</row>
</rows>
</dvm>
Then the transformation that produces the XHTML contained in the second cell element is simple:
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:strip-space elements="*"/>
<xsl:template match="/">
<xsl:copy-of select="/*/rows/*/cell[2]/node()"/>
</xsl:template>
</xsl:stylesheet>
When now I open the file: c:\temp\delete\delete2.xml with IE, the result is:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My HTML File</title>
</head>
<body>
<div class="text">
<p>This is a line of text</p>
<p>This is a line of text</p>
<p>This is a line of text</p>
</div>
</body>
</html>
and this is displayed by the browser as:
My HTML File
This is a line of text
This is a line of text
This is a line of text
<xsl:value-of select="cell[2]" disable-output-escaping="yes" />
Note that since your <cell> contains XHTML, there is no real need for a CDATA section. XHTML and XML are compatible, you can transport the one inside the other without converting it to a string first.

TinyMCE not updating textbox

I'm trying to get TinyMCE to work and I'm struggling. Here is my complete page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>TinyMCE Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode: "textareas"
});
</script>
</head>
<body>
<form method="post" action="show.php">
<p>
<textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
<br />
<input type="submit" value="Save" />
</p>
</form>
</body>
</html>
The JS file is found, the php file doesn't exist yet (although I don't believe that will be an issue?)
However when I load my page in Chrome or IE8 the textbox just looks like it always does?
I don't know if it's related but I get a script error in chrome: object has not method 'extend'
Why am I not getting the updated textbox as seen on the site?

Categories