1

Primefacesp:selectOneMenuコンポーネントは、レンダリングされた HTML<select>タグを div でラップし、選択したアイテムを別のラベルとして表示しているようです。ユーザーが行った変更は、おそらくjavascriptによって元に反映され<select>、onchangeイベントがバインドされて機能し<select>なくなります。したがって、すべての s に対する onchange イベントの次のバインドは、:inputs に対して機能しませんp:selectOneMenu。

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

ただし、の onchange 属性が発生していますp:selectOneMenu。そのため、Primefaces は内部でこのハンドラーをトリガーします (これも推測です)。

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

したがって、私の要件は、p:selectOneMenu上記の applyChangeHandler() 関数から onchange ハンドラーをすべての s にバインドすることです。または、Primefaces 固有の API を使用して手動でトリガーするか、他の方法でトリガーすることもできます。それ以外の場合は、代わりに使用することで簡単に回避できますh:selectOneMenu。

私の目標は、「ページ上の未保存の変更」を検出することです。したがって、上記のスクリプトは次のように共通のテンプレートに配置されます。

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

3 に答える 3

1

フレームワークがすでにリスナーを提供しているのに、なぜ追加のリスナーを提供する必要があるのでしょうか?

目標が jQuery を使用することである場合は、window グローバル スコープからアクセス可能な 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');
}

次に、 as パラメータonchangeを渡してハンドラを呼び出しますselectOneMenu

<p:selectOneMenu id="myList" onchange="myChangeHandler(this)">
    <f:selectItem itemLabel="val1" itemValue="val1" />
    <f:selectItem itemLabel="val2" itemValue="val2" />
</p:selectOneMenu>
于 2013-01-22T14:13:12.400 に答える
0

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";
}
于 2013-09-03T09:46:02.243 に答える
0

JSで使用するには、widgetVarをp:selectOneMenuに追加する必要があります。

<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"
  })
});

これが役立つことを願っています。

于 2013-09-15T13:03:07.393 に答える