[英]Fire change-event manually
Hey I've got a problem with fireing a change-event manually. 嘿我手动触发更改事件时遇到问题。
So I have a selectOneMenu (i'ts like a dropdown in jsf) with different values. 所以我有一个selectOneMenu(就像jsf中的下拉列表)具有不同的值。
If I choose a value of this dropdown-list, a datatable should be updated. 如果我选择此下拉列表的值,则应更新数据表。 This works correctly, if i choose this value manually.
如果我手动选择此值,这可以正常工作。
Now there is a case, where I need to insert a new value to the selectOneMenu. 现在有一种情况,我需要在selectOneMenu中插入一个新值。 This new value gets selected automatically, but the change-event to update the datatable doesn't get fired...
这个新值会自动选中,但更新数据表的change-event不会被触发...
So basically I have this button to save a new value to the selectOneMenu which then gets selected correctly, but the datatable doesn't get updated, which is why I tried to write the function fireChange() and gave that to the oncomplete of the button: 所以基本上我有这个按钮来保存一个新的值到selectOneMenu然后被正确选择,但数据表没有得到更新,这就是为什么我试图写函数fireChange()并将其赋予按钮的oncomplete :
<p:commandButton ajax="true" id="seatingPlanSave" actionListener="#{EventAssistentController.createSeatingPlan}" value="#{msg.save}" update=":createEvent:EventSeatingPlan, :createEvent:ticketTypePrices" oncomplete="fireChange()"/>
For the fireChange()-function, i tried a few different things: 对于fireChange() - 函数,我尝试了几个不同的东西:
function fireChange() {
var element = document.getElementById("createEvent:EventSeatingPlan_input");
element.change();
}
function fireChange() {
var element = document.getElementById("createEvent:EventSeatingPlan_input");
$(element).trigger("change");
}
function fireChange() {
if ("fireEvent" in element)
element.fireEvent("onchange");
else {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
element.dispatchEvent(evt);
}
}
But none of these work :( 但这些都不起作用:(
Can you please tell me how I can achieve this? 你能告诉我怎样才能做到这一点吗?
Thanks, Xera 谢谢,Xera
You didn't tell anything about the HTML representation of createEvent:EventSeatingPlan_input
while that's mandatory for us (and you!) in order to know how to let JS intercept on that. 你没有告诉任何关于
createEvent:EventSeatingPlan_input
的HTML表示的事情createEvent:EventSeatingPlan_input
虽然这对我们(和你!)是强制性的,以便知道如何让JS拦截它。 You didn't tell either if you were using <h:selectOneMenu>
or <p:selectOneMenu>
, so we can't take a look ourselves in the generated HTML representation. 您没有告诉您是否使用
<h:selectOneMenu>
或<p:selectOneMenu>
,因此我们无法自己查看生成的HTML表示。 The former generates a <select><option>
while the latter generates an <div><ul><li>
which interacts with a hidden <select><option>
. 前者生成
<select><option>
而后者生成<div><ul><li>
,它与隐藏的<select><option>
交互。 Both representations of dropdown menus require a different approach in JS. 下拉菜单的两种表示都需要JS中的不同方法。 Also, information about how you're registering the
change
event handler function is mandatory. 此外,有关如何注册
change
事件处理函数的信息是必需的。 Is it by hardocing the onchange
attribute, or by embedding a <f:ajax>
or <p:ajax>
? 是通过硬切换
onchange
属性,还是嵌入<f:ajax>
或<p:ajax>
?
In any way, based on the information provided so far, I'll guess that you've a 无论如何,根据目前提供的信息,我猜你已经有了
<h:selectOneMenu ...>
<f:ajax render="dataTableId" />
</h:selectOneMenu>
which will generate a <select onchange="..."><option>
. 这将生成
<select onchange="..."><option>
。
As per your first attempt: 根据您的第一次尝试:
function fireChange() {
var element = document.getElementById("createEvent:EventSeatingPlan_input");
element.change();
}
This will fail on <h:selectOneMenu>
because HTMLSelectElement
interface doesn't have a change
property nor method. 这将在
<h:selectOneMenu>
上失败,因为HTMLSelectElement
接口没有change
属性或方法。 Instead, it is onchange
property which returns a event handler which can directly be invoked by appending ()
. 相反,它是
onchange
属性,它返回一个事件处理程序,可以通过appending ()
直接调用它。
The following will work on <h:selectOneMenu>
: 以下内容适用于
<h:selectOneMenu>
:
function fireChange() {
var element = document.getElementById("createEvent:EventSeatingPlan_input");
element.onchange();
}
However this will in turn fail in <p:selectOneMenu>
, because it returns a HTMLDivElement
instead of HtmlSelectElement
. 但是,这将在
<p:selectOneMenu>
失败,因为它返回HTMLDivElement
而不是HtmlSelectElement
。 The HTMLDivElement
doesn't have a onchange
property which returns an event handler. HTMLDivElement
没有返回事件处理程序的onchange
属性。 As said, the <p:selectOneMenu>
generates a <div><ul><li>
widget which interacts with a hidden <select><option>
. 如上所述,
<p:selectOneMenu>
生成一个<div><ul><li>
小部件,它与隐藏的<select><option>
交互。 You should be registering this widget in JS context and then use its special triggerChange()
method. 您应该在JS上下文中注册此小部件,然后使用其特殊的
triggerChange()
方法。
So, given a 所以,给出一个
<p:selectOneMenu widgetVar="w_menu" ...>
<p:ajax update="dateTableId" />
</p:selectOneMenu>
this should do 这应该做
function fireChange() {
w_menu.triggerChange();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.