primefaces p:inputSwitch not work in dialog while use update the dialog - jsf

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

Related

Issue with primefaces dynamic dialog

I have a dynamic Dialog with a CommandButton or an OutputLabel inside, using a value that takes time to generate. To avoid loosing time when loading the page, I used the dynamic param of the dialog. Unfortunately, my function is still called and the necessary time to display the page is very long.
<p:dialog dynamic="true">
<h:outputText value="#{myBean.myFunction()}"/>
</p:dialog>
Any idea what the issue could be?
Using PF Version 11.0.7
Add appendTo="#(body)" to p:dialog, that should help.
<p:dialog appendTo="#(body)" dynamic="true">
<h:outputText value="#{myBean.myFunction()}"/>
</p:dialog>
visit: https://primefaces.github.io/primefaces/12_0_0/#/core/dialogframework

p:ajaxStatus how to show notification message after saving record

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

Primeface´s remoteCommand - there is a way to execute once?

Primefaces 3.5 JSF 2.1
I´m using p:remoteCommand to execute async commands and update my view after page loading but looks that in the ends of each iteration it execute again and so on...
Is this behaviour correct?
How to execute only once the p:remoteCommand?
update
I have checked that my remoteCommand was out of the update panel, so thank you for the answers but it was already OK. How I solve my problem:
I dont know why but using the onloadScript from Omnifaces (http://showcase.omnifaces.org/components/onloadScript) to call the remoteCommand function it is called many times, but using $(document).ready ... just once. So, I change it and got it working right now.
If you end up in an infinite loop like behaviour, you are likely updating a parent component to your <p:remoteCommand>.
<h:form id="myform">
<p:remoteCommand update="myform" actionListener="#{remoteCommandView.execute}" />
...
</h:form>
Put it outside/next to the component you wish to update and things should be fine.
<h:form id="newform">
<p:remoteCommand update="myform" actionListener="#{remoteCommandView.execute}" />
</h:form>
<h:form id="myform">
...
</h:form>
Use p:remoteCommand in separate form.
Use process="#this" and partialSubmit="true", just to be on safer side.

Primefaces process attribute in reseting form inputs

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?

dialog will not close primefaces

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.

Resources