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}"
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.
p:selectOneMenu result itemlists are initially shows stick to selectOneMenu dropdown, As when I scroll using mouse scroller the result Itemlist moves up or down as I scroll the mouse.
This p:selectOneMenu I have in the dialog box.
This works fine if I use the h:selectOneMenu. The problem is in p:selectOneMenu (primeface 6.2 version).
I have tried with attribute PanelStyle="position:fixed;" but this not helped. The problem appears only in when I use mouse scroller.
Can somebody please guide me how to fix this.
<p:dialog header="Add User" widgetVar="addUserWidget" id="addUserWidgetId" modal="true">
<p:fragment>
<h:panelGrid columns="2" id="myGridPanelId" width="180px">
<h:panelGroup id="groupPan">
<p:selectOneMenu value="#{myBean.selectedUser}" style="width:140px;">
<f:selectItems
value="#{myBean.userLists}" id="userNameItem"
var="user" itemLabel="#{user.name}" itemValue="#{user.name}">
</f:selectItems>
<f:ajax event="change" execute="#this" render="groupPan" listener="#{myBean.userAdd()}" />
</p:selectOneMenu>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid id="panelBtnGrid">
<p:commandButton ajax="true" value="Add" id="addBtnId" process="#this"
action="#{myBean.saveUser()}" />
</h:panelGrid>
</p:fragment>
</p:dialog>
The result Item list should stick to the p:selectOneMenu dropdown box.
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'm working with Primefaces 5.1 and would like a help in component
How I can update the FacesMessages in my page when the user performed one click in the icon from the dropdown in autocomplete( this when the autocomplete is empty)
I've tried many ways but I can not do FacesMessage be updated, that event or how I should conduct is action?
<p:autoComplete id="stepDescriptionDropDownId"
dropdown="true"
value="#{Step.stepSearch.selectedStep}"
converter="basedEntityConverter"
var="stepSearch"
itemValue="#{stepSearch}"
itemLabel="#{stepSearch.description}"
completeMethod="#{Step.doCompleteStepSearchDescription}"
panelStyleClass="autoCompletePanelBorderNone"
immediate="true"
size="30">
<p:column>
<h:outputText value="#{stepSearch.id.stepCode}" />
</p:column>
<p:column>
<h:outputText value="#{stepSearch.description}" />
</p:column>
<p:ajax event="itemSelect" process="#form" update="inputTextStepCodeId, :facesMessagesId" listener="#{Step.doValidateSteps}" />
</p:autoComplete>
In short, how can I call a method when the User clicks on the icon?
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>