I have a program that is felling some fields of an object and this object values need to appear in a modal dialog window.
When debugging the program I see the objects being filled correctly, all the values are there.
Right after feeling this values I am showing the dialog window from my bean but the values does not appear.
This is how I am defining my dialog window.
<p:dialog id="infoDialogReset"
class="dialogWindowGenericMessage"
showHeader="false"
widgetVar="infoDialogResetResolve" modal="true" showEffect="fade" hideEffect="fade" resizable="false" appendTo="#(body)" closable="false">
<p:panel id="infoDialogResetPanel" class="dialogText18Blue" header="RESET + RESOLVE CHANNEL" style="">
<p:outputLabel >reset status ->#{channelManagement.selectedChannel.resetStatus}</p:outputLabel>
</f:facet>
</p:panel>
</p:dialog>
This is the piece of code where I am passing the values to the variables values.
this.selectedChannel.setResetStatus(0);
RequestContext.getCurrentInstance().update(":j_idt3:mainForm:infoDialogReset");
context.execute("PF('infoDialogResetResolve').show();");
As the result the dialog windows is being shown as expected but the value for the channelManagement.selectedChannel.resetStatus object is not appearing.
Any ideas what am I doing wrong?
I have changed my approach.
Instead of calling my modal dialog screen from by back bean I have called directly from the .xhtml page.
Just for reference if someone is facing the same issue. This is the way that I am doing the call.
<p:commandButton ajax="true" class="buttonCommmandBlue" value="RESET" oncomplete="PF('dialogResetResolve').show()" update=":j_idt3:mainForm:panelResetResolve" action="#{channelManagement.resetChannel(channelManagement.selectedChannel.name)}">
Related
I have a form inside a modal dialog and after closing (hiding in fact) one I wanted to reset all inputs that user might have changed. I though about something like as follow:
<p:dialog widgetVar="myDialog">
<h:form id="formId">
<!-- ... -->
<p:commandButton value="Cancel" onclick="myDialog.hide();"
update="formId">
<p:resetInput target="formId" />
</p:commandButton>
</h:form>
</p:dialog>
But the result was not that I expected. After a while of searching I found a solution that was to add process="#this" attribute to the <p:commandButton>. And my question is why it is necessary? What is really happening in backgroud that this process is desired. I don't really get the idea of process attribute at all.
I have done some work with dialog boxes and the way I did to make the form null is, when clicking the button to open dialog box, I ran a method in backing bean which cleared my pojo so my form had empty values.
In your case it could be something like this:
<h:form id="form-button">
<p:commandButton id="AddButton" value="open dialog box"
update=":form" action="#{myBean.myMethodToSetPojoNull}" immediate="true"
oncomplete="PF('myDialog').show()" />
</h:form>
When clicking this button, the called method will set to null all the fields and your dialog box will be empty. Getting back to your question of why process=#this is neccessary much better explained answer is here
What is the function of #this exactly?
You can also reset input after submitting through this method:
<p:commandButton value="Reset Non-Ajax"
actionListener="#{pprBean.reset}" immediate="true" ajax="false">
<p:resetInput target="panel" />
</p:commandButton>
If you don't add process="#this" then by default attribute value will be set to process="#form" which means all the elements in the form are processed. In command buttons process="#this" is mandatory to execute the corresponding actions associated with that button.
You can directly refer the answer from Balusc in this link
What is the function of #this exactly?
I have two primefaces dialog that are inside in one h:form and i want to submit some required values from one dialog without submit required values from the other one:
<h:form>
<p:dialog modal="true" widgetVar="A">
<h:inputText value="#{bean.value}" required="true" />
<p:commandButton value="A" action="#{bean.someAction}" />
</p:dialog>
<p:dialog modal="true" widgetVar="B" >
<h:inputText value="#{bean.otherValue}" required="true" />
<p:commandButton value="B" action="#{bean.someOtherAction}" />
</p:dialog>
</h:form>
If i press commandButton A the validation of required value inside dialog B dont let me submit values from dialog A.
How can i do that?
The best and the logical solution is to split dialogs into separate forms. Moreover, the best practice is to put the form inside the dialog, and not vice versa.
Another solution is to explicitly tell JSF/PrimeFaces what to update and to process during an ajax request by specifying the corresponding attribute of your command button, or nesting an ajax tag inside the button.
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(); }"/>
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>