Fire change-event manually

Question

Hey I've got a problem with fireing a change-event manually.

So I have a selectOneMenu (i'ts like a dropdown in jsf) with different values.

If I choose a value of this dropdown-list, a datatable should be updated. This works correctly, if i choose this value manually.

Now there is a case, where I need to insert a new value to the selectOneMenu. This new value gets selected automatically, but the change-event to update the datatable doesn't get fired...

So basically I have this button to save a new value to the selectOneMenu which then gets selected correctly, but the datatable doesn't get updated, which is why I tried to write the function fireChange() and gave that to the oncomplete of the button:

<p:commandButton ajax="true" id="seatingPlanSave" actionListener="#{EventAssistentController.createSeatingPlan}" value="#{msg.save}" update=":createEvent:EventSeatingPlan, :createEvent:ticketTypePrices" oncomplete="fireChange()"/>

For the fireChange()-function, i tried a few different things:

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);
    }
}

But none of these work :(

Can you please tell me how I can achieve this?

Thanks, Xera

Answer 1

You didn't tell anything about the HTML representation of createEvent:EventSeatingPlan_input while that's mandatory for us (and you!) in order to know how to let JS intercept on that. You didn't tell either if you were using <h:selectOneMenu> or <p:selectOneMenu>, so we can't take a look ourselves in the generated HTML representation. The former generates a <select><option> while the latter generates an <div><ul><li> which interacts with a hidden <select><option>. Both representations of dropdown menus require a different approach in JS. Also, information about how you're registering the change event handler function is mandatory. Is it by hardocing the onchange attribute, or by embedding a <f:ajax> or <p:ajax>?

In any way, based on the information provided so far, I'll guess that you've a

<h:selectOneMenu ...>
    <f:ajax render="dataTableId" />
</h:selectOneMenu>

which will generate a <select onchange="..."><option>.

As per your first attempt:

function fireChange() {
    var element = document.getElementById("createEvent:EventSeatingPlan_input");
    element.change();
}

This will fail on <h:selectOneMenu> because HTMLSelectElement interface doesn't have a change property nor method. Instead, it is onchange property which returns a event handler which can directly be invoked by appending ().

The following will work on <h:selectOneMenu>:

function fireChange() {
    var element = document.getElementById("createEvent:EventSeatingPlan_input");
    element.onchange();
}

However this will in turn fail in <p:selectOneMenu>, because it returns a HTMLDivElement instead of HtmlSelectElement. The HTMLDivElement doesn't have a onchange property which returns an event handler. As said, the <p:selectOneMenu> generates a <div><ul><li> widget which interacts with a hidden <select><option>. You should be registering this widget in JS context and then use its special triggerChange() method.

So, given a

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

this should do

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