I am trying to call a dialog box (p:dialog) from another dialog box. In my page, on clicking on a link one dialog box opens, this dialog box has two sections, one for login and another for sign up. Currently the structure of my page looks like this.
<h:form>
<h:outputLink value="javascript:void(0)" onclick="dlg.show()" title="Login" />
</h:form>
<p:dialog id="dialog" header="Login" widgetVar="dlg" appendToBody="true" modal="true" width="750">
<h:form id="loginForm">
...
</h:form>
<h:form id="signupForm">
...
<p:commandButton id="submitButton" value="SignUp"
onstart="statusDialog.show();"
action="# {signupBean.doSignup}"
update="growl"
oncomplete="statusDialog.hide();dlg.hide();welcome.show();"/>
</h:form>
</p:dialog>
<p:dialog header="Welcome" id="welcome" resizable="false" widgetVar="welcome" width="700" closable="false" modal ="true">
</p:dialog>
The problem I am facing is that whenever I hit submit and there are validation errors on page, the error messages are displayed and the new dialog box is shown. The new dialog box is supposed to be shown only on successfully completion of the form without any validation errors.
Where am I going wrong?
The validation result is in the oncomplete attribute of PrimeFaces components available by the JavaScript args.validationFailed variable which returns a boolean. Just make use of it.
oncomplete="if (!args.validationFailed) { statusDialog.hide(); dlg.hide(); welcome.show(); }"/>
Related
I am using primefaces dialogbox for popup purpose. But everytime it gets opened the whole screen get refreshed automatically and the popup disappears.
< p:dialog id="dialog" header="Select different user" styleClass="atf-header" widgetVar="dlg" appendToBody="true">
<ui:include src="searchpopup.xhtml" />
</p:dialog>
<h:panelGroup>
<h:outputLabel value="#{I18N['Create_Ticket_for_other_users']}" styleClass="atf-header" style="width:600px"></h:outputLabel>
</h:panelGroup>
<h:panelGroup id="search_section" layout="block"
styleClass="atf-content-area atf-separarot-botton" style="width:600px">
<h:panelGroup id="input_search_section" >
<h:outputText id="name" value="Siddharth Mishra"
labelStyleClass="atf-label">
</h:outputText>
</h:panelGroup>
<h:panelGroup styleClass="atf-right atf-inline-block">
<p:commandButton id="btn_search" value="select different user"
styleClass="atf-button-search" onclick="dlg.show()">
</p:commandButton>
</h:panelGroup>
</h:panelGroup>
You p:commandButton is AJAX button (which is default in primefaces) which submits whole form. Add type="button" attribute to it so it will be just ordinary button which do some JavaScript (so called push button). Also I don't see where is h:form tag here. As you have appendToBody="true" in you p:dialog be shore that you don't encapsulate p:dialog inside h:form. You should have h:form inside p:dialog if it is necessary, and if it is not move p:dialog outside of h:form.
I am using Primefaces 3.4.2 with JSF 2.0
I have the following in a dialog popup in JSF page.
<p:dialog header="Create New Request" style="font-weight:bold"
widgetVar="newDialog" resizable="false" id="newDlg"
showEffect="fade" hideEffect="fade" appendToBody="true"
modal="true" position="center top" width="850" height="450">
<p:panelGrid columns="2">
<h:outputLabel value="Employee" for="employee" />
<p:selectOneMenu id="employee" value="#{mymb.employee}"
converter="#{employeeConverter}">
<f:selectItems value="#{mymb.employeeItems}" var="emp"
itemLabel="#{emp.employeeName}" itemValue="#{emp.employeeNumber}"/>
<p:ajax listener="#{mymb.loadDepartments}" process="#this"/>
</p:selectOneMenu>
</p:panelGrid>
<p:separator />
</p:dialog>
If I use appendToBody="true", then selectOneMenu Converter class doesn't gets invoked, but if I make it appendToBody="false", then Converter class gets invoked.
What could be the reason for this? appendToBody="false" makes my popup dialog unusable, not able to navigate using mouse.
How can I resolve this issue?
Remove the appendToBody and put an <h:form/> inside your dialog(along with it's content).
The purpose of appendToBody="false" is to ensure your dialog is rendered within the body (and hence within the main <h:form/>) of the HTML output.
Without appendToBody="false" , the dialog might end up being appended to the end of the markup in <body/> and as a result, nothing inside it will get executed.
Adding <h:form/> to your dialog ensures that even if it winds up outside the <body/> it will still be able to submit to the server
I want to display the header of the modal popup with the value chatBean.selectedUser. The thing that happens is that onclick event is fired before action event so the page is not refreshed when the onclick event is fired. Hence I cannot get the header of modal pop up as the value contained in chatBean.selectedUser. Is there anyway that I can display the header of modal popup with the value chatbean.selectedUser after that the page is submitted?
Here is the relevant part of the view:
<h:form>
<p:selectOneMenu value="#{chatBean.selectedUser}" id="select">
<f:selectItems value="#{chatBean.friendList}" var="users" itemLabel="#{users.firstName}" itemValue="#{users.firstName}"/>
</p:selectOneMenu>
<p:commandButton id="basic" value="Basic" onclick="dlg.show()" type="button" action="#{chatBean.refresh}"></p:commandButton>
<p:dialog id="modalDialog" header="#{chatBean.selectedUser}" widgetVar="dlg" modal="true" height="100">
<h:outputText value="This is a Modal Dialog." />
<h:inputText></h:inputText>
</p:dialog>
</h:form>
You should show the dialog only when the action is completed, not before. Use the oncomplete attribute instead.
<p:commandButton ... oncomplete="dlg.show()" />
Don't forget to explicitly update the dialog's content before opening it. I don't see that anywhere in your code. Perhaps you're using RequestContext#update() or something, but normally you'd use update attribute for this.
<p:commandButton ... update="modelDialog" oncomplete="dlg.show()" />
Also, the type="button" is strange. This way the action wouldn't be invoked at all, but perhaps that's just a careless leftover of experimentation. Remove it.
I have a dialog on one of my pages. It opens fine. It works fine if you use the button on the page, it closes. However, if you try and "x" out of the dialog it will not close. I believe it is related to the fact that I have an input field on the dialog, but I am not sure. I apologize if this is a dupe, I could not find a similar post.
<p:commandButton action="#{phoneListBean.debugger}"
value="Merge Unqiue" onclick="mdlg.show();"
update=":pmsg, :createNewPanel, :listform" />
<p:dialog id="mdialog" header="Merge Unqiue" widgetVar="mdlg"
appendToBody="true">
<h:form id="mform">
<h:panelGrid columns="2" cellpadding="5" id="m">
<h:outputLabel for="listName" value="Enter the List Name:" />
<p:inputText value="#{phoneListBean.mergeList.name}" id="listName" />
<p:commandButton action="#{phoneListBean.mergeUnique}"
value="Merge Unqiue" update=":pmsg, :listform"
onclick="mdlg.hide();" />
</h:panelGrid>
</h:form>
</p:dialog>
Thanks in advance for the help.
Your problem is that you don't want to use the onclick attribute with Primefaces buttons for displaying and hiding the dialogs. The click event may not get invoked before the postback because these buttons are not Ajax enabled.
Instead you should use oncomplete attribute. This will notify the Javascript event to execute only after the server postback has occurred, meaning that show() will display already updated dialog contents, and hide() will occur only after the server side execution has finished.
I have a dialog that contains no content on page load and I'm dynamically setting the content of a dialog box based on the link that a user clicks on.
<p:dialog widgetVar="dlg" modal="true" id="dialog">
<p:panel id="fullArticle">
<h:outputText value="#{content.newsArticle}" escape="false" />
</p:panel>
</p:dialog>
...
...
<p:commandLink value="Read more" actionListener="#{content.getFullArticle}" onclick='dlg.show();' update=":fullArticle">
<f:attribute name="contentId" value="#{news.contentId}" />
</p:commandLink>
The problem i'm having is that when you click the "Read More" link, it shows the dialog, but the dialog is not centered on the page. If i change the udpate attribute on the commandLink to update=":dialog", the dialog flashes as if it's opening and then closing right away.
How can I update the dialog and have it be centered with dynamic content?
The onclick is executed before the ajax request. You need to open the dialog in oncomplete instead. This will be executed after the ajax request and update. The <p:dialog> is namely by default hidden unless its visible attribute evaluates true.
<p:commandLink value="Read more" actionListener="#{content.getFullArticle}"
update=":dialog" oncomplete="dlg.show()">
Unrelated to the concrete problem, are you aware that you can pass fullworthy objects as method arguments since EL 2.2? This makes the <f:attribute> and actionListener "hack" superfluous:
<p:commandLink value="Read more" action="#{content.getFullArticle(news)}"
update=":dialog" oncomplete="dlg.show()" />
I had the same problem.
Updating the dialog makes it disappear and reappear (and forget its position).
To solve it, I created a wrapper tag around the dialog content.
<p:commandLink update=":playerViewDialogHeader,:playerViewDialogContent"
oncomplete='playerViewDialogJS.show()' value='#{item.name}' />
<p:dialog id='playerViewDialog' widgetVar='playerViewDialogJS'>
<f:facet name="header">
<h:outputText id="playerViewDialogHeader" value="#{playerController.objectView.name}" />
</f:facet>
<h:form id='playerViewDialogContent'>
<!-- CONTENT GOES HERE -->
</h:form>
</p:dialog>