title: How to synchronize a4j:jsFunction and actionListener in Jsf
body: <p>I have following code for execution but it is giving some problem related ajax request. </p>
  
  <p>actionListener Call on Button Click</p>
  
  <pre><code>&lt;a4j:commandButton value="Submit" alt="OligoWalk" styleClass="common_button" onclick="createNewLog();showProgressLayer();" oncomplete="parent.document.getElementById('resultFrm').src ='#{MyResearchView.resultToShow}';parent.reRenderLogSection();" actionListener="#{MyResearchView.executeTool}"&gt;        &lt;f:attribute name="toolClass" value="com.sequerome.service.impl.tools.Oligowalk" /&gt;
  &lt;f:attribute name="toolId" value="#{ToolCustomeFormView.toolId}" /&gt;   &lt;f:attribute name="toolName" value="#{ToolCustomeFormView.toolName}" /&gt;                    &lt;f:attribute name="inputParamFile" value="#{ToolCustomeFormView.inputParamFile}" /&gt;
  &lt;f:attribute name="paramMap" value="#{ToolCustomeFormView.toolParamBean.paramMap}" /&gt;
  &lt;/a4j:commandButton&gt;
  </code></pre>
  
  <p>A4j:jsFunction </p>
  
  <pre><code>&lt;a4j:jsFunction name="createNewLog"
     actionListener="#{MyResearchView.createNewLogEntry}"
     oncomplete="parent.reRenderLogSection();executeTool();"&gt;
     &lt;f:attribute name="toolId" value="#{ToolCustomeFormView.toolId}" /&gt;
     &lt;f:attribute name="toolName" value="#{ToolCustomeFormView.toolName}"/&gt;&lt;/a4j:jsFunction&gt;
  </code></pre>
  
  <ol>
  <li>createNewLog() function has to complete first</li>
  <li>executeTool() function has to complete after that.</li>
  </ol>
  
  <p>Currently it is calling in same way but half of the createNewLog() function execute first then it goes to executeTool() function. Here it take some code for execution and again it moves towards createNewlog() function. After this a createNewLog() get executed then again executeTool() get executed.</p>
  
  <pre><code>&lt;a4j:commandButton value="Submit" alt="OligoWalk" styleClass="common_button" onclick="createNewLog();showProgressLayer();" oncomplete="parent.document.getElementById('resultFrm').src ='#{MyResearchView.resultToShow}';parent.reRenderLogSection();" actionListener="#{MyResearchView.executeTool}"&gt;        &lt;f:attribute name="toolClass" value="com.sequerome.service.impl.tools.Oligowalk" /&gt;
  &lt;f:attribute name="toolId" value="#{ToolCustomeFormView.toolId}" /&gt;   &lt;f:attribute name="toolName" value="#{ToolCustomeFormView.toolName}" /&gt;                    &lt;f:attribute name="inputParamFile" value="#{ToolCustomeFormView.inputParamFile}" /&gt;
  &lt;f:attribute name="paramMap" value="#{ToolCustomeFormView.toolParamBean.paramMap}" /&gt;
  &lt;/a4j:commandButton&gt;
  
  &lt;a4j:jsFunction name="createNewLog"
     actionListener="#{MyResearchView.createNewLogEntry}"
     oncomplete="parent.reRenderLogSection();executeTool();"&gt;
     &lt;f:attribute name="toolId" value="#{ToolCustomeFormView.toolId}" /&gt;
     &lt;f:attribute name="toolName" value="#{ToolCustomeFormView.toolName}"/&gt;&lt;/a4j:jsFunction&gt;
  </code></pre>