Calling apex:actionFunction on apex:commandButton's onclick event

Question

Can we call apex:actionFunction on apex:commandButton's onclick event?

Actually i am trying to do this but controller's method is not being called.

i am doing something like below -

 <apex:commandButton title="Apply and Continue" value="Apply and
 Continue" onclick="setState()"/>

Action function is declared like below -

<apex:actionFunction id="setState" action="{!checkClick}" name="setState" >
      <apex:param name="state" assignTo="{!state}" value="update"/>
</apex:actionFunction>

Controller Code -

  public PageReference checkClick() {
      system.assert(false, 'In -' + state);
      return null;  
  }

controller's checkClick is not being called. Page just get refreshed.

Answer 1

You have a race condition here - once the onclick handler completes the command button will continue with its normal flow and submit the form.

Thus both the commandbutton and the actionfunction components will both try to submit the form, and as the commmandbutton goes first I'd expect it to win, although its not an exact science.

If you want to use an actionfunction in this way, you have to stop the normal behavior of the commandbutton. One way to do this is to return false from the onclick handler:

<apex:commandButton title="Apply and Continue" value="Apply and Continue" 
                    onclick="setState(); return false;"/>

Answer 2

Try this instead:

When you define parameter to actionfunction then action javascript accept it as argument.

<apex:page controller="TestActionFunctionWithoutAction">
  <apex:form>

     <apex:commandButton title="Apply and Continue" value="Apply and
         Continue" onclick="setState()" rerender="xyx"/>      
     <apex:actionFunction id="setState" action="{!click}" name="setState" >
      <apex:param name="state" assignTo="{!state}" value="update"/>
     </apex:actionFunction>

  </apex:form>
</apex:page>

Apex:

public class TestActionFunctionWithoutAction
{
   public pagereference click()
   {
     System.assert(false,'That it!');
     System.debug('------------------------------------- ');
     return ApexPages.currentPage();
   }

   public void abc()
   {
   }
}

Result:

Assertion Failed: That it! Error is in expression '{!click}' in page ashcloud:testactionfunction An unexpected error has occurred. Your development organization has been notified.