I'm using primefaces poll to dispaly incrementing counter value into a modal dialog. But it doesn't work. I placed the same code in the main form and it worked very well. But I need to display counter value into the modal dialog.
<p:dialog id="dlgPoll" widgetVar="blockUIWidget1" header="Hitonclick" modal="true"
resizable="false" closable="false" >
<h:form>
<h:outputText id="txt_count" value="Extracting is in progress. Please wait...
#{mailMB.count}" />
<p:poll listener="#{mailMB.increment}" interval="1" update="txt_count" >
</p:poll>
</h:form>
</:p:dialog>
Related
I have a form (frmAddPax) to add some users data. This data could be submited manual or vía a barcode reader. When the button "Escanear" is pressed this one calls a dialog with another form (frmScan).
This form read some data from a barcode reader and this data is processed in the managed bean. The data creates an object that is used in the original form (frmAddPax).
The problem is all the form has the styling as there wasn't any data on it, all the mandatory fields have the required="true" attribute.
If I press the "Escanear" button again and scan the same data it shows the form just fine.
I think this could be because before the data is ready updated in the form the validation process happend, but as I have seen in some questions the action and actionListener events happend before the update process so I have no clue.
This is the code of the form:
<h:form id="frmAddPax"
rendered="#{MB.renderStatus.isRenderFormAddPax()}">
<p:panelGrid styleClass="no-border">
<p:row>
<p:column>
<h:outputText
value="#{label['manageVipLoungeEntrance.addPassenger.firstName']} />
</p:column>
<p:column>
<p:inputText required="true"
value="#{manageVipLoungeEntranceExtMB.passenger.firstName}"
style="text-transform: uppercase;" converter="upperCaseConverter">
<f:ajax event="blur" update="#this" render="#this" />
</p:inputText>
</p:column>
...
...
<!-- BOTON ESCANEAR AGREGAR PASAJERO -->
<p:column>
<p:commandButton inmediate="true"
value="#{label['manageVipLoungeEntrance.addPassenger.button.scan']}"
onclick="showLocalDate()" update=":frmScan"
actionListener="#{manageVipLoungeEntranceExtMB.clear}"
oncomplete="{wgvScan.show()}" />
</p:column>
<!-- BOTON ESCANEAR AGREGAR PASAJERO -->
</p:row>
</p:panelGrid>
This is the code for the call that made the "Escanear" button:
<p:commandButton inmediate="true"
value="#{label['manageVipLoungeEntrance.addPassenger.button.scan']}"
onclick="showLocalDate()" update=":frmScan"
actionListener="#{manageVipLoungeEntranceExtMB.clear}"
oncomplete="{wgvScan.show()}" />
And this is the code for the widtget that process the barcode read and updates the original form with the data processed.
<p:dialog widgetVar="wgvScan" modal="true" showEffect="fade"
closeOnEscape="true" resizable="false">
<h:form id="frmScan">
<p:graphicImage value="../resources/images/barCode.png"
rendered="#{manageVipLoungeEntranceExtMB.showTablePassenger!=true}" />
<p:inputText id="itbarcode"
rendered="#{manageVipLoungeEntranceExtMB.showTablePassenger!=true}"
value="#{manageVipLoungeEntranceExtMB.barCode}" onfocus="true"
autocomplete="off" styleClass="insertData"
style="background:#ffffff; position:absolute;left:-7000;" />
<p:commandButton id="cmdReadBarcode" style="display:none"
onclick="showLocalDate()"
actionListener="#{manageVipLoungeEntranceExtMB.readBarCode}"
update=":frmAddPax :growl">
</p:commandButton>
<p:defaultCommand target="cmdReadBarcode" />
...
</h:form>
[EDIT]
#alibttb answer get me to the solution.
I added a remoteCommand before the button that calls the dialog to listen the scanner.
<p:remoteCommand name="refreshForm" process=":frmAddPax" update=":frmAddPax" />
<p:commandButton
value="#{label['manageVipLoungeEntrance.addPassenger.button.scan']}"
onclick="showLocalDate()" process="#this" update=":frmScan"
actionListener="#{manageVipLoungeEntranceExtMB.clear}"
oncomplete="{wgvScan.show()}" />
</p:column>
And in the dialog with the form that process the barcode I added a onHide attribute calling the remoteCommand.
I change the enclouse of the dialog-form to form-dialog as was sugested.
<h:form id="frmScan">
<p:dialog widgetVar="wgvScan" modal="true" showEffect="fade"
closeOnEscape="true" resizable="false" onHide="refreshForm()">
What happens when you click the Escanear button is that you are processing the whole form, thus submitting all the fields with empty values, this will cause validation errors, your button is immediate so what happens is the following:
actionListener is immediate so it's called first and the managed bean is filled with data from a barcode scanner.
the form data is being validated and it's not valid so the inValid flag is set on all the inputs.
the response is created on the server containing an update for the form, showing the new values from the managed bean and the inValid state of the inputs from the validation process.
notice that the submitted data (empty values) is not applied to the model as it's not valid.
to fix this, just use partial processing feature on your button, and remove the immediate="true", it's just a bad design.
just replace immediate="true" with process="#this" in the Escanear button.
If you're not familiar with partial processing feature of JSF and primefaces you should give it a look.
if you really need to submit the form for validation after the scan is complete then you need to use a p:remoteCommand that submits the form after the actionListener is complete:
<p:remoteCommand name="validateForm" process="#form"/>
<p:commandButton value="#{label['manageVipLoungeEntrance.addPassenger.button.scan']}"
onclick="showLocalDate()" update=":frmScan" process="#this"
actionListener="#{manageVipLoungeEntranceExtMB.clear}"
oncomplete="{wgvScan.show()}" />
and in the other form frmScan do:
<h:form id="frmScan">
<p:dialog widgetVar="wgvScan" modal="true" showEffect="fade"
closeOnEscape="true" resizable="false" onHide="validateForm()">
....
....complete your code
the name of the p:remoteCommand becomes a javascript function that can be called back once the scan dialog is hidden.
Note bring up the dev console in your browser and watch the two requests one for updating the form and closing the dialog and the other one caused by p:remoteCommand to validate the form.
Note 1 (not related to your question) that I used the frmScan to enclose p:dialog this is the right way to do it, the form should surround the dialog not the other way around.
I working with primefaces 6.2 on JavaEE 8 .
I have a basic dialog with a commandbutton created a modal over that .(Sory for bad english !)
I want to close modal without closing basic dialog .
How can fix this problem ?
<p:dialog header="Basic Dialog" id="user-management" widgetVar="user-management" width="700px" height="300px" resizable="false">
<p:toolbar>
<f:facet name="left">
<p:commandButton type="button" title="Add" icon="ui-icon-plus" onclick="PF('userDialog').show();"/>
</f:facet>
</p:toolbar>
<p:spacer/>
<p:dataTable value="#{userGroupBean.userSet}" var="user">
// Show user information
</p:dataTable>
</p:dialog>
<p:dialog header="User"
widgetVar="userDialog"
closeOnEscape="true"
resizable="true"
modal="true"
showEffect="fade"
hideEffect="fade"
height="auto"
width="auto">
<h:panelGrid columns="2">
// Some inputs ...
</h:panelGrid>
<p:spacer/>
<div class="dialog-footer">
<p:commandButton value="Save"
oncomplete="PF('userDialog').hide();"
process="#form"
update="user-management"
action="#{userGroupBean.save}"/>
</div>
</p:dialog>
The basic dialog is not 'closed' it is updated via update="user-management" and hence the html that is returned from the server is put in the html dom in with the dialog in the default state: closed. You have several options:
Don't update the dialog but update it's contents (my prefered solution) by adding e.g. a panel inside it and update that
Set a flag in a beanand use visible="#{mybean.dialogIsVisibleFlag}"
in the oncomplete of the ajax call do a PF('user-management').show()
I have a dynamic dialog
<p:dialog
dynamic="true"
closeOnEscape="true"
id="modalID"
modal="true"
>
<p:outputPanel rendered="#{empty testBean.someArrayList}">
empty
</p:outputPanel>
</p:dialog>
When I include this dialog on a page the testBean is not initialized - great, that is what I want. It is only initialized when I show the dialog.
However when I include a p:dataTable in the dialog:
<p:dialog
dynamic="true"
closeOnEscape="true"
id="modalID"
modal="true"
>
<p:outputPanel>
<p:dataTable rendered="#{not empty testBean.someArrayList}" value="#{testBean.someArrayList}" var="item">
<p:column>
#{item}
</p:column>
</p:dataTable>
</p:outputPanel>
</p:dialog>
The testBean is being initialised and testBean.getSomeArrayList() is called on the backing bean.
I have read that this is the case with ui:includes (see Launching dialogs using PrimeFaces via <p:dialog> and <ui:include>) but why is that the case with a p:dataTable? Btw. putting a rendered around the p:dataTable didn't fix the problem either.
What options do I have to not have testBean initialised straight away?
I could use c:if but from my experience you can get strange results when you mix JSTL and JSF. I normally only use it to exclude stuff that will not be rendered (even after some ajax requests). When I used it before with ajax it did sort of worked but could cause unexpected problems.
Another option I could see is to use ui:include with dynamic src e.g.
<p:dialog
dynamic="true"
closeOnEscape="true"
id="modalID"
modal="true"
>
<p:outputPanel id="updateMeWhenOpeningModal">
<ui:insert src="#{dialogManager.testBeanSrc}"/>
</p:outputPanel>
</p:dialog>
And then change the testBeanSrc from path to an empty file to a file containing the p:dataTable.
Are there any other solutions? Which one would have the least side effects?
I am having a dataTable in my xhtml that will show the records and at the last column in the dataTable, I am having a commandButton that will display a dialog that has a selectOneMenu which the user can select the date and based on the date selection, the values will be printed in outputText fields. The code is:
<h:form id="f1">
<p:dataTable id="Requests">
<p:commandButton id="View" update=":BankSearchForm:tab1:#{c.dialogueName}"
oncomplete="PF('#{c.certificateDialogue}').show()" title="View">
<f:setPropertyActionListener value="#{c}" target="#{bcd.selectedRequest}"/>
</p:commandButton>
</p:dataTable>
<p:dialog header="SSA" widgetVar="SSDialog" modal="true" showEffect="fade"
hideEffect="fade" resizable="false" width="1200px">
<p:outputPanel id="BSSEN" style="text-align:center;" autoUpdate="true">
<p:selectOneMenu id="SelectMonth" value="#{bcd.selectedMonth}">
<p:ajax event="change" listener="#{bcd.BSSCert}"/>
<f:selectItems label="#{bcd.coffee2Value}" value="#{bcd.coffee2Value}"/>
</p:selectOneMenu>
</p:outputPanel>
</h:form>
For the first time when I click on the commandButton, the dialog will be shown and I can select any value from the selectOneMenuand when the I close the dialog and click again on the commandButton, the earlier selected values will be shown again where they should be reset to default and the outputLabels should be blank. So how can I achieve this?
Update your dialog panel when showing the dialog.
<p:commandButton id="View" update="BSSEN :BankSearchForm:tab1:#{c.dialogueName}"
Is there a special way to include the p:focus on dialog window?
you can set focus to the dialog by calling the show() method for that dialog.
<p:dialog id="dialog" modal="true" widgetVar="ajaxDialog" width="0"
draggable="false" closable="false" resizable="false">
<p:graphicImage value="./images/ajax-loader.gif" />
</p:dialog>
set the focus with
ajaxDialog.show();
You can set focus automatically when a dialog is shown, using the tag p:focus.
Example:
<p:dialog id="myDialog">
<h:form id="myForm">
<p:focus context="myForm"/>
<p:inputText id="username" value="#{userBean.username}/>
</h:form>
</p:dialog>
when you open the dialog, The first visible editable field will gain focus.
References:
PrimeFaces ShowCase - Focus