手动触发change事件

Question

手动触发change事件

javascripteventsjsfprimefacesonchange

6

嘿，我手动触发change事件遇到了问题。

我有一个selectOneMenu（类似于jsf中的下拉菜单），其中包含不同的值。

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

现在有一种情况，我需要向selectOneMenu插入一个新值。这个新值会自动被选择，但是更新datatable的change事件却没有被触发...

所以基本上我有一个按钮来保存一个新值到selectOneMenu，然后正确地选择该值，但是datatable没有被更新，这就是为什么我尝试编写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

- xeraphim

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BalusC · Accepted Answer

你没有提及 createEvent:EventSeatingPlan_input 的HTML表示，而这对于我们来说（以及您自己）是必要的，以便知道如何让JS进行拦截。您也没有说明您是使用 <h:selectOneMenu> 还是 <p:selectOneMenu>，因此我们无法自行查看生成的HTML表示。前者生成 <select><option>，后者生成一个与隐藏的 <select><option> 交互的<div><ul><li>。下拉菜单的这两种表示方式需要不同的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> 生成一个与隐藏的 <select><option> 交互的 <div><ul><li> 小部件。您应该在 JS 上下文中注册此小部件，然后使用其特殊的 triggerChange() 方法。因此，假设给定一个

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

这应该可以做到

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