選擇/點擊Primefaces selectOneMenu ajax事件

Question

我正在使用Primefaces 5.0。我有一個selectOneMenu，裏面有ajax監聽器：

<p:selectOneMenu value="#{mybean.myselection}" > 
    <f:selectItems value="#{mybean.mylist}" /> 
    <p:ajax listener="#{mybean.test}" /> 
</p:selectOneMenu> 

每當值改變時都會調用監聽器。這工作正常。但是我還需要一個像「select」或「click」這樣的事件，當點擊選定的項目時也會觸發一個動作。

我在PF UserGuide中找不到活動。是否有捷徑可尋？

編輯： 添加Javascript函數。

<h:form> 
    <p:selectOneMenu value="#{mybean.myselection}" widgetVar="mySelect"> 
     <f:selectItems value="#{mybean.mylist}" /> 
     <p:ajax listener="#{mybean.test}" /> 
    </p:selectOneMenu> 
    <h:form> 

<script> 
      //<![CDATA[ 
      $(document) 
        .ready(
          function() { 
           PF('mySelect').selectItem = function(item, 
             silent) { 
            var selectedOption = this.options.eq(this 
              .resolveItemIndex(item)), currentOption = this.options 
              .filter(':selected'), shouldChange = null; 

            if (this.cfg.editable) { 
             shouldChange = (selectedOption.text() != this.label 
               .val()); 
            } else { 
             shouldChange = true; 
            } 

            if (shouldChange) { 
             this.highlightItem(item); 
             this.input.val(selectedOption.val()) 

             this.triggerChange(); 

             if (this.cfg.editable) { 
              this.customInput = false; 
             } 
            } 

            if (!silent) { 
             this.focusInput.focus(); 
            } 

            if (this.panel.is(':visible')) { 
             this.hide(); 
            } 
           } 
          }) 
      //]]> 
     </script> 

Answer 1

在selectOneMenu部件的selectItem功能，你可以看到，該項目被選中時的情況存在是sameOption，如果這是真的改變事件將不會被觸發。

所以這是設計。若要覆蓋此選項，您可以更改selectItem的原型，其中sameOption始終被認爲是false，這意味着您不必爲了簡化後退而刪除與該選項相關的所有代碼，也可以永遠拿出這個選項！

這個例子是我TOKE從方程選項...

PrimeFaces.widget.SelectOneMenu.prototype.selectItem = function(item, silent) { 
    var selectedOption = this.options.eq(this.resolveItemIndex(item)), 
    //sameOption = selectedOption.val() == currentOption.val() | or make it false | 
    currentOption = this.options.filter(':selected'), 
    shouldChange = null; 

    if(this.cfg.editable) { 
     shouldChange = (selectedOption.text() != this.label.val()); //changes done here, see original function 
    } 
    else { 
     shouldChange = true; 
    } 

    if(shouldChange) { 
     this.highlightItem(item); 
     this.input.val(selectedOption.val()) 

     this.triggerChange(); 

     if(this.cfg.editable) { 
      this.customInput = false; 
     } 
    } 

    if(!silent) { 
     this.focusInput.focus(); 
    } 

    if(this.panel.is(':visible')) { 
     this.hide(); 
    } 
} 

現在改變了整個對象的原型可能不是你的情況，如果你想這種行爲的具體selectOneMenu用於你可能會改變只有這樣的功能：

PF('selectOneMenuWidgetVarName').selectItem = function(item, silent) { 
    var selectedOption = this.options.eq(this.resolveItemIndex(item)), 
    currentOption = this.options.filter(':selected'), 
    shouldChange = null; 

    if(this.cfg.editable) { 
     shouldChange = (selectedOption.text() != this.label.val()); 
    } 
    else { 
     shouldChange = true; 
    } 

    if(shouldChange) { 
     this.highlightItem(item); 
     this.input.val(selectedOption.val()) 

     this.triggerChange(); 

     if(this.cfg.editable) { 
      this.customInput = false; 
     } 
    } 

    if(!silent) { 
     this.focusInput.focus(); 
    } 

    if(this.panel.is(':visible')) { 
     this.hide(); 
    } 
} 

即使選擇了相同的值，也會觸發更改事件。 你需要在$(document).ready執行此代碼。