Trigger the change-event by hand

Question

Trigger the change-event by hand

Hey there, I'm facing an issue with manually triggering a change event.

Currently, I have a selectOneMenu (similar to a dropdown in JSF) with various values.

When I select a value from this dropdown list, a datatable is supposed to be updated. This works as expected when I manually choose a value.

However, there's a scenario where I need to add a new value to the selectOneMenu. While this new value gets automatically selected, the change event required to update the datatable doesn't get triggered...

Essentially, I have a button to save a new value to the selectOneMenu, which then gets selected correctly. But the datatable does not update, prompting me to create the function fireChange() and assigning it to the oncomplete attribute of the button:

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

I've attempted various implementations for the fireChange() function:

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

Unfortunately, none of these solutions seem to work. Could you please provide guidance on how I can achieve this?

Thank you, Xera

javascript events jsf primefaces onchange

Answer 1

Answer №1

You have not provided any information about how the HTML representation of

createEvent:EventSeatingPlan_input

which is essential for us to know in order to correctly implement JavaScript interception. There was no mention of whether you are using <h:selectOneMenu> or <p:selectOneMenu>, making it impossible for us to examine the generated HTML representation ourselves. The former generates a <select><option>, while the latter generates a <div><ul><li> structure that interacts with a hidden <select><option>. Different approaches are required for handling dropdown menus based on their representations in JS. Additionally, details on how the change event handler function is registered are necessary. Is it done by hardcoding the onchange attribute, or by using <f:ajax> or <p:ajax>?

Based on the information provided, I will make an assumption:

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

This configuration will produce a

<select onchange="..."><option>

.

Regarding your initial attempt:

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

This method won't work for <h:selectOneMenu> because the HTMLSelectElement interface does not contain a change property or method. Instead, the correct approach is to use the onchange property that returns an event handler which can be directly invoked by adding ().

The following code snippet will work for <h:selectOneMenu>:

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

However, this method will fail for <p:selectOneMenu> as it returns a HTMLDivElement instead of an HTMLSelectElement. The HTMLDivElement does not have an onchange property that returns an event handler. In the case of <p:selectOneMenu>, which generates a <div><ul><li> widget interacting with a hidden <select><option>, you need to register this widget within the JavaScript context and then utilize its special triggerChange() method.

For example, given:

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

You should use the following function:

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

Answer 2

You have not provided any information about how the HTML representation of

createEvent:EventSeatingPlan_input

which is essential for us to know in order to correctly implement JavaScript interception. There was no mention of whether you are using <h:selectOneMenu> or <p:selectOneMenu>, making it impossible for us to examine the generated HTML representation ourselves. The former generates a <select><option>, while the latter generates a <div><ul><li> structure that interacts with a hidden <select><option>. Different approaches are required for handling dropdown menus based on their representations in JS. Additionally, details on how the change event handler function is registered are necessary. Is it done by hardcoding the onchange attribute, or by using <f:ajax> or <p:ajax>?

Based on the information provided, I will make an assumption:

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

This configuration will produce a

<select onchange="..."><option>

.

Regarding your initial attempt:

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

This method won't work for <h:selectOneMenu> because the HTMLSelectElement interface does not contain a change property or method. Instead, the correct approach is to use the onchange property that returns an event handler which can be directly invoked by adding ().

The following code snippet will work for <h:selectOneMenu>:

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

However, this method will fail for <p:selectOneMenu> as it returns a HTMLDivElement instead of an HTMLSelectElement. The HTMLDivElement does not have an onchange property that returns an event handler. In the case of <p:selectOneMenu>, which generates a <div><ul><li> widget interacting with a hidden <select><option>, you need to register this widget within the JavaScript context and then utilize its special triggerChange() method.

For example, given:

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

You should use the following function:

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

Trigger the change-event by hand

Answer №1

Similar questions

When should vuex be used for storing data instead of relying on local component data?

The installed NPM package does not contain the necessary TypeScript compiled JS files and declaration files

Assigning event to the body element

Using Javascript to Conceal Button for Unauthenticated Users

Having trouble with the functionality of the jQuery `has()` method?

Tips for resetting the form input fields in Vue.js after the user has successfully submitted the form

What is the best way to load an ExtJS combobox with a JSON object that includes an array

Display various MongoDB datasets in a single Express route

Transfer only certain directories located within the primary directory

Setting innerHTML does not affect the content of an SVG element

Unlocking request header field access-control-allow-origin on VueJS

Using jQuery and regex to validate a long string containing lowercase letters, uppercase letters, numbers, special characters, and

What is the best way to add table pagination at the bottom of a table?

When working with an array of objects in Vue.js, what is the optimal approach: replacing the entire array or modifying individual values?

Combining the value of $(this) to create an identifier name

The HSET command in the Redis client for Node.js is not working

Javascript only select values from the initial row of the table

Utilizing cheerio to set outerHTML in HTML

Using static assets within VueJS Components

"Using regular expressions in a MongoDB find() query does not provide the desired