I have a save button which calls a method in my backing Bean. When it's clicked, I'd like to show notification message, and for that I went for Primefaces' ajaxStatus. . Here's the code of the button (p:commandButton):
<p:commandButton value="OK"
action="#{myBean.saveRecord}" />
and the ajaxStatus outside it:
<p:ajaxStatus onstart="PF('statusDialog').show();"
onsuccess="PF('statusDialog').hide();" />
<p:dialog modal="true" widgetVar="statusDialog"
header="Success operation" draggable="false"
closable="false" resizable="false" style="text-align: center">
</p:dialog>
thank you for your help
Add on your saveRecord method at the end:
RequestContext.getCurrentInstance().execute("PF('statusDialog').show();");
Once you have an ajaxStatus on your page, the javascript that you've putted on the onstart & onsuccess events will be triggered and you already now that, right ?!
On these scripts you can use the widgetVar directly because PrimeFaces create javascript variables on the global (window) scope with the names you informed:
onstart="statusDialog.show();" onsuccess="statusDialog.hide();"
If you want to reuse this solution on others pages just put it on a template file and enjoy :)
Sorry if i have misunderstood your problem.
Cheers
Related
I am doing a on-off with p:inputSwitch, it's in a dialog. When an ajax call inside a form happens in combination with an update on the inputSwitch, the inputSwitch behaves strange and always resets its state. Here is a simple reproducible example (without the need of a backing bean):
<h:form id="buttonForm">
<p:commandButton value="button" update="switch" oncomplete="PF('switchDialog').show();" />
<p:dialog widgetVar="switchDialog">
<p:inputSwitch id="switch" />
</p:dialog>
</h:form>
Interesting observations:
When you remove the h:form the problem is gone
When you remove the update parameter it works
When the p:inputSwitch is outside of the p:dialog it also works
Sorry for this zombie post but i've found a solution that can help.
Add in your
<p:dialog widgetVar="switchDialog" dynamic="true">
Regards
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'am facing a strange situation were I have a commandButton (I have tried both standard h:commandButton and primefaces one p:commandButton), when the button is clicked a method in the backing bean is invoked and an Excel file is returned.This command button is inside a dialog, however I think this shouldn't affect.
Problem is that it seems that this button isn't generating any request, at least firebug doesn't show it, but I get the Excel file from the server, which doesn't make sense if there were no requests.
<h:commandButton id="downloadButton" value="Download" action="#{bean.downloadExcel}"/>
<p:commandButton id="downloadButton" value="Download" action="#{bean.downloadExcel}" ajax="false" onsuccess="confirmDialogWv.close();"/>
I don't use both buttons at the same time, just tested with both of them with same result.
What is the problem if "everything is working fine"? I can't close the dialog with an onsuccess event if I don't have any request.
Has someone faced this problem before? Any explanation?
Thanks in advance for your help!
EDIT:
<h:form id="contentForm" prependId="false" >
<!-- lot of code -->
<p:dialog id="confirmDialog"
modal="true"
closable="false"
widgetVar="confirmDialogWv"
resizable="false"
header="Confirm">
<p:commandButton id="downloadButton" value="Download" action="#{bean.downloadExcel}" ajax="false" onsuccess="confirmDialogWv.close();"/>
<p:commandButton id="openHtmlButton" value="Open HTML" process="#form" update="#form" actionListener="#{bean.openHtml}"/>
</p:dialog>
</h:form>
The second button opens a new window and works properly.
UPDATE:
As already said firebug doesn't show any request, but I've been testing now with IE and Chrome.
Chrome: Shows the request, but when I get the Excel file in the browser the status of the request becomes "canceled".
IE9: Shows the request and returns code 200, but the onsuccess event isn't triggered
I have a commandButton and a dialog. The problem is after the dialog box appears, it disappears(1-2 miliseconds later). Is there a problem with my commandbutton or its dialog issue?
<p:commandButton id="showDetailsButton"
title="Details"
onclick="details.show();"
process="#this"
update=":tabView:myForm:myDialogId"
icon="ui-icon-search">
</p:commandButton>
<p:dialog id="myDialogId"
header="Details"
widgetVar="details"
resizable="false"
height="600"
width="450"
>
//some stuff
</p:dialog>
Changed onclick to oncomplete and now It's working perfectly.
<p:commandButton id="showDetailsButton"
title="Details"
oncomplete="details.show();"
process="#this"
update=":tabView:myForm:myDialogId"
icon="ui-icon-search">
By default a <p:commandButton> is rendered as
<button type="submit" ....> ... </button>
EDIT: Iff you've disabled ajax behavior by specifying ajax=false, please read comments below.
and hence it will trigger a Post Back. So your page makes a POST request to server and refreshes.
Btw, you don't need a PrimeFaces commandButton here, simply use
<input type="button" onclick="details.show()" value="Details"/>
remove the process and update from your commandbutton. They refresh the page/section. And you don't want that.
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.