Comment éviter de cliquer plusieurs fois sur un bouton dans un formulaire?

Question

Mon code:

<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> 

Il y a un peu de fonctionnalité associée à l'action de sauvegarde. Si je clique sur le bouton à plusieurs reprises, il peut enregistrer quelques enregistrements dans la base de données. Ce n'est pas mon souhait. Comment puis-je empêcher plusieurs clics et résoudre ce problème?

Answer 1

L'API côté client de <p:commandButton> Widget:

• PrimeFaces.widget.CommandButton

• Méthode Params Retour Type Description

• disable() - Désactiver vide s bouton
• enable() - void Active bouton

Vous pouvez simplement utiliser comme ceci:

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

Answer 2

Utiliser Javascript et minuterie

<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

Pour les versions plus récentes de PrimeFaces, la solution serait:

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