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>
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 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?
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 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 am using an EL expression inside JavaScript for rendering Chinese value.
alert('#{bundle.chinese}');
But it renders question marks (?) instead of actual characters.
When I use it outside a script tag in the same XHTML page, e.g.
<p>#{bundle.chinese}</p>
It renders the right chinese Characters. View source shows the html UTF encoded values &....;).
I am using JSF on Facelets.
Sorry, I can't reproduce this with Mojarra 2.0.2 on Tomcat 6.0.20. Here's the JSF page I used:
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<f:loadBundle basename="com.example.i18n.text" var="bundle" />
<h:head>
<title>test</title>
<script>alert('#{bundle.chinese}');</script>
</h:head>
<h:body>
<p>#{bundle.chinese}</p>
</h:body>
</html>
And here is the contents of com/example/i18n/text.properties.
chinese=\u6C49\u8BED\uFF0F\u6F22\u8A9E\u002C\u0020\u534E\u8BED\uFF0F\u83EF\u8A9E\u0020\u006F\u0072\u0020\u4E2D\u6587
The generated HTML source is:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>test</title>
<script>alert('汉语／漢語, 华语／華語 or 中文');</script></head><body>
<p>汉语／漢語, 华语／華語 or 中文</p></body>
</html>
Probably you're doing some stuff a bit differently and/or using a different JSF impl/version. Aren't you somewhere hardcoding/using a non-UTF-8 character encoding? Watch the IDE settings as well.