post content of xslt transformation in seperate divs with javascript function - javascript

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>

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.

can't seem to load CSS and JS to JSF files

I'm trying to import a CSS file and a JavaScript file into a JSF file but it doesn't seem to work:
I created the following folders in WebContent and put the files there.
WebContent > resources > css > DBankWebsite30.css And
WebContent > resources > js > mainScript18.js
When I look in the source code of the browser in my web page, the files aren't loaded
<?xml version="1.0" encoding="UTF-8"?>
<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">
<h:head>
<h:outputStylesheet name="css/DBankWebsite30.css"/>
<h:outputScript name="js/mainScript18.js"/>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255"/>
<title>DBank - The best bank</title>
</h:head>
<style>
#content>p
{
font-size:20px;
font-style:italic;
}
</style>
<h:body onload="javascript:setInterval(clock,1000);javascript:buttonClicked();">
<div id="main">
<div id="upper">
<p id="welcomeMessage">Hello guest.</p>
<div id="login">
Login/Logout
</div>
</div>
<div id="left">
<div id="hour"></div>
<ul>
<li id="MainPage" class="mainButtons">- Home - <hr/></li>
<li id="Personal" class="mainButtons">- Personal - <hr/></li>
<li id="AboutUs" class="mainButtons">- About us -<hr/></li>
<li id="ContactUs" class="mainButtons">- Contact us -<hr/></li>
</ul>
</div>
<div id="content">
<p><h:form> Bank content <h:outputLabel value="bla" /></h:form> </p>
</div>
<div id="bottom">
<p id="rights">DBank © All rights reserved. </p>
</div>
</div>
</h:body>
</html>
Is the web page you are displaying inside the resources folder or is it in the WebContent folder. If in webcontent, you need to link them
<h:outputStylesheet name="resources/css/DBankWebsite30.css"/>
<h:outputScript name="resources/js/mainScript18.js"/>

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.

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

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"/>

Loading only jsp tab contents on tab click in javascript?

I have a JSP page with four tabs and a background image. I want that when I click one of the tab, a JSP function should be invoked that will only update the clicked tab contents not the whole page and background image. A similar example can be the Multiview control in ASP.NET
ASP.NET is not comparable to plain JSP. JSP is more comparable to "Classic ASP". If you're looking for the Java counterpart of ASP.NET(-MVC), look at JSF instead. PrimeFaces for example has a <p:tabView> component which I think is exactly what you're looking for.
In plain JSP, you'd need to bring in some JavaScript code to execute Ajax requests and manipulate the HTML DOM and some Servlet to return the necessary data. jQuery and maybe jQuery UI may be helpful in this.
With out your codes we are helpless..
Try the following code which changes the content image of a div to some other images on mouse over other divs. With some modifications it may reach up to your requirements.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage" />
<p> </p>
<div>
<p>
<img src="../Pictures/lightcircle2.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')"/>
</p>
<p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>
<p> </p>
</br>
</div>
</body>
</html>
Link to the question

Categories