¿Cómo evitar repetidamente hacer clic en un botón en un formulario?

Question

Mi código:

<h:form id="newBSTypePanel" > 
    <h:panelGrid columns="2" id="newRecod" > 
     <h:outputText value="Name"/><h:inputText value="#{treeTableController.newBStypeBean.currentObject.TYPENAME.value}" required="true" /> 
     <p:commandButton value="save" action="#{treeTableController.saveNewNodes}" oncomplete="Dlg.hide()" update="productDataForm"/> 
     <p:commandButton value="close" oncomplete="Dlg.hide()" /> 
    </h:panelGrid> 
</h:form> 

Hay un poco de funcionalidad asociada con la acción de guardar. Si hago clic repetidamente en el botón, puede guardar algunos registros en la base de datos. Ese no es mi deseo. ¿Cómo puedo evitar clics múltiples y resolver esto?

Answer 1

El <p:commandButton> 's API lado del cliente Widget:

• PrimeFaces.widget.CommandButton

• Método Parámetros Tipo Descripción de vuelta

• disable() - vacío Desactivar botón s
• enable() - botón vacío Permite

lo que sólo puede utilizar la siguiente manera:

<p:commandButton widgetVar="saveButton" 
       onclick="saveButton.disable()" 
       value="save" 
       action="#{treeTableController.saveNewNodes}" 
       oncomplete="saveButton.enable();Dlg.hide()" 
       update="productDataForm"/> 

Answer 2

el uso de JavaScript y el temporizador

<script> 

function disableClick(){ 
    document.getElementById('saveButton').disables = true; 
    setTimeout('document.getElementById(\'saveButton\').disables = false', 5000)" 
} 
</script> 


<h:form id="newBSTypePanel" > 
    <h:panelGrid columns="2" id="newRecod" > 
     <h:outputText value="Name"/><h:inputText value="#{treeTableController.newBStypeBean.currentObject.TYPENAME.value}" required="true" /> 
     <p:commandButton value="save" action="#{treeTableController.saveNewNodes}" oncomplete="Dlg.hide()" onclick="disableClick()" id="saveButton" update="productDataForm"/> 
     <p:commandButton value="close" oncomplete="Dlg.hide()" /> 
    </h:panelGrid> 
</h:form> 

Answer 3

Para las versiones más recientes de PrimeFaces, la solución sería:

<p:commandButton widgetVar="saveButton" 
       onclick="PF('saveButton').disable()" 
       value="save" 
       action="#{treeTableController.saveNewNodes}" 
       oncomplete="PF('saveButton').enable();PF('Dlg').hide()" 
       update="productDataForm"/>