Triggering Primefaces p:selectOneMenu onchange
Triggering Primefaces p:selectOneMenu onchange
似乎Primefaces p:selectOneMenu
组件将呈现的HTML <select>
标签包装在div中,并将所选项目显示为不同的标签。我猜,用户所做的更改通过javascript反映到原始<select>
,导致绑定到<select>
的onchange事件无法工作。因此,我为所有:input
s绑定的onchange事件对p:selectOneMenu
s不起作用。
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>
既然框架已经为您提供了额外的侦听器,为什么还需要提供这些侦听器呢?
如果你的目标是使用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>
您可以使用"DOMSubtreeModified"来代替onChange。
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";
}
您需要将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>
this将此代码添加到您的页面
$(function(){
PrimeFaces.cw("SelectOneMenu","myList",{
id:"A2:Form:myList",
effect:"fade"
})
});
- selectOneMenu - 通过 JavaScript 选择项
- 如何使用 ENTER 键在主要面孔之间导航 selectOneMenu
- SelectOneMenu disable from javascript
- 如何从数据表内的selectOneMenu中删除所选项目
- 使用JS在p:selectOneMenu中选择选项
- 在p:outputLabel中显示p:selectOneMenu说明
- 在SelectOneMenu的更改事件上调用ajax请求之前的确认对话框
- 截断jsf下拉列表h:selectOneMenu中的长文本
- 在onchange事件中,如何通过JavaScript更改PrimeFaces SelectOneMenu的值和显示值
- Triggering Primefaces p:selectOneMenu onchange
- 在Primefaces 3.4.2中出现p:selectOneMenu错误