Chris Chris - 1 month ago 4
Javascript Question

On change event doesn't get executed when input value is programatically changed

I have problem refreshing dataTable content. Here is a portion of my code.

<h:inputText id="counterFeatures" value="#{myBean.quantity}">
<f:ajax event="change" render="myDataTable" execute="counterFeatures"></f:ajax>

What I like to do is when the quantity changes (dynamically with js script), call the
method from my bean and update that value.

I tried with
but it doesn't work too. And I need to say that it work when I set the event like
but I want to make things happen automatically, cause after all the number is inserted there via JavaScript script.

I looked at some answer but I couldn't make it work due to my limited knowledge of jsf.

Thanks in advance


This is indeed normal behavior. The HTML DOM change event is only fired after enduser manipulation of the input field. In case the input field is programmatically manipulated by JavaScript, you basically need to let the very same JavaScript code manually trigger the change event.

Assuming that you're using Vanilla JS (not jQuery), here's how it looks like:

var input = document.getElementById(...);
input.value = newValue;
input.onchange(); // Trigger JavaScript code declared in `onchange` attribute.