i have a commandbutton that when i click i activate a methode as an action but this action take same time like 10 second. in this time i want to show a dialogue that have as msg loading and to be closed automatiquly when the action is finished. i tryed this like that but doesnt work its apear with last message that confirm that the action is finished well.
in JSF code :
<p:dialog id="basicDialog4" header="Information" widgetVar="dlg1" visible="#{gestionduplanning.displaydialog4}" style="background-image: none;background-color: #ffffff;">
<h:panelGrid columns="1" cellpadding="5" id="pn13236549532">
<h:outputText value="Chargement..." style="font-size: 16px;font-family:Times New Roman;" />
</h:panelGrid>
</p:dialog>
<p:commandButton icon="ui-icon-disk" onstart="#{gestionduplanning.chargementstart()}" action="#{gestionduplanning.planificationmanualglobal(gestionduplanning.chefequipedateplanifequipe)}" update="basicDialog2 basicDialog3" />
JSF managed bean :
public void chargementstart()
{
displaydialog4=true;
}
public void chargementstop()
{
displaydialog4=false;
}
any solution to show the loading dialogue waiting the action finish ??
You should look into BlockUI compoent which helps to block the UI when ajax request is procesing
https://www.primefaces.org/showcase/ui/misc/blockUI.xhtml
Related
I got an issue for a while and I can't get rid of it. In my data table I have a column with a button to display a dialog with further information on click.
When I click the first time on the button the dialog opens with the right values, but when I click a second time on button of the same row or any other the values aren't displayed because my event handler findStfPack receive a null value attribute.
I tried to pass the PackageData object to be displayed directly to the method as parameter:
<p:column width="60">
<p:commandButton oncomplete="PF('dlgViewStfPack').show()"
update="search:dlgViewStfPackId"
value=""
title="#{msg['button.search']}"
action="#{budgetViewFulfiledController.findStfPack(_item.stfPack)}"
process="#this"/>
</p:column>
Handler method in view controller:
public void findStfPack(PackageData event){
System.out.println("event: "+event.getPackId());
stfPack= event;
}
Or with primefaces action event:
<p:column width="60">
<p:commandButton oncomplete="PF('dlgViewStfPack').show()"
update="search:dlgViewStfPackId"
value=""
title="#{msg['button.search']}"
actionListener="#{budgetViewFulfiledController.findStfPack}"
process="#this">
<f:attribute name="pack" value="#{_item.stfPack}"/>
</p:commandButton>
</p:column>
Handler method in view controller:
public void findStfPack(ActionEvent event){
PackageData packageData= (PackageData)event.getComponent().getAttributes().get("pack");
System.out.println("event: "+packageData.getPackId());
stfPack= packageData;
}
The dialog:
<p:dialog id="dlgViewStfPackId"
header="#{budgetViewFulfiledController.stfPack.staff.stfName} - Package salarial"
modal="true"
widgetVar="dlgViewStfPack">
<div class="groupDataBox">
<my:outputCurrentPackage currPack="#{budgetViewFulfiledController.stfPack}"/>
</div>
</p:dialog>
And the outcome is the same in the 2 scenarios: on the first event trigger the value is properly passed and displayed but on the second event trigger I got a NullPointerException.
I should specify that, I don't know why but without the update="search:dlgViewStfPackId" the values are not displayed in the dialog.
I don't know exactly the reason, but if you don't update dialog, data can't refresh, it's will be cached the last result.
Try to change like this :
XHMTL
<p:column width="60">
<p:commandButton oncomplete="PF('dlgViewStfPack').show()"
update="#([$id=dlgViewStfPackId])"
value=""
title="#{msg['button.search']}"
action="#{budgetViewFulfiledController.findStfPack(_item.stfPack)}"
process="#this">
</p:commandButton>
</p:column>
JAVA
public void findStfPack(PackageData pd){
System.out.println("event: "+pd.getPackId());
this.stfPack= pd;
}
If it's not working, try to process ID_TABLE
I am automatically selecting a value for radio button when the user types something in an input text using ajax.
The problem is: when the user types something in the input text and directly submits the form by clicking Get, the form does not submit but only the ajax is called because of the change event and the radio is updated.
A second click on the Get button, submits the form.
I also do not want to use keyup since it migth disturb the user while typing.
I use primefaces 5.1
here is my code:
<h:form id="myForm">
<p:selectOneRadio
value="#{myBean.include}" id="IncludeRadio">
<f:selectItem itemValue="Include" itemLabel="Include" />
<f:selectItem itemValue="Exclude" itemLabel="Exclude" />
<p:ajax process="#this" update="#form" />
</p:selectOneRadio>
<p:radioButton id="IncludeRadio0" for="IncludeRadio" itemIndex="0"/>
<p:radioButton id="IncludeRadio1" for="IncludeRadio" itemIndex="1"/>
<p:inputText
value="#{myBean.fieldValue}"
id="FieldValueInputText">
<p:ajax process="#this" update="#form" />
</p:inputText>
<p:commandButton id="GetButton"
action="#{myBean.execute}"
value="Get">
</p:commandButton>
</h:form>
and the bean:
#ManagedBean
#SessionScoped
public class MyBean {
public void setFieldValue(final String fieldValue) {
if (fieldValue != null && !fieldValue.trim().isEmpty()) {
if (!"Include".equals(getInclude())
&& !"Exclude".equals(getInclude())) {
setInclude("include");
}
} else {
setInclude("");
}
}
public void setInclude(String include) {
this.include = include;
}
public String getInclude() {
return this.include;
}
public void execute() {
// do something
}
}
submit button does not submit but only triggers InputText's onChange event
That happened because the blur event of the input field ajax-updates the submit button around the moment you click it. This way the JavaScript/Ajax logic associated with submit button is not guaranteed to work anymore, because the source element is removed from the DOM.
Make sure that you don't cover the submit button in the ajax update.
Instead of updating the entire form,
<p:ajax ... update="#form" />
update only the pieces which really need to be updated, which are only the inputs in your specific case:
<p:ajax ... update="IncludeRadio FieldValueInputText" />
Or if you'd rather like to not keep track of all those IDs when you have many inputs, grab PFS:
<p:ajax ... update="#(#myForm :input)" />
I'm trying to block a <p:commandButton> which is displayed on a <p:confirmDialog> as follows.
<p:confirmDialog id="confirmDeleteDialog" widgetVar="confirmDelete" message="Message" closeOnEscape="true" appendTo="#(body)" closable="true">
<p:blockUI block="confirm" widgetVar="blockUI">
<h:outputText value="Demo"/>
</p:blockUI>
<p:commandButton id="confirm" value="Yes" onstart="PF('blockUI').show()" oncomplete="PF('blockUI').hide();"/> <!--Use PF('confirmDelete').hide() to dismiss the dialog.-->
<p:commandButton id="decline" value="No" onclick="PF('confirmDelete').hide()" type="button" />
</p:confirmDialog>
<p:commandButton oncomplete="PF('confirmDelete').show()"/>
This blocks Yes button (one with the id="confirm") held by <p:confirmDialog>.
The message to be displayed on the confirm dialog is dynamic. It is fetched from the associated backing bean based on certain conditions. Therefore, the dialog is required to be updated before it is displayed.
To update the dialog before it is displayed, the update attribute of <p:commandButton> is set as follows.
<p:commandButton oncomplete="PF('confirmDelete').show()" update="confirmDeleteDialog"/>
This of course, displays a desired message on the dialog dynamically (which is not demonstrated here for the sake of simplicity) but doing so prevents the <p:blockUI> from functioning - it does not block the <p:commandButton>, if the dialog is updated by it.
Neither errors on the browser console nor exceptions on the server terminal are seen.
What is the way of blocking a button held by a in addition to displaying a dynamic message on the dialog?
EDIT :- the answer provided by me is cross-mark.
As noted in the answer given by me, <p/pe:blockUI> needs to be updated, when the <p:commandButton> held by the confirm dialog is clicked, it takes some time to block the button - <p:commandButton> after it is clicked. In the meanwhile, the button can be clicked (either deliberately or accidently) before the initial request completes that may cause duplicate submits which is certainly against the use of <p/pe:blockUI>.
Nothing is preventing a user in my workaround, from clicking the button multiple times before it is blocked by <p/pe:blockUI>. Therefore, the answer provided by me is considered to be cross-mark.
Perhaps the way to meet this requirement is completely different.
EDIT 2:- the actual scenario.
//A view scoped bean.
//A list of selected rows in <p:dataTable>.
private List<WishUtils>selectedValues;
//The actual message to be displayed on the dialog.
private String deleteMsg;
//Associated with the rendered property of the "Yes" button on the dialog.
private boolean renderedYesButtonDelete=true;
//The header message/text of the dialog.
private String messageBoxHeader;
//The no button text (its value).
private String noButtonTextDelete="No";
//Getters and setters as required.
public void confirmDelete(ActionEvent actionEvent) {
if(selectedValues!=null && !selectedValues.isEmpty()) {
renderedYesButtonDelete=true;
noButtonTextDelete="No";
deleteMsg="A long message about a delete prompt from a resource bundle";
messageBoxHeader="Confirm Delete";
} else {
noButtonTextDelete="OK";
renderedYesButtonDelete=false;
deleteMsg="Please select the rows you want to delete";
messageBoxHeader="Confirm Item Select";
}
}
public void delete(ActionEvent actionEvent) {
if(actionEvent.getComponent().getId().equals("confirmDeleteMultiple")) {
//Delete the selected rows.
} else {
//Notify an error (generally never going to be executed).
}
}
The message box goes here :
<p:confirmDialog id="confirmDialogDeleteMultiple" widgetVar="confirmDeleteUIWidget" header="#{wishManagedBean.messageBoxHeader}" closeOnEscape="true" appendTo="#(body)" closable="true">
<p:blockUI id="blockDelete" block="confirmDeleteMultiple" widgetVar="blockDeleteUIWidget"/>
<p:remoteCommand name="blockDeleteCommand" update="blockDelete" process="#this"/>
<p:commandButton id="confirmDeleteMultiple"
value="#{messages['confirmdialog.yes']}"
onclick="blockDeleteCommand();"
onstart="PF('blockDeleteUIWidget').show();"
oncomplete="PF('blockDeleteUIWidget').hide();PF('confirmDeleteUIWidget').hide()"
actionListener="#{wishManagedBean.delete}"
process="#this"
rendered="#{wishManagedBean.renderedYesButtonDelete}"
update="a list of components to be updated"/>
<p:commandButton id="declineDeleteMultiple"
value="#{wishManagedBean.noButtonTextDelete}"
onclick="PF('confirmDeleteUIWidget').hide()"
type="button"/>
<f:facet name="message">
<p:outputPanel>
<h:outputFormat value="#{wishManagedBean.deleteMsg}" escape="false"/>
</p:outputPanel>
</f:facet>
</p:confirmDialog>
The <p:blockUI> indeed fails when the entire dialog is updated. Looks like just another bug. It works when you explicitly call the PrimeFaces.cw(...) "create widget" script of the <p:blockUI> component (exactly that script which you see in generated HTML output representation of <p:blockUI>) on complete of the dialog update.
Given those IDs,
<h:form id="formId">
<p:confirmDialog id="confirmDialogId">
<p:blockUI id="blockId" ... />
<p:commandButton id="confirmButtonId" ... />
The following oncomplete should do it:
<p:commandButton update="confirmDialogId"
oncomplete="PrimeFaces.cw('BlockUI','blockUI',{id:'formId:blockId',block:'formId:confirmId'});PF('confirmDialogId').show()" />
That explains why the <p:remoteCommand> trick works as it under the covers basically re-generates the <p:blockUI> component along with that PrimeFaces.cw(...) call, although it fires an unnecessary ajax request. It might be worth reporting an issue to PrimeFaces guys, telling that PrimeFaces.cw(...) of <p:blockUI> isn't properly executed when the confirm dialog widget is updated.
Another workaround would be to explicitly ajax-update only the parts you'd like to update instead of the entire dialog. That works for me. The header and the message attributes of the <p:confirmDialog> (and those of many other PrimeFaces components) supports being defined via <f:facet> on the attribute name. This allows you to wrap it in a <h:outputText> (or <h:panelGroup>) so that you can just update it individually. This way you don't need to update the entire dialog and the block UI keeps working as intented.
<p:confirmDialog ...>
<f:facet name="header">
<h:outputText id="confirmDeleteDialogHeader" value="#{bean.header}" />
</f:facet>
<f:facet name="message">
<h:outputText id="confirmDeleteDialogMessage" value="#{bean.message}" />
</f:facet>
<h:panelGroup id="confirmDeleteDialogContent">
<p:blockUI ... />
<p:commandButton ... />
<p:commandButton ... />
</h:panelGroup>
</p:confirmDialog>
<p:commandButton ...
update="confirmDeleteDialogHeader confirmDeleteDialogMessage confirmDeleteDialogContent"
oncomplete="PF('confirmDelete').show()" />
This requires the <p/pe:blockUI> to be updated, when the <p:commandButton> displayed on the confirm dialog is clicked.
The <p:blockUI> can be updated onclick using the <p:remoteCommand> (onstart also works).
The code goes here.
<p:confirmDialog id="confirmDeleteDialog" widgetVar="confirmDelete" message="Message" closeOnEscape="true" appendTo="#(body)" closable="true">
<p:blockUI id="blockConfirm" block="confirm" widgetVar="blockUI"/>
<p:remoteCommand name="confirmCommand" update="blockConfirm"/>
<!--Add PF('confirmDelete').hide() to oncomplete to dismiss the dialog, when this button is clicked.-->
<p:commandButton id="confirm" value="Yes" onclick="confirmCommand();" onstart="PF('blockUI').show()" oncomplete="PF('blockUI').hide()"/>
<p:commandButton id="decline" value="No" onclick="PF('confirmDelete').hide()" type="button" />
</p:confirmDialog>
<p:commandButton oncomplete="PF('confirmDelete').show()" update="confirmDeleteDialog" value="Submit"/>
I have a tabview in which I want to refresh contents of one specific tab whenever user selects that tab. I also want modal dialog to pop up while tab is being refreshed.
Here is tabView with tabChange ajax event handler
<p:dialog widgetVar="statusDialog" modal="true" draggable="false" minimizable="false" appendToBody="true" closable="false" header="Processing..." resizable="false" maximizable="false">
<p:graphicImage library="assets" name="ajax-loader.gif"></p:graphicImage>
</p:dialog>
<p:tabView id="tabview" orientation="top" dynamic="false">
<p:ajax event="tabChange" listener="#{bean.tabChangeListener}"></p:ajax>
<p:tab title="tab1">
<ui:include src="/WEB-INF/views/tab1.xhtml"/>
</p:tab>
<p:tab title="tab2">
<p:remoteCommand actionListener="#{bean.refreshData}" update="someTab2ElementID" name="refresh" global="true" onstart="statusDialog.show()" oncomplete="statusDialog.hide()"/>
<ui:include src="/WEB-INF/views/tab2.xhtml"/>
</p:tab>
</p:tabView>
Here is tabChangeListener:
public void tabChangeListener(TabChangeEvent event) {
if ( event.getTab().getId().equalsIgnoreCase("tab2") ) {
RequestContext.getCurrentInstance().execute("refresh()");
}
}
The refresh remoteCommand is being called as expected, but my statusDialog is never shown. If the same remoteCommand is triggered by a button click the statusDialog appears. There are no errors in JavaScript console.
Why is statusDialog not shown when remoteCommand is triggered by RequestContext.execute() and how can I make it appear? I even tried adding statusDialog.show() to execute() but it didnt help.
I figured it out. Here is the solution:
<h:outputScript>
var blockCount=0;
function showStatus() {
if (blockCount==0) statusDialog.show();
blockCount++;
};
function hideStatus() {
blockCount--;
if (blockCount==0) statusDialog.hide();
};
</h:outputScript>
<p:ajaxStatus onstart="showStatus();" onsuccess="hideStatus();" onerror="blockCount=0;statusDialog.hide();errorDialog.show();"/>
<p:remoteCommand actionListener="#{bean.refreshData}" update="someTab2ElementID" name="refresh" global="true" onstart="showStatus()" oncomplete="hideStatus()"/>
Apparently the reason why my status dialog was not being shown is that another Ajax call finished and called statusDialog.hide() while my refresh() thing was going on. The JS code above maintains a counter of how many Ajax calls are in progress, and will only hide the status dialog when all calls have finished. Works as intended now!
If you want to show dialog when a specific tab is changed, you can inform a js function about, the tab selected control that it is 2 or not by adding a callback parameter via ajax response:
public void tabChangeListener(TabChangeEvent event) {
if ( event.getTab().getId().equalsIgnoreCase("tab2") ) {
RequestContext.getCurrentInstance().addCallbackParam("index", 2);
}
}
And use:
<p:ajax event="tabChange" listener="#{bean.tabChangeListener}"
oncomplete="showOrNot(xhr,status,args)"></p:ajax>
This will call the js function and it's going to control that the changed tab is 2 or not:
function showOrNot(xhr,status,args) {
if(args.index==2) {
statusDialog.show();
}
}
Or different approach is defining a value and using visible property of the p:dialog:
public void tabChangeListener(TabChangeEvent event) {
if ( event.getTab().getId().equalsIgnoreCase("tab2") ) {
this.condition=true;
}
}
And <p:dialog visible="#{bean.condition}"/>. And maybe you need to focus on your first approach and you can give an ID to p:dialog and update it via p:remoteCommand:
<p:remoteCommand actionListener="#{bean.refreshData}" update="someTab2ElementID dialog" name="refresh" global="true" onstart="statusDialog.show()" oncomplete="statusDialog.hide()"/>
Don't forget to give the exact client ID of the dialog in the update property of p:remoteCommand.
i have a problem about partial processing. (I use primefaces 3.4.1.) I have a dataGrid listing services and each row of the dataGrid has a commandButton, "remove service", to remove the service.
I remove the specified service from my service list in my backing bean and update the datagrid while "remove service" button is clicked.
Also, i have two buttons in the form;
First button, "add service", works to add new service; I add a new object to my service list in my backing bean and update the datagrid while "add service" is clicked.
The second, "save", button works to save all services. When "save button" is clicked, service list is inserted to database.
Btw, i need form validation since there are mandatory fields in my service object. So, the form should be validated while "add service" and "save" are clicked. But, the form
shouldn't be validated while "remove service" button is clicked. If i use 'process="#form"' for "remove service" button, everything is ok. I can remove the specified service
from my service list in the backing bean and the datagrid is updated properly. But as u know, since all form is processed, all input components are validated. If i use 'process="#this"' or 'immediate="true"' for "remove service" button, i can not reach the last entry. I mean, i cannot reach the last service. I guess it hasn't been posted yet when i click the "remove service" button.
So, what should i do? Is there any suggestion about this situation? Thanks in advance...
My code is as below;
<h:form id="formServicesTab">
<h:panelGrid id="pnlSvcTab" columns="1" styleClass="valignTop" width="100%">
<p:dataGrid id="dgServices" var="service"
value="#{subMerchantOperations.subMerchantServices}"
columns="1" width="100%" styleClass="valignTop"
emptyMessage="#{messagebundle.submerc_grdlabel_no_service}" transient="true"
rowIndexVar="index" >
<p:toolbar>
<p:toolbarGroup align="left">
<p:commandButton id="btnRemoveSvc" onclick="loading.show();"
oncomplete="loading.hide();"
value="#{messagebundle.submerc_btn_delete_service}"
actionListener="#{subMerchantOperations.removeService}"
process="#form" update="#form">
<f:setPropertyActionListener target="#{subMerchantOperations.serviceRowIndex}" value="#{index}" />
</p:commandButton>
</p:toolbarGroup>
</p:toolbar>
<h:panelGrid columns="3" styleClass="valignTop" width="100%" bgcolor="F0F0F0">
<p:panel style="background:#F0F0F0;">
<h:panelGrid id="pnlDgSvc" columns="1" width="100%" style="height:100%">
<h:outputText value="#{messagebundle.submerc_label_svc_shortName}" />
<h:panelGrid columns="2">
<p:inputText id="txtSvcName" value="#{service.serviceName}"
required="true" transient="true"
requiredMessage="#{messagebundle.submerc_validation_msg_required}"
converter="UpperCaseConverter" />
<p:message for="txtSvcName" display="text" />
</h:panelGrid>
<h:outputText value="#{messagebundle.submerc_label_svc_website}" />
<p:inputText value="#{service.serviceUrl}" transient="true"/>
</h:panelGrid>
</p:panel>
<p:panel style="background:#F0F0F0;">
<h:panelGrid columns="1" width="100%">
..........
</h:panelGrid>
</p:panel>
<p:panel style="background:#F0F0F0;">
<h:panelGrid id="pgSvcFiles" columns="1" width="100%">
...........
</h:panelGrid>
</p:panel>
</h:panelGrid>
</p:dataGrid>
</h:panelGrid>
<p:toolbar style="background:white">
<p:toolbarGroup align="left">
<p:commandButton id="btnAddNewSvc"
value="#{messagebundle.submerc_btn_addSvc}"
actionListener="#{subMerchantOperations.addNewService}"
process="#form" update="#form" />
<p:commandButton id="btnSaveSubM"
value="#{messagebundle.submerc_btn_sendApproval}"
action="#{subMerchantOperations.saveServices}"
process="#form" update="#form" />
</p:toolbarGroup>
</p:toolbar>
</h:form>
#ManagedBean
#ViewScoped
public class SubMerchantOperations implements Serializable {
private static final long serialVersionUID = 8556103952857187080L;
private List<Service> subMerchantServices = new ArrayList<Service>();
private int serviceRowIndex;
// add new empty service to the service list
public void addNewService() {
try {
Service svc = new Service();
svc.setStartDate(new Date());
getSubMerchantServices().add(svc);
}
catch(Exception ex) {
if (logger.isEnabledFor(Level.ERROR)) {
...
}
}
}
// Remove the specified service using index parameter got from the datagrid
public void removeService() {
try {
getSubMerchantServices().remove(serviceRowIndex);
}
catch(Exception ex) {
...
}
}
// DB Operations
public String saveSubMerchant() {
...
}
public List<Service> getSubMerchantServices() {
return subMerchantServices;
}
public void setSubMerchantServices(List<Service> subMerchantServices) {
this.subMerchantServices = subMerchantServices;
}
public int getServiceRowIndex() {
return serviceRowIndex;
}
public void setServiceRowIndex(int serviceRowIndex) {
this.serviceRowIndex = serviceRowIndex;
}
}
I have no idea what that transient attribute is doing on your <p:dataGrid>. I have reviewed the latest published version of the Primefaces PDF documentation and this is not listed as a valid attribute.
If you are finding that Facelet-based component validation is causing your empty form to fire validation errors on submit of one of your buttons, you might consider creating a method in your backing bean which is called by your submit method, and validates the state of elements on the bean. This is a popular approach with Primefaces, because unlike Seam we are not provided with form-level validation.
However, do check your understanding of immediate=true.
Alternatively you might consider annotating your POJO's properties with JSR303 annotations.
Since you're using Collections, ensure that your Service POJO overrides equals and hashcode to rule out that something screwy isn't going on with your collection and causing your problem.