actionFunction Tag in Visualforce

By using actionFunction 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.

Page:

<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("Lead 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:

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;

    }

}