web-dev-qa-db-ja.com

フォームのボタンを繰り返しクリックしないようにするにはどうすればよいですか？

私のコード：

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

保存アクションに関連する機能はかなりあります。ボタンを繰り返しクリックすると、データベースにいくつかのレコードが保存される場合があります。それは私の願いではありません。複数のクリックを防ぎ、これを解決するにはどうすればよいですか？

jsfprimefaces
19
leo173

_<p:commandButton>_のクライアント側APIウィジェット：

  • _PrimeFaces.widget.CommandButton_

  • メソッドパラメータの戻り値の型説明

  • disable() --voidボタンを無効にします
  • enable() --void [有効にする]ボタン

したがって、次のように使用できます。

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

PrimeFacesの新しいバージョンの場合、解決策は次のようになります。

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

Javascriptとタイマーを使用する

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

一般的なアプローチとして、ボタンレンダラーをカスタマイズできます。

PrimeFacesにこのレンダラーを使用しますp:commandButton：

public class CommandButtonSingleClickRenderer extends CommandButtonRenderer {

  @Override
  public void encodeEnd(FacesContext context, UIComponent component) throws IOException {
    CommandButton button = (CommandButton) component;
    if (button.isRendered() && !button.isDisabled()) {
      button.setOnclick(prefix(button.getOnclick(),
                        "if(this!==null){disableButton(this.id)}"));
      button.setOncomplete(prefix(button.getOncomplete(),
                           "if(this!==null){enableButton(this.source)}"));
    }
    super.encodeEnd(context, component);
  }

  protected String prefix(final String base, final String prefix) {
    return base == null ? prefix : prefix + base;
  }

}

faces-config.xml：

<render-kit>
  <renderer>
    <component-family>org.primefaces.component</component-family>
    <renderer-type>org.primefaces.component.CommandButtonRenderer</renderer-type>
    <renderer-class>com.whatever.CommandButtonSingleClickRenderer</renderer-class>
  </renderer>
</render-kit>

JavaScript：

function disableButton(id) {
  if (id === null) {
    return;
  }
  var widget = PrimeFaces.getWidgetById(id);
  if (widget !== null) {
    widget.disable();
  }
}

function enableButton(id) {
  if (id === null) {
    return;
  }
  var widget = PrimeFaces.getWidgetById(id);
  if (widget !== null) {
    widget.enable();
  }
}
2
Jasper de Vries