Is it possible to display a previously created Facelets page completely in a <p:dialog>?
Place <ui:include src="myPage.xhtml" /> inside your <p:dialog
like this
<p:dialog id="dialog" widgetVar="dlg" >
<ui:include src="myPage.xhtml" />
</p:dialog>
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 a <p:dialog dynamic="true"> which is shown on start of <p:commandButton>.
<h:form id="form">
<p:commandButton value="#{bundleComunes.guardar}" actionListener="#{saveBB.save}" onstart="PF('saveDialog').show()" update="#form" oncomplete="PF('saveDialog').hide()" />
<p:dialog dynamic="true" widgetVar="saveDialog">
Guardando<br></br>
<p:graphicImage value="/img/ajaxloadingbar.gif" />
</p:dialog>
</h:form>
It shows dialog, but never hides on complete. But if I remove dynamic="true", it works.
<h:form>
<p:commandButton ... update="#form" />
<p:dialog dynamic="true">
...
</p:dialog>
</h:form>
You're updating the form the dynamic dialog is sitting in, causing it to get corrupted because it's after the update not the same dialog anymore as when it was opened.
Change update="#form" to something more specific which does not cover the dialog, or, better yet, move the dialog outside the form, preferably to the very bottom of the body.
<h:form>
<p:commandButton ... update="#form" />
</h:form>
...
<p:dialog dynamic="true">
...
</p:dialog>
I have just tested it on glassfish and it works fine.
I think you should have a look on #{saveBB.save} and check if it throws any exception.
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.
I've the below dialog:
<h:form id="r1">
<p:commandButton value="Basic" type="button" onclick="PF('dlg1').show();" />
<p:dialog header="Basic Dialog" widgetVar="dlg1">
<h:outputText id="test" value="Welcome to PrimeFaces" />
</p:dialog>
</h:form>
How can I refresh the JSF page after closing the dialog?
The <p:dialog> supports the ajax close event. This only requires it being placed inside a <h:form> (on contrary to the general recommendation), so you need to make sure that it's already manually poisitioned to the very end of the <h:body> and that you don't make use of appendToBody.
<h:body>
<h:panelGroup id="content" layout="block">
...
</h:panelGroup>
...
<h:form>
<p:dialog>
<p:ajax event="close" update=":content" />
...
</p:dialog>
</h:form>
</h:body>
Use if necessary update="#all" if you intend to update the entire page. But better is to update only the parts which really need to be updated.
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>