Is it possible to share this template in multipile components in same scope? I got an error because of duplicated ID, but I need this ID for updating / processing form, also for displaying messages
<ui:define name="content">
<h:form id="contentForm"
prependId="false"
enctype="multipart/form-data">
<p:messages showDetail="true"
closable="true">
<p:autoUpdate/>
</p:messages>
<ui:insert name="formContent" />
</h:form>
</ui:define>
Related
My problem is that p:messages error message flashes and then dissappears. I understand that my ajax on h:commandButton clears the form but I need to keep the message inside the form and I cannot get my method to run in other ways I.E. p:commandButton onclick.
My xhtml code snippet from card.xhtml template:
<h:form id="cardForm">
<p:messages closable="true" id="msg">
<p:autoUpdate disabled="true"/>
</p:messages>
<h:commandButton
value="Add card to profile"
actionListener="#{cust.addCardToProfile('cards.xhtml')}"
rendered="#{not cart}">
<p:ajax oncomplete="addCardToProfile();" update=":cardForm:msg"/>
</h:commandButton>
<h:form>
How to correctly run my "addCardToProfile();" -method and update messages so it stays on the screen.
Original xhtml:
...
<p:remoteCommand name="addCard2OptionList"
actionListener="#{saml2IdPLoginController.addCard2OptionList}"/>
...
<p:outputPanel id="userCard">
<ui:define name="content">
<ui:include src="/WEB-INF/templates/card.xhtml"/>
</ui:define>
</p:outputPanel>
As suggested by #Melloware, It might have something to do with RemoteCommand component.
My page contains a login header that i include via ui:include. The included page contains a dialog with a p:commandButton. When the user logs in, the include page is refreshed properly according to the #form in the update attribute. I also want to update a component outside the included page, that shall display a button when the user is logged in. The include page refreshes and the name of the logged in user is displayed. But the button in the main page is not shown. It is displayed if I refresh the page though. I can't figure out what I'm doing wrong here. Anyone have any ideas.
The header page also displays the commandLink component properly. But when clicking the logout link, the button in the main page is not removed. Since the commandLink does not use ajax, I assume that a normal page POST is done. Which should reload the whole page. Doesn't this work from a page that have been referenced with ui:include?
The login page is using a session scoped backing bean. The main page is view scoped.
Here's the included xhtml (login.xhtml):
<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:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<div style="width:100%;font-size:12px;line-height:20px;background-color:#b0d9e6;color:white">
<h:form>
<h:message id="top_msg"></h:message>
<h:panelGrid width="100%" columns="3" columnClasses="none,right1,right1">
<h:outputLink rendered="#{!loginController.loggedIn}" styleClass="text-align:right;" value="javascript:void(0)" onclick="PF('dlg').show();" title="login">
<p:outputLabel>Login</p:outputLabel>
</h:outputLink>
<h:commandLink rendered="#{loginController.loggedIn}" action="#{loginController.logout}" styleClass="text-align:right;" >
<h:outputLabel>Logout</h:outputLabel>
</h:commandLink>
<p:growl id="growl" sticky="true" showDetail="true" life="3000" />
<p:dialog header="Login" widgetVar="dlg" resizable="false">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="username" value="Username:" />
<p:inputText id="username" value="#{loginController.username}" required="true" label="username" />
<h:outputLabel for="password" value="Password:" />
<p:password id="password" value="#{loginController.password}" required="true" label="password" />
<f:facet name="footer">
<p:commandButton value="Login"
update="#form :createform:createbutton"
actionListener="#{loginController.login}"
oncomplete="handleLoginRequest(xhr, status, args)" >
</p:commandButton>
</f:facet>
</h:panelGrid>
</p:dialog>
</h:panelGrid>
<script type="text/javascript">
function handleLoginRequest(xhr, status, args)
</script>
</h:form>
</div>
</ui:composition>
...
This one is included in the following main page:
...
<ui:include src="login.xhtml" />
<h:form id="createform">
<h:panelGroup id="createbutton" layout="block">
<p:commandButton id="createnew"
ajax="false"
action="#{recepieController.createNewRecipes}"
value="Create new recipe"
rendered="#{recepieController.loggedIn and !recepieController.create and !recepieController.viewOnly and !recepieController.edit}"
accesskey="s">
</p:commandButton>
</h:panelGroup>
</h:form>
You cannot rerender a non-rendered component. If you partially render a button, and the button is not rendered, you cannot call an update on that button, because it does not exist in the DOM.
You have to call the AJAX update on the parent naming container, that is ALWAYS rendered. Thus, update the :createform rather than the button inside. The form is always rendered, no matter what.
I found the issue. In my commandButton "createnew", I used the wrong value to render on.
<p:commandButton id="createnew"
ajax="false"
action="#{recepieController.createNewRecipes}"
value="Create new recipe"
rendered="#{recepieController.loggedIn and !recepieController.create and !recepieController.viewOnly and !recepieController.edit}"
accesskey="s">
</p:commandButton>
It should use my session scoped bean (loginController) to check if the user is logged in. Changing to the following works.
<h:panelGroup id="createbutton">
<p:commandButton id="createnew"
ajax="false"
action="#{recepieController.createNewRecipes}"
value="Create new recipe"
rendered="#{loginController.loggedIn and !recepieController.create and !recepieController.viewOnly and !recepieController.edit}"
accesskey="s">
</p:commandButton>
</h:panelGroup>
Note the difference rendered="#{loginController.login ...} instead of rendered="#{recepieController.loggedIn}"
The recepieController also has a loggedIn attribute which I set, but since the page is not re-posted I guess the value is not changed for the attribute when I login.
However, I believe I tested to use ajax="false" in the p:commandButton for the login dialog which I guess should reset the view scoped version of my loggedIn attribute. I don't fully understand why that didn't work.
I'm a beginner with JSF and Java, please be nice!
I'm trying to render a specific block if a user is an Administrator.
I have a template. This template render correctly a specific block if the user is logged.
admin.xhtml:
<ui:composition template="../../WEB-INF/tpl/admin/template.xhtml">
<ui:define name="sectionTitle">Admin</ui:define>
<!-- Logged as Admin -->
<ui:fragment rendered="#{user.admin}">
<ui:define name="body">
<h3>Welcome</h3>
<p>Please choose an administration task!</p>
</ui:define>
</ui:fragment>
</ui:composition>
template.xhtml:
<div class="header">
<h2>
<ui:insert name="sectionTitle"> Default Section Title</ui:insert>
</h2>
<ui:insert name="logBox">
<ui:fragment rendered="#{not user.logged}">
<ui:include src="login.xhtml"></ui:include>
</ui:fragment>
<ui:fragment rendered="#{user.logged}">
<h:form>
<h:commandButton value="Logout"
action="#{userService.logout}" />
</h:form>
</ui:fragment>
</ui:insert>
</div>
<div class="corebody">
<ui:insert name="body"> Default Section Content</ui:insert>
</div>
I can move the rendered block inside the template like so:
<ui:fragment rendered="#{user.admin}">
<ui:insert name="body"> Default Section Content</ui:insert>
</ui:fragment>
but this don't seem ok to me regarding the responsability of each files ( this don't seem really generic, why should such a thing be in the template? ).
Am I missing something really obvious?
Anything outside <ui:define> and <ui:composition> is ignored during building the view and don't end up in JSF component tree.
You need to put <ui:fragment> inside <ui:define>.
<ui:composition template="../../WEB-INF/tpl/admin/template.xhtml">
<ui:define name="sectionTitle">Admin</ui:define>
<!-- Logged as Admin -->
<ui:define name="body">
<ui:fragment rendered="#{user.admin}">
<h3>Welcome</h3>
<p>Please choose an administration task!</p>
</ui:fragment>
</ui:define>
</ui:composition>
An alternative is to use JSTL <c:if> as that runs during view build time already:
<ui:composition template="../../WEB-INF/tpl/admin/template.xhtml">
<ui:define name="sectionTitle">Admin</ui:define>
<!-- Logged as Admin -->
<c:if test="#{user.admin}">
<ui:define name="body">
<h3>Welcome</h3>
<p>Please choose an administration task!</p>
</ui:define>
</c:if>
</ui:composition>
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
JSTL in JSF2 Facelets... makes sense?
<ui:composition template="../../WEB-INF/tpl/admin/template.xhtml">
<ui:define name="sectionTitle">
<!-- Logged as Admin -->
<ui:fragment rendered="#{user.admin}">
<ui:define name="body">
<h3>Welcome</h3>
<p>Please choose an administration task!</p>
</ui:define>
</ui:fragment>
</ui:define>
</ui:composition>
Try this.
The example demonstrates blocking of <h:form> by <pe:blockUI>.
<h:form id="form" prependId="true">
<pe:blockUI target="form" widgetVar="blockBodyUIWidget">
<h:panelGrid columns="2">
<h:graphicImage library="default" name="images/ajax-loader1.gif" class="block-ui-image"/>
<h:outputText value="#{messages['blockui.panel.message']}" class="block-ui-text"/>
</h:panelGrid>
</pe:blockUI>
<p:commandButton id="btnSubmit"
onstart="PF('blockBodyUIWidget').block()"
oncomplete="PF('blockBodyUIWidget').unblock();}"
update=":form:dataGrid" actionListener="#{bean.listener}"
icon="ui-icon-check"
value="Save">
</h:form>
This blocks <h:form> but there is a template with a header and a left side bar which are not blocked by doing so.
I have tried to block <h:body id="body"> <pe:blockUI target="body"... on the template page but that didn't work ending with an exception indicating, "Cannot find component with the id body in the view."
So, how to target the entire page?
Although I'm using <pe:blockUI> of PrimeFaces extension, the same thing can be demonstrated by <p:blockUI> of PrimeFaces
Give an id to your body and then reference it on the block argument of the <p:blockUI> component.
Example:
<h:body id="entirePage"/>
and
<p:blockUI id="blockUI" widgetVar="blockBodyUIWidget" block=":entirePage"/>
I've used Primefaces multiple times. It's excellent. But this time I don't know why:
I cannot add a growl component, error is: org.primefaces.component.growl.Growl cannot be cast to org.primefaces.component.api.AutoUpdatable
The same for p:messages
It's possibly due to some errors in my facelet. But I compare this to a successful facelet that I wrote before, and I cannot figure out what's the problem. The facelet is question is (delete p:growl and all go well):
<body>
<ui:composition template="./../../WEB-INF/master.xhtml">
<ui:define name="top">
<h:outputText value="#{bundle.ListAccountHolderTitle}"></h:outputText>
</ui:define>
<ui:define name="content">
<h:form>
<p:growl id="growl"/>
<p:dataTable value="#{accountHolderBean.items}" var="holder">
<p:column headerText="Type">#{holder.name}</p:column>
</p:dataTable>
<h:panelGrid columns="2">
Type
<h:inputText id="type1" required="true" value="#{accountHolderBean.selected.type}"/>
Name
<h:inputText id="name1" value="#{accountHolderBean.selected.name}"/>
Field
<h:inputText id="field1" accesskey="f" value="#{accountHolderBean.field}"/>
Value
<h:inputText id="val" accesskey="v" value="#{accountHolderBean.val}"/>
All attributes
<h:outputText id="attrs" value="#{accountHolderBean.allAttributes}"/>
</h:panelGrid>
<p:commandLink update="attrs" actionListener="#{accountHolderBean.update}">Update</p:commandLink>
</h:form>
</ui:define>
</ui:composition>
</body>
org.primefaces.component.growl.Growl cannot be cast to org.primefaces.component.api.AutoUpdatable
This suggests that you've both PrimeFaces 2.x and 3.x libraries in your webapp's runtime classpath. The AutoUpdatable was introduced in PrimeFaces 3.0 while the Growl already exist before in 2.x, but it didn't implement AutoUpdatable until PrimeFaces 3.0.
Cleanup your classpath and get rid of the offending old PrimeFaces 2.x library.