觸發Primefaces p：selectOneMenu onchange

Question

看來Primefaces p:selectOneMenu組件將呈現的HTML <select>標記包裝在div中，並將所選項目顯示為其他標簽。 我想，由用戶做出的更改將通過javascript反映到原始的<select> ，從而導致onchange事件綁定到<select>無法工作。 因此，我對所有:input的以下onchange事件綁定不適用於p:selectOneMenu 。

function applyChangeHandler() {
    $(':input').on('change', function() {
        console.log('on change: ' + this.id);
    });
}

但是，將觸發p:selectOneMenu onchange屬性。 因此，Primefaces會在后台觸發該處理程序（同樣，我想）。

<p:selectOneMenu id="myList" onchange="console.log('selectOneMenu')">
    <f:selectItem itemLabel="val1" itemValue="val1"/>
    <f:selectItem itemLabel="val2" itemValue="val2"/>
</p:selectOneMenu>

所以我的要求是以某種方式將onchange處理程序綁定到上述applyChangeHandler（）函數中的所有p:selectOneMenu 。 或者可以通過Primefaces特定的API手動觸發，也可以使用我希望與大家共享的其他方式。 否則，一種快速的解決方法是改用h:selectOneMenu 。

我的目標是檢測“頁面上未保存的更改”。 因此，以上腳本將被放置在通用模板中，如下所示：

<p:outputPanel id="sc" autoUpdate="true">
    <script type="text/javascript">
        applyChangeHandler();
    </script>
</p:outputPanel>

Answer 1

當框架已經為您提供了這樣的偵聽器時，為什么還要提供其他偵聽器呢？

如果您的目標是使用jQuery，則只需將處理程序放入可從窗口全局范圍訪問的js文件中。

function myChangeHandler(that) {
    //wrap the element with jQuery
    var select = jQuery(that);
    //Get the div parent. The actual wrapper of the `selection-menu` widget markup
    var selectMenu = select.parents('div.ui-selectonemenu');
    //From here I can manipulate any HTML child element using jQuery
    jQuery('label.ui-selectonemenu-label', selectMenu).text('mooo');
}

然后調用您的處理程序onchange ，將selectOneMenu作為參數傳遞

<p:selectOneMenu id="myList" onchange="myChangeHandler(this)">
    <f:selectItem itemLabel="val1" itemValue="val1" />
    <f:selectItem itemLabel="val2" itemValue="val2" />
</p:selectOneMenu>

Answer 2

除了使用onChange之外，您還可以使用“ DOMSubtreeModified”。

這適用於p：selectOneMenu

$(".ui-selectonemenu-label").each(function(index) {
    $(this).on("DOMSubtreeModified", setDirty());
});

也。 如果您想在各處使用相同的通用代碼，則另一種可能的方法是如下重寫SelectOneMenu的原型：

var origTriggerChange = PrimeFaces.widget.SelectOneMenu.prototype.triggerChange;
// if this code has been run already, don't accumulate triggerChangemethods!
if(origTriggerChange.isModified != "true"){
      PrimeFaces.widget.SelectOneMenu.prototype.triggerChange = function(b){
      this.jq.find("select").change();
      origTriggerChange.call(this, b);
   };
   PrimeFaces.widget.SelectOneMenu.prototype.triggerChange.isModified = "true";
}

Answer 3

您需要將widgetVar添加到p：selectOneMenu才能在JS中使用它

<p:selectOneMenu id="myList" onchange="console.log('selectOneMenu')" widgetVar="myList">
  <f:selectItem itemLabel="val1" itemValue="val1"/>
  <f:selectItem itemLabel="val2" itemValue="val2"/>
</p:selectOneMenu>

這會將這段代碼添加到您的頁面

$(function(){
  PrimeFaces.cw("SelectOneMenu","myList",{
       id:"A2:Form:myList",
       effect:"fade"
  })
});

希望這會有所幫助。