I work on primefaces 6.0 and I have a dialog box, called by a command button, I have several element in this dialog box and 2 command button, one is for closing the dialog box, the other (commandButton id="enableDisableButton") is an option of my program. It must display True or False, like a select boolean button. But when I click on the button, it close my dialog box and I don't understand why !
<p:dialog header="Modal Dialog" widgetVar="rulesDialogBox" modal="true"
width="540" height="400" minWidth="540" minHeight="400"
dynamic="true">
<p:panelGrid columns="1" style="border:none !important;">
<h:outputText id="selectedFile" value="#{eventConfigurationView.loadedFile}"/>
<p:fileUpload label="#{msgs.rule_browse}" fileUploadListener="#{eventConfigurationView.handleFileUpload}" mode="advanced"
update="selectedFile" auto="true" sizeLimit="100000" allowTypes="/(\.|\/)(xls)$/"
minHeight="30px" minWidth="110px"
style="margin-bottom:20px;" />
<!-- allowTypes="/(\.|\/)(xls|csv|xlsx)$/" -->
<p:commandButton value="#{msgs.download}" ajax="false" onclick="PrimeFaces.monitorDownload(start, stop);" style="margin:5px;"
minHeight="30px" minWidth="110px">
<p:fileDownload value="#{eventConfigurationView.file}" />
</p:commandButton>
<p:commandButton id="enableDisableButton"
value="#{eventConfigurationView.myEnable}" style="margin:5px;"
action="#{eventConfigurationView.buttonAction}"
ajax="false"
minHeight="30px" minWidth="110px">
</p:commandButton>
<p:commandButton value="#{msgs.close}" onclick="PF('rulesDialogBox').hide();" type="button" style="margin:5px;"
minHeight="30px" minWidth="110px"/>
</p:panelGrid>
</p:dialog>
public void buttonAction() {
System.out.println("buttonAction");
}
Supposing you refer to p:commandButton id="enableDisableButton" you have disabled ajax on it via ajax="false".
This reloads the entire page on click. As the initial state of the p:dialog is hidden, it looks like the dialog disappers while in fact the page has reloaded completely.
Related
I have a InputText inside a Dialog as:
<p:dialog header="Demo Header"appendTo="#(body)"
widgetVar="sectionDialog" id="section_Dialog"
modal="true">
<h:panelGroup id="myPanel">
<h:panelGrid columns="4">
<h:outputLabel value="Count: "/>
<pe:keyFilter mask="num" for="count" />
<p:inputText id="count"
value="#{myBean.countValue}" converter="spaceConverter">
</p:inputText>
<p:commandButton id="btnId" process="#this"
update="secondPanel" value="ADD" icon="ui-icon-check"
action="#{myBean.generateDataTableBasedOnCount()}" ajax="true"
partialSubmit="true">
</p:commandButton>
</h:panelGrid>
</h:panelGroup>
<h:panelGroup style="border:0" id="secondPanel">
...// data table generated based on Input Count.
</h:panelGroup>
</p:dialog>
If I keep the InputText and Button outside the dialog, it works like a charm.
But when I keep them inside the Dialog, myBean.countValue always stores the previous input value.
When I refresh the page and enter a new value, Old Value is being stored in the bean.
What am I missing here?
PrimeFaces : 5.3
PrimeFaces-Extension : 4.0.0
JSF : 2.2.8
You need to ResetInput of the dialog before you open it.
See: https://www.primefaces.org/showcase/ui/misc/resetInput.xhtml
So on the button that opens your dialog... Its better to reset the FORM but I didn't see the h:form in your example code above.
<p:commandButton value="Open Dialog" update="section_Dialog">
<p:resetInput target="section_Dialog"/>
</p:commandButton
I have a dialog, when user press the button 'Accept' I want to show a ProgressBar in the same dialog, but this its update when actionListener finish.
<p:dialog id="dlgGenerarLista" modal="true" height="180" width="500" header="Generar Lista de Trabajo" widgetVar="dlgGenerarLista">
<p:commandButton onclick="PF('dlgGenerarLista').hide();" value="Cancel" />
<p:commandButton id="btnAceptarGenerar" value="Accept"
actionListener="#{crearEstrategiaBeans.GenerarListaTrabajo}"
oncomplete="PF('dlgGenerarLista').hide();"update="basic"/>
<p:panel id="basic" widgetVar="basic">
<p:progressBar rendered="#{crearEstrategiaBeans.visibilidadBarraProgreso}" id="progressBarIndeterminate" mode="indeterminate"/>
</p:panel>
</p:dialog>
In the method GenerarListaTrabajo() I say that visibilidadBarraProgreso = "true" , so I want that in that moment it shows the progressBar. The progresBar it show when all the process finish.
Here is working solution for your problem:
<h:form id="form">
<p:commandButton onstart="PF('progressBar').jq.show();" oncomplete="PF('progressBar').jq.hide();" />
<p:progressBar widgetVar="progressBar" style="display: none;" />
</h:form>
Short explanation: With PF('progressBar') you'll get the PrimeFaces JavaScript object for your progressbar. With jq you'll get the jQuery element for the progressbar. Then you can use jQuery methods show and hide.
I have an inputTextArea in a dialog and wanted that the bean property shouldn't be sent/changed when the user clicks on the cancel button, but it does.
<p:dialog header="Notizen" id="paketNotizenDialog" modal="true"
widgetVar="paketNotizenDialogWV">
<h:form>
<p:panelGrid columns="1">
<p:inputTextarea scrollHeight="200" rows="6" cols="33" autoResize="false"
value="#{paketErstellenDialogController.selectedPaket.notiz}" />
</p:panelGrid>
<p:commandButton value="Save" process="#form" oncomplete="PF('paketNotizenDialogWV').hide();"/>
<p:commandButton value="Cancel" oncomplete="PF('paketNotizenDialogWV').hide();" process="#none" update="#none" />
</h:form>
</p:dialog>
The button which opens the dialog:
<p:commandButton id="notizEintragButton" value="T" process="#this"
onclick="PF('paketNotizenDialogWV').show();" />
Any hints? Thanks in advance.
As you are using the commandButton, the default behaviour would be to submit the enclosing form with ajax request.
I suspect what you want to do here is to reset the form input and close the dialog. In that case you should go for the type="reset" which according to the primefaces doc:
Reset buttons do not submit the form, just resets the form contents.
And once that is done, trigger your closing javascript code:
<p:commandButton value="Cancel" type="reset"
onclick="PF('paketNotizenDialogWV').hide();"/>
If you do not want to reset the form, just close the dialog then use:
<p:commandButton value="Cancel" type="button"
onclick="PF('paketNotizenDialogWV').hide();"/>
Which according to the primefaces doc would:
Push buttons are used to execute custom javascript without causing an
ajax/non-ajax request. To create a push button set type as "button"
Update
If you want to reset the values from the backing bean then use reset input fields functionality of primefaces.
In your case it would be something like:
<p:panelGrid columns="1">
<p:inputTextarea id="input" scrollHeight="200" rows="6" cols="33" autoResize="false"
value="#{paketErstellenDialogController.selectedPaket.notiz}" />
</p:panelGrid>
<p:commandButton value="Cancel" oncomplete="PF('paketNotizenDialogWV').hide();"
process="#this" update="input" >
<p:resetInput target="input" />
</p:commandButton>
just add type="button" and remove process="#none" update="#none"
from <p:commandButton value="Cancel" oncomplete="PF('paketNotizenDialogWV').hide();" process="#none" update="#none" />
I have a form in which there are two buttons - "button" and "button1" and a split button.
The actionListener methods just update the message content.
When button1 is clicked, only growl is updated. After that if I move mouse over split button items, the selected item gets highlighted.
When button is clicked, whole form is updates. After that if I move mouse over split button items, the selected item does not get highlighted.
This issue was not there in primefaces 3.5 but is there in primefaces 5.0.
Sample code:
<h:form>
<p:growl id="messages" />
<p:commandButton value="Button" actionListener="#{tryBean.save}" update="#form"/>
<p:commandButton value="Button1" actionListener="#{tryBean.save}" update="messages"/>
<p:splitButton value="Save" actionListener="#{tryBean.save}" update="messages" icon="ui-icon-disk">
<p:menuitem value="Update" actionListener="#{tryBean.update}" update="messages" icon="ui-icon-arrowrefresh-1-w" />
<p:menuitem value="Delete" actionListener="#{tryBean.delete}" ajax="false" icon="ui-icon-close" />
<p:separator />
<p:menuitem value="Homepage" url="http://www.primefaces.org" icon="ui-icon-extlink" />
</p:splitButton>
</h:form>
Thanks
I've got a dialog with selectOneMenu.
User chooses the decision, presses 'ok' and dialog content changes according to decision (rendering content1.xhtml or content2.xhtml).
The problem is that initial combo is very small, whereas content1.xhtml contains a wide table.
When user chooses 'decision1' and presses 'ok', the dialog extends to the right border of the screen.
It is no longer centered, and the user can't move it (when he tries, it streches instead of moving).
<p:dialog id="mainDialogId" widgetVar="mainDialog" modal="true" appendToBody="true" >
<p:messages autoUpdate="true" />
<h:form id="mainForm">
<p:panel rendered="#{bean.mode eq 'mode0'}">
<p:selectOneMenu id="mainCombo" value="#{bean.decision}" style="width: 100%;">
<f:selectItem itemLabel="" itemValue="" noSelectionOption="true" />
<f:selectItem id="decision1" itemValue="decision1" itemLabel="decision1" />
<f:selectItem id="decision2" itemValue="decision2" itemLabel="decision2" />
</p:selectOneMenu>
<h:panelGroup style="display:block; text-align:right">
<p:commandButton id="ok" value="ok"
actionListener="#{bean.handleDecision()}"
update=":#{p:component('mainForm')}, :#{p:component('form1')}, :#{p:component('form2')}" >
</p:commandButton>
<p:commandButton id="cancel" value="cancel" oncomplete="mainDialog.hide();" immediate="true" />
</h:panelGroup>
</p:panel>
</h:form>
<h:form id="form1" >
<p:panel id="panel1" rendered="#{bean.mode eq 'mode1'}" >
<ui:include src="/WEB-INF/contents/content1.xhtml" />
</p:panel>
</h:form>
<h:form id="form2">
<p:panel id="panel2" rendered="#{bean.mode eq 'mode2'}" >
<ui:include src="/WEB-INF/contents/content2.xhtml" />
</p:panel>
</h:form>
</p:dialog>
Here's a button that displays the dialog:
<p:commandButton value="Go" action="#{bean.prepare()}" update=":#{p:component('mainDialogId')}" oncomplete="mainDialog.show()" />
When I change:
update=":#{p:component('mainForm')}, :#{p:component('form1')}, :#{p:component('form2')}"
to:
update=":#{p:component('mainDialogId')}"
after pressing 'ok' the dialog disappears.
Setting fixed dialog width (width="600") helps, but it's not a solution (it looks bad in both cases).
I want the dialog to recenter itself after it is resized.
Please help.
Primefaces 3.5
When I change to:
update=":#{p:component('mainDialogId')}"
That's the right solution. Stick to it. You need to update the <p:dialog> itself in order to get it to fit.
after pressing 'ok' the dialog disappears.
Prevent that from happening by checking in dialog's visible attribute if 'ok' button was pressed:
<p:dialog ... visible="#{not empty param[ok.clientId]}">
...
<p:commandButton binding="#{ok}" ... />
...
</p:dialog>