手動更換火災事件

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表示的事情createEvent:EventSeatingPlan_input雖然這對我們（和你！）是強制性的，以便知道如何讓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屬性，它返回一個事件處理程序，可以通過appending ()直接調用它。

以下內容適用於<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();
}