Salesforce Tutorial – Create Simple Ajax based Visualforce page

Salesforce Tutorial – Step by step tutorial to create AJAX based application in visualforce page with Apex class

Hello friends,
This time i am going to create very simple AJAX based visual force page for the beginners.

What is AJAX?

As many of you already know that the AJAX stands for the “Asynchronous javascript and XML“.

AJAX is the art of exchanging data between server and client without reloading the complete web page.

Visualforce and AJAX

Visualforce has inbuilt support for the AJAX. using the attribute “rerender” we can specify that where the response should be rendered.

Example:
Lets have an example to demonstrate that how simple AJAX works in visualforce.
Create an APEX class with following code.

public class AjaxDemo {

    private String currTime;
    public String getCurrTime()
    {
        return currTime;
    }
    public void setCurrTime()
    {
        currTime = System.now().format('EEEE, MMMM d, yyyy - hh:mm:ss');
    }
}

As you can see in above Apex class, i have created method named “setCurrTime()” which will set the value of string variable. There is also one get method named as “getCurrTime()” which returns the value of that variable.

On the basis of above Apex class lets create Visualforce page with below code.

<apex:page Controller="AjaxDemo">
<apex:pageBlock Title="Ajax Sample">
Hello <b> {!$User.FirstName}</b>.
<apex:form >
<br /><br />
<apex:commandbutton action="{!setCurrTime}" rerender="ajaxresult" value="Display Current Time" />

</apex:form>
</apex:pageBlock>

<apex:pageBlock title="AjaxData">
  <apex:outputPanel id="ajaxresult" layout="block">
    Result: {!CurrTime}
  </apex:outputPanel>
</apex:pageBlock>

</apex:page>

There are few points to observe from above visualforce page

  • Apex class earlier created is referenced using attribute “Controller” of “apex:page” tag.
  • On “apex:commandbutton” we have specified that after clicking on button which method of the class should be called using attribute “action“.
  • After the action completion of commandbutton which part of the apex page should gets refreshed is specified by attribute “rerender“.
  • in outputpanel i have specified that which method should gets executed to get the result by simply giving the method name. In this case its {!CurrTime}

Output would look like:

Simple AJAX demo in salesforce using visualforce
Simple AJAX demo in salesforce using visualforce

Related posts

10 thoughts on “Salesforce Tutorial – Create Simple Ajax based Visualforce page”

  1. iam very thankful to u sir for explain Ajax tutorial…………..

    plz give some basic tutorial about Webservices in Apex……..i mean some simple understood progrms

      1. in outputpanel i have specified that which method should gets executed to get the result by simply giving the method name. In this case its {!CurrTime}

        How its a method?

  2. i createds one Student object in that i
    have Firstname,username,password ,email so once student registered with
    xyz username when another student try to register with same username
    beforce clicking save button only need to check existed username
    same as bellow link using apex vf and ajax please help on this
    http://phpseason.wordpress.com/2013/02/17/live-username-availability-checking-using-ajax-and-jquery/

    like
    if ur registering gmail with exsting user name it gives imediate
    validation this username exist please try with another username

  3. This is by far the best explanation on using Ajax in VF. You should be consultant to SFDC documentation team. Hats Off !

Leave a Reply

Your email address will not be published. Required fields are marked *