I have some troubles with partial update of jsf 2.0 page.
I have dropdown menu with few choices. Depending on choice I show different page. When I load page first time it shows css and javascript works fine. When I change another option in dropdown menu this part of page which has been re rendered appearing without css and javascript on it doesn't work.
This is example of page itself which I using, template.xhtm and bean are pretty generic therefor I didn't include it.
<ui:composition template="/template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:h="http://java.sun.com/jsf/html">
<ui:define name="body">
<h:form>
<h:selectOneMenu value="#{bean.answer}">
<f:selectItems value="#{bean.answers}" />
<f:ajax event="change" render="includeContainer #All" />
</h:selectOneMenu>
</h:form>
<h:panelGroup id="includeContainer">
<h:panelGroup library="primefaces" name="jquery/jquery.js"
rendered="#{bean.answer == 'yes'}">
<ui:include src="answer_yes.xhtml"></ui:include>
</h:panelGroup>
<h:panelGroup rendered="#{bean.asnwer == 'no'}">
<ui:include src="answer_no.xhtml"></ui:include>
</h:panelGroup>
</h:panelGroup>
</ui:define>
</ui:composition>
One important remark regarding template that I use this statement to include css, it's located on remote server and I can't download and place it locally, it's company's policy.
<link href="http://server.com/resources/w3.css" rel="stylesheet" title="w3" type="text/css" />
Thank you in advance for your help.
You can put rendered panel group inside an <h:form id="toberendred"> and re-render this form instead of h:panelGroup.
For proper (JSF way) loading your css file from remote server you can use Omnifaces CDNResourceHandler
In addition you got some serious issues in your code:
Why use #all (fix to lowercase) with additional (includeContainer) selector? , do view source and see that you can't render <ui:include in view source you will see content of both yes and no xhtmls + <h:panelGroup got no attributes library and name...
Related
I'm facing a a problem with JSF, i have a fragment that is rendered on all pages, and displays the latest entries of a table (~ 10 items). And i want to reuse it on a page that lists all entries.
I put a rendered rule to prevent the all pages version of the element to appear on this page specifically, but still no go, I aways get a "duplicate id found in view" error. The problem seems to lay on the fact that the JSF processor validate the IDs before validating which ones will really be rendered.
Just for information, I'm using the end of the request URI to determine if rendered is True or False.
Ah, and I tried using c:if, but it was useless too.
Edit:
Sample code requested...
i have this xhtml fragment ("tableInclude.xhtml"):
<ui:composition
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"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
<ui:fragment>
<p:dataTable var="item" value="#{bean.items}"
emptyMessage="#{msg['table.empty']}"
widgetVar="table" id="listItems" styleClass="tableItems">
<p:column styleClass="span1" style="text-align: center;">
<f:facet name="header">
<i class='fa-icon-picture'/>
</f:facet>
<p:commandLink action="#{bean.itemSelected(item)}" value="#{item.name}"/>
</p:column>
</p:dataTable>
</ui:fragment>
</ui:composition>
Then i run on every page this:
<ui:include src="./tableInclude.xhtml">
i tried to do this:
<ui:fragment rendered="#{request.requestURI != '/context/don't_render_here.xhtml'}">
<ui:include src="./tableInclude.xhtml">
</ui:fragment>
But i still get the duplicated id error even so when i access the "don't_render_here.xhtml" page.
not the best solution, but a quick and dirty: replace ui:fragment with f:subView
I cannot redirect to another page if the code is like this:
<h:commandButton type="button" value="Enter" action="index?faces-redirect=true" >
But the redirect works if the code is:
<h:commandButton type="button" value="Enter" action="index?faces-redirect=true" >
<f:ajax />
</h:commandButton>
Could anyone explain this? Thanks!
-----------------------EDIT------------------------
The entire xhtml code for your reference:
<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">
<h:head>
</h:head>
<h:body>
<h:form id="form">
<h:commandButton id="enterModelButton" type="button" value="Enter" action="index?faces-redirect=true" >
<f:ajax />
</h:commandButton>
</h:form>
</h:body>
</html>
The <h:commandButton type="button"> doesn't generate a submit button. It just generates a "dead" button without any effects, purely intented to be used for custom onclick="..." scripts and like. This is somewhat a leftover of the dark JSF 1.0/1.1 era, when it wasn't nicely possible to just use plain vanilla HTML in JSF for this kind of things.
The <f:ajax> performs the submit by ajax powers through JSF-generated onclick. It doesn't care about the button's type.
Essentially, removing type="button" and relying on its default type="submit" should fix your problem.
<h:commandButton value="Enter" action="index?faces-redirect=true" />
However, all with all, if this is the real code and you don't actually intend to invoke a bean action, then you're going in completely the wrong direction as to implementing the functional requirement of navigating to a different page by a button. You should be using <h:button> instead.
<h:button value="Enter" outcome="index" />
See also:
Difference between h:button and h:commandButton
How to navigate in JSF? How to make URL reflect current page (and not previous one)
I have a template composition Button.xhtml which contains a <p:commandLink>:
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<p:commandLink value="View" action="#{printClass.printPdf}"/>
</ui:composition>
The link's purpose is to generate PDF.
I have a template client defaultPage.xhtml where the Button.xhtml is been included.
<ui:composition template="../../WebPages/MasterPage/Template.xhtml">
<ui:define name="MainContent">
<ui:include src="../../WebPages/Facelets/Button.xhtml"/>
</ui:define>
</ui:composition>
The last one is Template.xhtml which inserts the MainContent template definition inside a <h:form>.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:body>
<h:form>
<ui:insert name="MainContent" />
</h:form>
</h:body>
</html>
When I place <h:head></h:head> in Template.xhtml, then the <p:commandLink> in Button.xhtml stops working, but CSS of page works perfect. When I remove the <h:head></h:head> or replace it by <head></head> then the <p:commandLink> starts working, but CSS stops working.
How is this caused and how can I solve it?
The <h:head> will auto-include all necessary JavaScript files for ajax behavior and CSS files for layout. When you remove it, then CSS will not be auto-included and ajax behavior will not be enabled. The <p:commandLink> would then act like as a plain vanilla link.
The <h:head> is absolutely necessary for proper functioning of JSF and PrimeFaces components and applying of the PrimeFaces look'n'feel. So you should not remove or replace it.
Let's concentrate on the problem of the failing <p:commandLink>. There are relatively a lot of possible causes, which are all mentioned in this answer: commandButton/commandLink/ajax action/listener method not invoked or input value not updated
You didn't show a fullworthy SSCCE, so it's impossible to copy'n'paste'n'run your code to see the problem ourselves (work on that as well in your future questions). So, I'll just mention the most probable cause for this problem based on the symptoms: you're nesting <h:form> components in each other. Placing the <h:form> in the master template is also a design smell. You should rather place it in the template client. Als note that the <p:dialog> should have its own form but that the <p:dialog> should by itself not be nested in another form.
Update: based on the comments, you're trying to return a whole PDF file as a response to an ajax request. This will indeed not work. The ajax engine expects a XML response with information about changes in the HTML DOM tree. A PDF file isn't valid information. Also, JavaScript has for obvious security reasons no facilities to programmatically trigger a Save As dialogue whereby possibly arbitrary content is provided.
You can't download files by ajax. You have to turn off ajax. In case of <p:commandLink> there are basically 2 solutions:
Use ajax="false".
<p:commandLink ... ajax="false" />
Just use <h:commandLink> instead.
<h:commandLink ... />
In Button.xhtml where you placed
<h:commandLink value="View" action="#{printClass.printPdf}"/>
You need to disable the ajax.So your new code should be like
<h:commandLink value="View" action="#{printClass.printPdf}">
<f:ajax disabled="true"></f:ajax>
</h:commandLink>
I have this composition :
<!DOCTYPE html>
<ui:composition 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:panelGroup rendered="#{empty userc.userb.user.id}">
<h:panelGrid columns="2" >
<h:outputLink value="system/register.xhtml">Register</h:outputLink>
<h:outputLink value="system/login.xhtml">Login</h:outputLink>
</h:panelGrid>
</h:panelGroup>
</ui:composition>
If the user click in Login the page is redirect to system/login.xhtml, which is correct, but if the user, click in Login again, it is redirect to system/system/login.xhtml.
I know a solution for this, which BalusC help me out a long time ago:
<base href="#{fn:replace(request.requestURL, fn:substring(request.requestURI, 1, fn:length(request.requestURI)), request.contextPath)}/" />
It solve my problem, but if I have some ManageBean instancied when I click in some link the bean it's invalidate.
How mantain the url path in every link page and keep the session in the Managed beans ?
Use <h:link> instead. JSF will append the right context path and FacesServlet mapping.
<h:link value="Register" outcome="/system/register" />
<h:link value="Login" outcome="/system/login" />
See also:
Communication in JSF 2.0 - Implicit navigation
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<html xmlns="http://www.w3c.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<link type="text/css" rel="stylesheet" href="themes/bluesky/skin.css"/>
</h:head>
<h:body>
<center>
<p:panel header="Login Form" style="width: 350;">
<h:form>
<h:panelGrid columns="2" cellpadding="2">
<h:outputLabel for="#{UserManagedBean.username}" value="UserName"/>
<h:inputText value="#{UserManagedBean.username}" label="UserName"/>
<h:outputLabel for="#{UserManagedBean.password}" value="Password"/>
<h:inputSecret value="#{UserManagedBean.password}"/>
<h:commandButton type="submit" value="Login" action="#{UserManagedBean.login}"/>
</h:panelGrid>
</h:form>
</p:panel>
<div>
<h:messages/>
</div>
</center>
</h:body>
</html>
What could be the possible problem here? I really don't know.
This XML file does not appear to have any style information associated with it. The document tree is shown below.
This is a typical MSIE warning message whenever you request a X(HT)ML file which does not have a XSL stylesheet (which is basically like CSS for HTML).
That you're getting this on a Facelet page can only mean that the request URL did not match the URL pattern of the FacesServlet as definited in your webapp's web.xml. In other words, the FacesServlet has never got any chance to run, parse that Facelet file and do all the JSF works to generate a bunch of HTML so that the webbrowser has something sensible to work with.
There are 2 solutions for this problem:
Fix your request URL (the one in browser address bar) to match the URL pattern of the FacesServlet in web.xml. If it is for example <url-pattern>*.jsf</url-pattern>, then you need to replace .xhtml extension in URL by .jsf.
Change the URL pattern of your FacesServlet to <url-pattern>*.xhtml</url-pattern>. This way you do not need to worry about accidently seeing XHTML source anymore.
Please note that this all has nothing to do with "autosuggest problem". Work yourself through some basic JSF tutorials first. Our JSF wiki page has some good links.
Oh, before I forgot, the <center> element is deprecated since HTML4 in 1998. Do not use it. Use CSS margin: 0 auto;. Try to avoid reading tutorials/books older than 2 years.