Question

Let’s consider this simple code:

<h:form id="myForm">
    <h:inputText id="myInput">
        <a4j:support event="onchange" actionListener="#{myBean.doSomething}"/>
    </h:inputText>
</h:form>

this will generate the following HTML code:

<input id="myForm:myInput" type="text" name="myForm:myInput" onchange="A4J.AJAX.Submit(...)" />

Now, I just add something in the onchange event of my <h:inputText>:

<h:form id="myForm">
    <h:inputText id="myInput" onchange="alert('foobar');">
        <a4j:support event="onchange" actionListener="#{myBean.doSomething}"/>
    </h:inputText>
</h:form>

This will generate the following HTML code:

<input id="myForm:myInput" type="text" name="myForm:myInput" onchange="alert('foobar');" />

As you can see, the Ajax code is not added anymore. This is a really strange behavior as far as I am concerned. Why the <a4j:support> does not attach the Ajax call if the event is already defined in the input field?

So my question is how to make the <a4j:support> working on an event that is already defined in the input? Of course, the solution must run both the Javascript code defined in onchange and the Ajax call.

In others words, I would like to have the following HTML:

<input id="myForm:myInput" type="text" name="myForm:myInput" onchange="alert('foobar'); A4J.AJAX.Submit(...)" />

---

I am using Richfaces 3.3.2 and JSF 1.2

---

EDIT

Of course, I can move the onchange Javascript code in the onsubmit attribute of the <a4j:support>, doing something like that:

<h:inputText id="myInput">
    <a4j:support onsubmit="alert('foobar');" event="onchange" actionListener="#{myBean.doSomething}"/>
</h:inputText>

But is it the only way??

Answer 1

More about the context

In fact, I can’t really modify the event value of the <a4j:support>, like suggesteed by Abel Morelos, because what I am trying to do is to add a custom component that execute some client-side validation. This validation calls a Javascript function, so my custom component modifies the onchange value of his parent.

My JSF code will looks like:

<h:inputText id="myInput">
    <my:validation .../>
    <a4j:support event="onchange" actionListener="#{myBean.doSomething}"/>
</h:inputText>

This code is quite equivalent to the following code, except that the onchange of the <h:inputText> is added automatically by my component:

<h:inputText id="myInput" onchange="if (!checkSomeValidation()) { return false; }">
    <a4j:support event="onchange" actionListener="#{myBean.doSomething}"/>
</h:inputText>

So as you can understand, my custom component directly modifies the onchange event of the <h:inputText>, and due to the problem with <a4j:support>, the Ajax call is not binded to the input component at the end.

---

The solution

When linked to a JSF component, the <a4j:support> will “transform” itself to a facet, whose name is org.ajax4jsf.ajax.SUPPORTxxx, where xxx is the event name. So in my case, the <h:inputText> will have a facet named org.ajax4jsf.ajax.SUPPORTonchange.

So what I do in my Java code of my custom component, is to check if the parent (the <h:inputText> here), has such a facet.

If no, it means that the parent has no <a4j:support event="onchange"/> linked to it. So in this case, I modify the onchange attribute of my <h:inputText/>

If yes, it means that there is a <a4j:support event="onchange"/> linked to the parent. So I modify the facet itself using the following code:

HtmlAjaxSupport facet = (HtmlAjaxSupport) getParent().getFacet("org.ajax4jsf.ajax.SUPPORTonchange");
if (facet != null) {
    facet.setOnsubmit("my Javascript code goes here");
} else {
    getParent().setOnchange("my Javascript goes here");
}