actionFunction tag in visualforce

actionFunction

What is <apex:actionFunction> tag? This tag defines  JavaScript functions to be called from JavaScript code.  By using this tag you can call controllers methods from java script code using an AJAX request .

This component must be a child of <apex:form> tag. And we cannot place this tag inside an iteration tag like <apex:pageBlockTable> & <apex:repet> now. Earlier we were able to do this.But with api version 23 we cannot place <apex:actionFunction> inside iteration tags.

Here I am providing an example, How to use <apex:actionFunction> tag is visualforce. I have created simple Lead form to enter lead details from custom page. Last name, Company & email are mandatory fields in below page. If any miss those required fields, I am displaying  alert by Javascript and i am calling method from java script to save the record. See below code to understand, how <apex:actionFunction> will work.

Visualforce page code:

<apex:page controller="InsertLeadController" showHeader="false">

<script type="text/javascript">
function validate()
    {
        if(document.getElementById('{!$Component.LF.LDB.Lname}').value == '' || document.getElementById('{!$Component.LF.LDB.comp}').value == '')
        {
            alert("LAST NMAE & Company are requird fields");
        }
        
        else
        {
            CallsubmitLead();
            alert("Account has been inserted");
        }
    }
    
 </script>
    
 <apex:form id="LF">
 <apex:actionFunction action="{!submitLead}" name="CallsubmitLead" reRender="LDB"/>  
 <apex:pageBlock title="Lead Form - Enter lead details" id="LDB"> 
  <table>
  <tr>
  <td><apex:outputText value="First Name"/></td>
  <td><apex:inputText value="{!firstName}"/></td>
  </tr>  
  <tr>
  <td><apex:outputText value="Last Name"/></td>
  <td><apex:inputText value="{!lastName}" id="Lname"/></td>
  </tr>  
  <tr>
  <td><apex:outputText value="Comapany"/></td>
  <td><apex:inputText value="{!comapany}" id="comp"/></td>
  </tr>  
  <tr>
  <td><apex:outputText value="Mobile"/></td>
  <td><apex:inputText value="{!mobile}"/></td>
  </tr>  
  <tr>
  <td><apex:outputText value="Lead Status"/></td>
  <td><apex:selectList value="{!statusOptions}">
  <apex:selectOptions value="{!items}"/>
  </apex:selectList></td>
  </tr>
  </table>  
  <apex:commandButton value="Save" onclick="validate();"/> 
 </apex:pageBlock>  
  </apex:form>
</apex:page>

Controller Code:

public class InsertLeadController {

public String statusOptions { get; set; }
public String comapany { get; set; }
public String mobile { get; set; }
public String firstName{get;set;}
public String lastName{get;set;}
public Lead l = new Lead();

public List<SelectOption> getItems() {

List<SelectOption> options = new List<SelectOption>();
options.add(new SelectOption(‘Open – Not Contacted’,’Open – Not Contacted’));
options.add(new SelectOption(‘Working – Contacted’,’Working – Contacted’));
options.add(new SelectOption(‘Closed – Converted’,’Closed – Converted’));
options.add(new SelectOption(‘Closed – Not Converted’,’Closed – Not Converted’));
return options;
}

public PageReference submitLead() {

l.FirstName=firstName;
l.LastName=lastName;
l.Company=comapany;
l.MobilePhone=mobile;
l.Status=statusOptions;
insert l;
return null;
}
}

In this example, I am calling submitLead methods from javascript.