Why 2 Ajax call are made by a4j

Question

With a simple form when i submit I see 2 request being made for this.

<h:form id="form1">
    <a4j:commandButton value="Send" id="cm1" onclick="sendData(193)"/>
    <a4j:jsFunction name="sendData">
      <a4j:param name="param1" assignTo="#{outageManagementAction.deleteEngineId}" />
    </a4j:jsFunction>
   </h:form>

The code generated by JSF is following...

<form id="form1" name="form1" method="post" action="/moutagev1/faces/pages/xOutageEdit.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="form1" value="form1" />
<input id="form1:cm1" name="form1:cm1" onclick="jsf.util.chain(this,event,&quot;sendData(193)&quot;,&quot;RichFaces.ajax(\&quot;form1:cm1\&quot;,event,{\&quot;incId\&quot;:\&quot;1\&quot;} )&quot;);return false;" value="Send" type="submit" /><span id="form1:j_idt257" style="display: none;"><script type="text/javascript">sendData=function(param1){RichFaces.ajax("form1:j_idt257",null,{"parameters":{"param1":param1} ,"incId":"1"} )};</script></span><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="8425501786648002013:2772799535475824519" autocomplete="off" />
</form>

Any Idea why this is happening...

Answer 1

Well, one request is the standard post of the <h:form> the second one is the custom <a4j:jsFunction> which is chained together with the submit when the click happens.

One solution would be to suppress the standard submit by changing the type of the button like this: <a4j:commandButton type="button" />.

Another alternative would be to not use <a4j:jsFunction> at all. Instead use this:

<f:setPropertyActionListener target="#{outageManagementAction.deleteEngineId}" value="193" />