手动更换火灾事件

Question

嘿我手动触发更改事件时遇到问题。

所以我有一个selectOneMenu（就像jsf中的下拉列表）具有不同的值。

如果我选择此下拉列表的值，则应更新数据表。 如果我手动选择此值，这可以正常工作。

现在有一种情况，我需要在selectOneMenu中插入一个新值。 这个新值会自动选中，但更新数据表的change-event不会被触发...

所以基本上我有这个按钮来保存一个新的值到selectOneMenu然后被正确选择，但数据表没有得到更新，这就是为什么我试图写函数fireChange（）并将其赋予按钮的oncomplete ：

<p:commandButton ajax="true" id="seatingPlanSave" actionListener="#{EventAssistentController.createSeatingPlan}" value="#{msg.save}" update=":createEvent:EventSeatingPlan, :createEvent:ticketTypePrices" oncomplete="fireChange()"/>

对于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);
    }
}

但这些都不起作用:(

你能告诉我怎样才能做到这一点吗？

谢谢，Xera

Answer 1

你没有告诉任何关于createEvent:EventSeatingPlan_input的HTML表示的事情createEvent:EventSeatingPlan_input虽然这对我们（和你！）是强制性的，以便知道如何让JS拦截它。 您没有告诉您是否使用<h:selectOneMenu>或<p:selectOneMenu> ，因此我们无法自己查看生成的HTML表示。 前者生成<select><option>而后者生成<div><ul><li> ，它与隐藏的<select><option>交互。 下拉菜单的两种表示都需要JS中的不同方法。 此外，有关如何注册change事件处理函数的信息是必需的。 是通过硬切换onchange属性，还是嵌入<f:ajax>或<p:ajax> ？

无论如何，根据目前提供的信息，我猜你已经有了

<h:selectOneMenu ...>
    <f:ajax render="dataTableId" />
</h:selectOneMenu>

这将生成<select onchange="..."><option> 。

根据您的第一次尝试：

function fireChange() {
    var element = document.getElementById("createEvent:EventSeatingPlan_input");
    element.change();
}

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

以下内容适用于<h:selectOneMenu> ：

function fireChange() {
    var element = document.getElementById("createEvent:EventSeatingPlan_input");
    element.onchange();
}

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

所以，给出一个

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

这应该做

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