The problem:
I have a MenuItem component that looks like this - <p:menuitem value="Documents" outcome="/portal/admin/documents.xhtml" /> - but it renders into markup that looks like this - <a href="documents.xhtml">
Details:
There are two XHTML pages at play here. The first is index.xhtml at /portal/index.xhtml and the second is admin-widget.xhtml at /portal/home/admin-widget.xhtml.
Relevant part of index.xhtml:
<ui:fragment rendered="...">
<div class="...">
<p:panel styleClass="...">
<f:facet name="header">
<h:outputText value="Administration" />
</f:facet>
<ui:include src="/portal/home/admin-widget.xhtml" />
</p:panel>
</div>
</ui:fragment>
Relevant part of admin-widget.xhtml:
<h:form style="...">
<ui:fragment rendered="...">
<p:menu style="...">
<p:submenu label="Administration Links">
<p:menuitem value="Documents" outcome="/portal/admin/documents.xhtml" />
</p:submenu>
</p:menu>
<h:link value="Documents" outcome="/portal/admin/documents.xhtml" />
</ui:fragment>
</h:form>
The <h:link> below the <p:menu> was just a test, in order to see if the problem was just with the <p:menuitem> or not. However, the <h:link> also renders incorrectly.
The most interesting thing is that when I view the index.xhtml page, the link is incorrect, but if I view the admin-widget.xhtml page directly, the link is correct. So it has to be something with how I am inserting the page, but I'm not sure what I am doing wrong.
I am using PrimeFaces 5.3 and JSF 2.0.
Related
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 have the maven dependency for omnifaces for version 1.11 (as my target is JDK 1.6). Richfaces 4.5.6 final, myfaces 2.2.8. And, against a viewscoped bean I have got this xhtml:
<ui:define name="content">
<f:loadBundle basename="au.com.erb.facility.ui.facility"
var="property" />
<o:highlight styleClass="error" />
<h:panelGrid columns="2">
<rich:validator event="change">
<o:outputLabel value="#{property.absClientNumber}" for="input1" />
<h:inputText id="input1"
value="#{facilityBean.facilityForEdit.alternateKey.absClientNumber}"
label="ABS Client Number" />
<o:outputLabel value="#{property.facilityid}" />
<h:inputText
value="#{facilityBean.facilityForEdit.alternateKey.facilityId}"
label="Facility Id" />
<h:outputLabel value="#{property.rfsAccountGroup}" />
<h:inputText value="#{facilityBean.facilityForEdit.rfsAccountGroup}"
label="RFS Account Group" />
<h:outputLabel value="#{property.rfsAcctCustomerNumber}" />
<h:inputText
value="#{facilityBean.facilityForEdit.rfsAcctCustomerNumber}"
label="RFS Account Customer Number" />
<h:outputLabel value="#{property.rfsAcctLedger}" />
<h:inputText value="#{facilityBean.facilityForEdit.rfsAcctLedger}"
label="RFS Account Ledger" />
</rich:validator>
</h:panelGrid>
</ui:define>
<!-- Buttons that performs actions on a selected record -->
<!-- or navigate to a relevant screen -->
<ui:define name="buttons">
<h:commandButton id="submitButton" value="#{property.submitLabel}"
action="#{facilityBean.save}" styleClass="wideButton"
onclick="#{rich:component('progressWaitModalPanel')}.show()" />
<h:commandButton id="closeButton" value="#{property.closeLabel}"
action="#{facilityBean.close}" styleClass="wideButton"
immediate="true" />
<rich:popupPanel id="progressWaitModalPanel" modal="true">
<f:facet name="header">
<h:outputText value="Processing your request ...." />
</f:facet>
<h:panelGrid columns="1"
style="width: 100%; border-width: 0px; text-align: center;">
<h:outputText value="Please wait..." styleClass="dataValueStyle" />
</h:panelGrid>
</rich:popupPanel>
</ui:define>
The result is nothing. No higlight. No clue what's going on. Have I missed any installation step? I have the css and xmlnamespace in place. Anything else?
I tried to add required="true" as it was shown in the example, but that did not work either. Not sure whether it is due to richfaces bean validation issue.
The <o:highlight> works server side, based on a.o. UIInput#isValid() in JSF component tree. The <rich:validator> works client side and doesn't manipulate JSF component tree.
This indeed doesn't go well together.
I briefly looked into the HTML/JS code of the <rich:validator> showcase and it appears that they don't add a marker style class to the input elements when it's invalid (e.g. PrimeFaces does), so it's going to be hard to write a workaround when continuing the <rich:validator> approach.
You've basically following options:
Maunally write an oncomplete script which finds the validation error messages and then finds the associated inputs and then set the desired marker style class on it.
Report an issue to RichFaces guys and ask them to add a marker style class to invalid inputs via <rich:validator>, so you could style them individually.
Drop <rich:validator> and replace it by server side validation via <f:ajax>.
I try to load an include in a "layoutUnit" via "commandLink" but nothing is displayed but if i refreshes the page all is correct.
the commandLink :
<p:commandLink update=":center" actionListener="#{sidePviewTest.sideBarAction}" value="Center1">
<f:param name="pageViewId" value="center1" />
</p:commandLink>
the layoutUnit :
<p:layoutUnit id="center" position="center">
<ui:include src="#{sidePviewTest.includedPage}" />
</p:layoutUnit>
I do not understand what the problem is.
Any ideas ?
JSF 2.1
PrimeFaces 3.5
I found how to display correctly the content.
I added a panel and I refreshes it instead of the layout.
<p:commandLink update=":myPanel" actionListener="#{sidePviewTest.sideBarAction}" value="Center1">
<f:param name="pageViewId" value="center1" />
</p:commandLink>
<p:layoutUnit id="center" position="center">
<p:panel id="myPanel">
<ui:include src="#{sidePviewTest.includedPage}" />
</p:panel>
</p:layoutUnit>
Hi I followed this code but my logout button is not at the right side of menubar.
sample from PF
here is my xhtml page
<h:body>
<p:menubar autoDisplay="false">
<p:menuitem value="Home" url="/index.jsf" />
<p:submenu label="Maintenance" >
<p:menuitem value="Course" url="/views/course/list.jsf" />
<p:menuitem value="Student" url="/index.jsf" />
</p:submenu>
<f:facet name="options">
<p:commandButton type="button" value="Logout" icon="ui-icon-extlink" />
</f:facet>
</p:menubar>
</h:body>
You should use a style="float: right;" inside the button or include the property into your css stylesheet.
I am able to get the logout to the right by using the below code
<f:facet name="options">
<p:commandButton type="button" value="Logout" />
</f:facet>
Use: inputText style="margin-right:10px" in the facet... Surely will work.
It will work only in primefaces 3.5 change to primefaces 3.5 and it will work you can verify this at primefaces link primefaces blog
For more details go to primefaces showcase page primefaces showcase menubar sample page for sample code this code is from that sample page
<f:facet name="options">
<p:inputText style="margin-right:10px"/>
<p:commandButton type="button" value="Logout" icon="ui-icon-extlink" />
</f:facet>
if your using prime-faces 5, then it should work. Try to browse your application in a web browser instead of the IDE your using to code. Because It's not appear as we expected in the IDE but it's work fine in a web browser. You can also use styleClass inside the tag. insert styleClass="margin-riight:10px" inside the button tag
I have a problem are that when I try update a component that not are in same xhtml.
Somebody know how to do?
thx
PD: im using primefaces 3.2
Sorry for my english
I think that I dnot explain very well.
I have a xhtml father with tis structure:
<h:panelGrid id="tabla">
<h:form id="formTripu" prependId="false">
<h:panelGrid id="fichaTripulante">
<ui:include src="path1" />
<p:spacer height="5px" />
<p:tabView dynamic="false" cache="true">
<p:tab title="#{bundleTrip.datosAdministrativos}">
<ui:include
src="path2" />
</p:tab>
<p:tab title="Datos Operativos ">
<ui:include
src="path3" />
</p:tab>
I wish to do are when for example in path1 I use a h:selectBooleanCheckbox like:
<h:selectBooleanCheckbox inmediate="true" id="checkExt"
value="#{bean.Obj.field}">
<f:ajax render="estadoTripu"
actionListener="#{bean.method}" />
</h:selectBooleanCheckbox>
estadoTripu are in path2 (otherxthml but in same form).
<p:panel>
<h:panelGrid id="datos" columns="5">
<p:column>
<h:selectOneMenu id="estadoTripu"
value="#{bean.Obj.Field2}">
<f:selectItems
value="#{bean.list}" var="item"
itemValue="#{item.id}" immediate="true"
itemLabel="#{item.desc}">
</f:selectItems>
</h:selectOneMenu>
</h:panelGrid>
</p:column>
</h:panelGrid>
</p:panel>
Witch is paht in render o f:ajax????
thx everyone
try this: (Its a trick I learned from BalusC :) )
add binding="#{components.mySelecOneMenu}" to your h:selectOneMenu
<h:selectOneMenu binding="#{components.mySelecOneMenu}" .....
This how you button should look like (more or less)
<h:commandButton value="doSomeThing">
<f:ajax render="#{components.mySelecOneMenu.clientId}"/>
</<h:commandButton>
add this to your faces-config.xml
<managed-bean>
<description>Holder of all component bindings.</description>
<managed-bean-name>components</managed-bean-name>
<managed-bean-class>java.util.HashMap</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
Here some detailed explanation of what I just recommend you to do
How do I break the tyranny of the clientID?
JSF component binding without bean property
if they are not in the same xhtml, do you include one in the other? If not, just change page and it will show the correct one.
But I don't think I correctly understand your question.
Add some code please
I find that component should be in same form an call ids start in form to component, its prefered put id every panelgrid, panel, etc because you have to call every component englobe comoponent that you want render.