Can't define a event and bind an <a4j:support/> on this event at the same time

Question

Hello,

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

If this behaviour is not explicitly documented, I would consider this as a bug in Ajax4jsf. Report it to Ajax4jsf/RichFaces guys over there at JBoss.org. I've seen problems like that before with <a4j:commandButton onclick="someFunction()">

Answer 2

you could add eventlistner on onchange in javascript (maybe even use rich:jquery)

Answer 3

I already had this problem before, and I found that RichFaces 3.3.x will execute only the code for the onchange event defined with a4j:support and will ignore the onchange code defined with the JSF component.

In my case the workaround was simple, for my case it was valid to use other event instead of "onchange" (not sure if it was onclick or onselect), so I attached my code to this other event and my code worked, but I'm not sure if this could work for you. If you really need the onchange event for both elements, you'll have to do just as BalusC said and report it to the RichFaces folks.

Answer 4

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