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表示的内容，而这对我们（以及你！）是强制性的，以便知道如何让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属性，它返回一个事件处理程序，可以通过附加()直接调用它。

以下内容适用于<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();
}

手动更换火灾事件

1 个答案: