javascript 手动触发更改事件

Fire change-event manually

提问by xeraphim

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. This new value gets selected automatically, but the change-event to update the datatable doesn't get fired...

现在有一种情况，我需要向 selectOneMenu 插入一个新值。这个新值会被自动选择，但不会触发更新数据表的更改事件......

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

谢谢，泽拉

采纳答案by BalusC

You didn't tell anything about the HTML representation of createEvent:EventSeatingPlan_inputwhile that's mandatory for us (and you!) in order to know how to let JS intercept on that. 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. The former generates a <select><option>while the latter generates an <div><ul><li>which interacts with a hidden <select><option>. Both representations of dropdown menus require a different approach in JS. Also, information about how you're registering the changeevent handler function is mandatory. Is it by hardocing the onchangeattribute, or by embedding a <f:ajax>or <p:ajax>?

createEvent:EventSeatingPlan_input为了知道如何让 JS 拦截它，您没有告诉我们（和您！）必须使用的 HTML 表示形式。您没有说明您是否在使用<h:selectOneMenu>或<p:selectOneMenu>，因此我们无法在生成的 HTML 表示中查看自己。前者生成<select><option>while 后者生成<div><ul><li>与 hidden 交互的an <select><option>。下拉菜单的两种表示在 JS 中都需要不同的方法。此外，有关您如何注册change事件处理程序函数的信息是强制性的。是通过强化onchange属性，还是通过嵌入 a<f:ajax>或<p:ajax>？

In any way, based on the information provided so far, I'll guessthat 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 HTMLSelectElementinterface doesn't have a changeproperty nor method. Instead, it is onchangeproperty which returns a event handler which can directly be invoked by appending ().

这将失败，<h:selectOneMenu>因为HTMLSelectElement接口没有change属性或方法。相反，它是onchange返回一个事件处理程序的属性，可以通过附加().

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 HTMLDivElementinstead of HtmlSelectElement. The HTMLDivElementdoesn't have a onchangeproperty which returns an event handler. As said, the <p:selectOneMenu>generates a <div><ul><li>widget which interacts with a hidden <select><option>. You should be registering this widget in JS context and then use its special triggerChange()method.

但是，这将反过来失败<p:selectOneMenu>，因为它返回一个HTMLDivElement而不是HtmlSelectElement。在HTMLDivElement没有一个onchange返回的事件处理程序属性。如上所述，<p:selectOneMenu>生成一个<div><ul><li>与隐藏的<select><option>. 你应该在 JS 上下文中注册这个小部件，然后使用它的特殊triggerChange()方法。

So, given a

所以，给定一个

<p:selectOneMenu widgetVar="w_menu" ...>
    <p:ajax update="dateTableId" />
</p:selectOneMenu>

this should do

这应该做

function fireChange() {
    w_menu.triggerChange();
}