手动更换火灾事件

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_inputwhile的 HTML 表示，这对我们（和你！）来说是强制性的，以便知道如何让 JS 拦截它。您没有说明您是否在使用<h:selectOneMenu>或<p:selectOneMenu>，因此我们无法在生成的 HTML 表示中查看自己。前者生成<select><option>while 后者生成<div><ul><li>与 hidden 交互的an <select><option>。下拉菜单的两种表示在 JS 中都需要不同的方法。此外，有关您如何注册change事件处理程序函数的信息是强制性的。是通过强化onchange属性，还是通过嵌入 a<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();
}