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 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;
}
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;
}
}
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.
Post a Comment