6

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

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

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

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

所以基本上我有这个按钮来保存一个新值到 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);
    }
}

但这些都不起作用:(

您能告诉我如何实现这一目标吗？

谢谢，泽拉

4

1 回答 1

5

你没有告诉任何关于createEvent:EventSeatingPlan_inputwhile 的 HTML 表示，这对我们（和你！）来说是强制性的，以便知道如何让 JS 拦截它。您没有告诉您是否使用<h:selectOneMenu>or <p:selectOneMenu>，因此我们无法查看生成的 HTML 表示。前者生成一段<select><option>时间，后者生成一个<div><ul><li>与隐藏交互的<select><option>。下拉菜单的两种表示形式都需要 JS 中的不同方法。此外，有关您如何注册change事件处理函数的信息是强制性的。是通过对onchange属性进行硬编码，还是通过嵌入一个<f:ajax>or <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>，因为它返回 aHTMLDivElement而不是HtmlSelectElement。HTMLDivElement没有onchange返回事件处理程序的属性。如前所述，<p:selectOneMenu>生成一个<div><ul><li>与 hidden 交互的小部件<select><option>。你应该在 JS 上下文中注册这个小部件，然后使用它的特殊triggerChange()方法。

所以，给定一个

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

这应该做

function fireChange() {
    w_menu.triggerChange();
}
于 2013-05-31T11:55:33.357 回答