Manual fire change event

Question

Hi, I have a problem with manually changing the change event.

So, I have selectOneMenu (as a dropdown menu in jsf) with different values.

If I select the value of this dropdown, the datatable needs to be updated. This works correctly if I select this value manually.

Now there is a case where I need to insert a new value into selectOneMenu. This new value is automatically selected, but the change-event to update the datatable data does not start ...

So basically I have this button to save the new selectOneMenu value, which is then selected correctly, but the data is not updated, so I tried to write the fireChange () function and gave this to the unfinished 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 several 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 works: (

Could you tell me how I can achieve this?

Thanks, Xera

Answer 1

You did not report anything about the HTML representation of createEvent:EventSeatingPlan_input , while it is mandatory for us (and you!) To know how to enable JS interception. You also did not say whether you are using <h:selectOneMenu> or <p:selectOneMenu> , so we cannot look into the generated HTML view. The former generates a <select><option> , and the latter generates a <div><ul><li> , which interacts with a hidden <select><option> . Both representations of dropdown menus require a different approach in JS. In addition, information about how you register the change event handler function is required. Is this by binding the onchange attribute or by nesting a <f:ajax> or <p:ajax> ?

In any case, based on the information provided, I’ll guess that you have

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

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

According to your first attempt:

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

This will not work on <h:selectOneMenu> , because the HTMLSelectElement interface does not have a change property or method. Instead, this onchange property returns an event handler that can be called directly by adding () .

In <h:selectOneMenu> following will work:

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

However, this in turn will fail in <p:selectOneMenu> because it returns an HTMLDivElement instead of an HTMLSelectElement . HTMLDivElement does not have an onchange property that returns an event handler. As said, <p:selectOneMenu> creates a <div><ul><li> widget that interacts with a hidden <select><option> . You must register this widget in a JS context and then use its special triggerChange() method.

So, given

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

it should do

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