javascript - 手动触发变更事件

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

所以我有一个具有不同值的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);
    }
}

但是这些都不起作用:(

您能告诉我如何实现吗？

谢谢，Xera

最佳答案

您没有透露有关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 接口(interface)没有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();
}

关于javascript - 手动触发变更事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16853768/