Javascript 触发Primefaces p:selectOneMenu onchange
似乎PrimefacesJavascript 触发Primefaces p:selectOneMenu onchange,javascript,jquery,jsf-2,primefaces,Javascript,Jquery,Jsf 2,Primefaces,似乎Primefacesp:selectOneMenu组件将呈现的HTML标记包装在一个div中,并将所选项目显示为不同的标签。我猜,用户所做的更改会通过javascript反映到原始的,从而导致绑定到的onchange事件无法工作。因此,我对所有的onchange事件的以下绑定:inputs不适用于p:selectOneMenus function applyChangeHandler() { $(':input').on('change', function() {
p:selectOneMenu
组件将呈现的HTML
标记包装在一个div中,并将所选项目显示为不同的标签。我猜,用户所做的更改会通过javascript反映到原始的
,从而导致绑定到
的onchange事件无法工作。因此,我对所有的onchange事件的以下绑定:input
s不适用于p:selectOneMenu
s
function applyChangeHandler() {
$(':input').on('change', function() {
console.log('on change: ' + this.id);
});
}
但是,p:selectOneMenu
的onchange属性被激发。所以Primefaces会触发引擎盖下的处理器(我猜也是这样)
既然框架已经为您提供了这样的侦听器,为什么还需要提供额外的侦听器呢 如果您的目标是使用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>
既然框架已经为您提供了这些监听器,为什么还需要提供其他监听器 如果您的目标是使用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";
}
您可以使用“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>
希望这会有所帮助。您需要将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>
希望这会有所帮助。我的目标是检测“页面上未保存的更改”。因此,onchange事件绑定到页面中的所有*:输入。脚本将被放置在一个公共模板中。在所有页面中的每个p:SelectOne菜单上都放置一个changehandler当前不太理想。我的目标是检测“页面上未保存的更改”。因此,onchange事件绑定到页面中的所有*:输入。脚本将被放置在一个公共模板中。在所有页面中的每个p:SelectOne菜单上都放置一个changehandler,这在当前是不太理想的。