I have below code in one (main) Facelets page,
<h:panelGroup rendered="true">
<ui:insert>
<ui:include src="/includeSecondPage.xhtml" />
</ui:insert>
</h:panelGroup>
Below is the content in includeSecondPage.xhtml page,
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<script type="text/javascript">
/* <![CDATA[ */
function myScript ()
{
alert("Inside myScript");
}
myScript();
/* ]]> */
</script>
</head>
<f:view>
<body>
<h:form id="secondForm">
<ui:composition>
<h:outputText value="This panel is called using Component Control Component"></h:outputText>
</ui:composition>
</h:form>
</body>
</f:view>
</html>
My Java Script is not getting called in my includeSecondPage.xhtml. Alert box is not popping up in my first (main) page which includes this second page. And there are no Java Script errors in Java Script console.
Anything outside <ui:composition> is discarded during include. Any content outside <ui:composition> is only used by visual editors such as Dreamweaver and should actually only represent "fill up" content in such way so that the include content is "properly" visually represented. If you have looked closer at the JSF-generated HTML output by rightclick, View Source in browser, you'd have noticed that those parts are completely absent in the HTML output.
Put the include content inside <ui:composition>. If you aren't using a visual editor, then also just get rid of anything outside <ui:composition>. Here's how your entire include file can look like:
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<script type="text/javascript">
// <![CDATA[
function myScript () {
alert("Inside myScript");
}
myScript();
// ]]>
</script>
<h:outputText value="This panel is called using Component Control Component" />
</ui:composition>
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
Related
I know that there are several similar questions, but I have to ask the question again with attached code because of being unable to work out.
I have two .xhtml file in JSF project. One is mainPage.xhtml has a button that generates dynamic html code to create an iframe (iFramePage.xhtml) and show it on the browser;
<!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">
<h:head>
<h:outputStylesheet library="css" name="style.css" />
<script type="text/javascript">
/** Create dynamic iframe HTML code for iFramePage.xhtml **/
function createIFrameHTML(){
document.getElementById("iFrameContainer").innerHTML = '<div id="iframe0"><iframe src="iFramePage.xhtml" width="450px" height="300px"></iframe></div>';
}
/** Close iFrame **/
function removeElement() {
/*Both lines work properly when I call inside this page, */
/*..however it does not work by calling from iFramePage.xhtml */
//document.getElementById("iFrameContainer").removeChild("iframe0");
$('iframe0').remove();
}
</script>
</h:head>
<body>
<f:view>
<h:form id="mainForm">
<!-- Control Menu -->
<div id="cntrMenu">
<h:commandButton id="cntrBtn1"
onclick="createIFrameHTML();return false;"></h:commandButton>
<h:commandButton id="cntrBtn2"
onclick="removeElement();return false;"></h:commandButton>
</div>
<div id="iFrameContainer">
<!-- an iframe will be generated by createIFrameHTML() -->
</div>
</h:form>
</f:view>
</body>
</html>
The other page is iFramePage.xhtml that has some html and javascript code;
<!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">
<h:head>
<h:outputScript name="......js" />
<h:outputStylesheet name="....css" />
<script>
/** Close iFrame.**/
function closeSelf() {
/* Two lines works properly, however third line does not work!*/
//window.top.location.href = "HIDDEN";
//parent.document.location.href = "HIDDEN";
parent.removeElement();
}
</script>
</h:head>
<body>
<input jsfc="h:commandButton" id="exitBtn" value="Kapat" onclick="closeSelf();" />
</body>
</html>
I can generate the iframe by clicking "cntrBtn1" button and removing by clicking "cntrBtn2" inside mainPage.xhtml. However, I need to remove the iframe within itself (iFramePage.xhtml). When I click "exitBtn" in iFramePage.xhtml, the iframe does not disappear. There is nothing about cross-domain, because mainPage.xhtml and iFramePage.xhtml are in the same JSF project, even in the same directory. I can redirect the parent page (looks at two lines in closeSelf() in iFramePage.xhtml), but I cannot remove the iframe by using parent element, why! Please, help me :)
Communicate between the parent and iframe using window.postMessage.
Replace the closeSelf() function in iframe page to the following :
function closeSelf() {
parent.window.postMessage("removetheiframe", "*");
}
and on the parent page, add the following code to listen when the iframe sends a message :
function receiveMessage(event){
if (event.data=="removetheiframe"){
var element = document.getElementById('iframe-element');
element.parentNode.removeChild(element);
}
}
window.addEventListener("message", receiveMessage, false);
You can also check the origin of postMessage by event.origin to make sure that the right iframe requested to remove the iframe.
I have a problem with loading Facelets pages from Javascript. I'm working with Netbeans 7.2, Glassfish 3.1.2 and Java EE 6.
I made a simple test page:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<script type="text/javascript">
window.location.href = "index.xhtml";
</script>
<title>winq match!</title>
</h:head>
<h:body>
<h1>WING MATCH!!</h1>
<h:form>
<h:commandButton id="Next" value="weiter" action="index"/>
</h:form>
</h:body>
The index.xhtml page that should be loaded with window.location.href is:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form>
<h:outputText value="TestTestTestTestTest"/>
msg <h:inputText id="ema" value="#{testBean.inputValue}" maxlength="1" />
<h:commandButton id="but" value="Submit" action="index"/>
</h:form>
</h:body>
The page is loaded but not parsed and thus the h: tags are not interpreted by the browser. After searching the web on this it seems that I'm the only one with a problem like this. Maybe I´ve misunderstood some aspects of JSF. I hope to get some advise on this.
You need to make sure that the request URL matches the URL pattern of the FacesServlet as definied in webapp's web.xml. It's namely the one responsible for performing all the JSF/Facelets works.
For example, if you've mapped it on *.jsf, then you should open the page on exactly that URL pattern so that the FacesServlet is properly invoked and will locate the index.xhtml file and do all the necessary stuff.
window.location.href = "index.jsf";
Alternatively, you can also change the URL pattern of the FacesServlet to *.xhtml. This way you never need to worry about virtual URLs.
See also:
JSF Facelets: Sometimes I see the URL is .jsf and sometimes .xhtml. Why?
I'm new to jsf. I have been trying to do a simple Javascript function with commandbutton. I tried many times but wasn't even able to do an alert message. This is part of my code. Please can anyone guide me, and tell what is wrong, and what I should do to make it run?
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<script type="text/javascript">
function test(){
alert('test');
alert(document.getElementById('frmDashBoard:testbt').value);
}
</script>
</h:head>
<h:body>
<ui:composition template="../../template/commonLayout.xhtml">
<ui:define name="content">
<div>
<h:form id="frmdashboard">
<div name="form_panel" style="width: 984px">
<h:commandButton id="testbt" value="#{message.btn_dashboard_search}" action="#{searchBLAction.doAction}" onclick="test()" />
</div>
</h:form>
</div>
</ui:define>
</ui:composition>
</h:body>
</html>
Apart from this lowercase/uppercase typo (which wouldn't cause the function not being called at all, by the way), your concrete problem is caused because this page is been designed as a template client using <ui:composition>. Any content outside the <ui:composition> tag is ignored during runtime by Facelets. This content is only useful for visual web designers, but once it's compiled and executed during runtime, it's ignored altogether. Instead the composition's content will be inserted in the master template, the commonLayout in your case.
You need to put the <script> element inside an <ui:define> instead, this way it will be taken into the final Facelets composition.
<ui:define name="...">
<script>
...
</script>
...
</ui:define>
Or, better, put the JS function in its own JS file in the /resources folder and reference it as follows:
<ui:define name="...">
<h:outputScript name="some.js" target="head" />
...
</ui:define>
Thanks to the target="head", it'll automatically be relocated into the HTML <head> during building the view.
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
Any thing defined outside ui:composition is ignored.So place your content inside this tag and it will work:
Something like this:
<ui:composition template="/WEB-INF/tags/layout.xhtml">
<ui:include src="/tags/common.xhtml"></ui:include>
<ui:define name="content">
<h:outputScript name="validation.js" library="javascript"></h:outputScript>
I am aware of this post and I double checked all the possibilities there.
I'm using JSF 2.0 with Mojarra implementation on Glassfish 3.
I'm trying to use two simple <h:commandLink> tags to change the application language.
This is the .xhtml page:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>
<h:outputText value = "#{appMessage['page.welcome']}" />
</title>
<f:metadata>
<f:event type = "preRenderView" listener = "#{sessionController.changeLanguage}" />
</f:metadata>
</h:head>
<h:body>
<h1><h:outputText value = "#{appMessage['text.slide.welcome']}" /></h1>
<h:form id = "fm-language">
<h:commandLink action = "#{sessionController.changeLanguage('en')}" value = "#{appMessage['link.english']}" />
<h:commandLink action = "#{sessionController.changeLanguage('de')}" value = "#{appMessage['link.german']}" />
</h:form>
</h:body>
This is the HTML code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Maze Project</title>
</head>
<body>
<h1>Welcome</h1>
<form id="fm-language" name="fm-language" method="post" action="/maze/welcome.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="fm-language" value="fm-language" />
<script type="text/javascript" src="/maze/javax.faces.resource/jsf.js.xhtml?ln=javax.faces">
</script>
English
Deutsch
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="8038443616162706480:-1387069664590476821" autocomplete="off" />
</form>
</body>
When pressing a commandLink nothing at all happens. There is no request sended to the server and this following Java Script error is thrown:
mojarra is not defined
The bean methods are correctly called and work fine in the rest of the appliction.
The source and generated HTML output looks fine, you have there a <h:head> in the JSF source (otherwise JSF wasn't able to auto-include any CSS/JS files), and the javax.faces:jsf.js script is present in the HTML output.
You said, you got a JS error that mojarra is not definied. That can only mean that the following auto-generated script
<script type="text/javascript" src="/maze/javax.faces.resource/jsf.js.xhtml?ln=javax.faces">
</script>
did not result in a valid response. That can in turn only mean that you've a Filter which is mapped on /* or *.xhtml which is restricting the jsf.js resource request in some way. Perhaps some homegrown authentication filter which is not doing its job entirely right. Try opening
http://localhost:8080/maze/javax.faces.resource/jsf.js.xhtml?ln=javax.faces
in your browser to see what it actually retrieved (or use the web developer tools to check the response). If it's indeed not the proper response and the problem is indeed in the Filter, then you probably need to rewrite it as such that it should continue the chain when the request URI starts with ResourceHandler.RESOURCE_IDENTIFIER.
E.g.
HttpServletRequest req = (HttpServletRequest) request;
if (req.getRequestURI().startsWith(req.getContextPath() + ResourceHandler.RESOURCE_IDENTIFIER)) {
chain.doFilter(request, response); // Let it continue.
return;
}
Try to watch what happens in Firebug or something similiar, to see if there is actually a server communication.
And since it is a commandLink, look if there are any javascript errors on the page.
You say, you don't get any INFO logs, so I think the request doesn't even get to your application.
(I don't see a closing html tag in your xhtml file, maybe you just didn't pasted it.)
I'm writing my first Firefox XUL toolbar, and am getting a strange behavior - in order to debug my code, I call the same js function from both the firefox toolbar and from a button on a very simple HTML file I created.
The javascript function displays an alert window, gets an element using 'document.getElementById', changes its color, and displays another alert window.
The javascript function works well when called using the HTML button, but when using the toolbar button the 'document.getElementById' returns null and the function terminates (only the first alert window shows).
Any guess what can be wrong? I provide the (very simple) code below for refenrece.
Many thanks in advance!
The javascript file - facebrew.js
function FaceBrew_rtlSelection() {
alert('Before!');
sel_node = document.getElementById("header");
sel_node.style.color = 'blue';
alert('After!');
}
The HTML file
<!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>Test</title>
<script type="text/javascript" src="http://localhost/Sandbox/FaceBrew/chrome/content/facebrew.js"> </script>
</head>
<body>
<input type="button" value="Click me" id="select" onclick="FaceBrew_rtlSelection()" />
<div id="header">
<h1>Hello world!< /h1>
</div>
</body>
</html>
The XUL file - facebrew.xul
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://facebrew/skin/facebrew.css" type="text/css"?>
<overlay id="FaceBrew-Overlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript"
src="chrome://facebrew/content/facebrew.js" />
<toolbox id="navigator-toolbox">
<toolbar id="FaceBrew-Toolbar" toolbarname="FaceBrew Toolbar" accesskey="F"
class="chromeclass-toolbar" context="toolbar-context-menu"
hidden="false" persist="hidden">
<toolbaritem flex="0">
<toolbarbutton id="FaceBrew-Web-Button" tooltiptext=""
label="Run" oncommand="FaceBrew_rtlSelection()" />
</toolbaritem>
</toolbar>
</toolbox>
</overlay>
The CSS file - facbrew.css
#FaceBrew-Web-Button {
list-style-image: url("chrome://facebrew/skin/web.png");
}
as Paul said, when function is called from toolbar, document context is different. get your currently selected HTML document object with:
var doc = gBrowser.selectedBrowser.contentDocument;
doc.getElementById(...);
also, you can always take a look at error console to see why your code is failing (Tools -> Error Console).
Your toolbar is an overlay, so the context (document and window) is browser.xul, no your html file.