Get articles everyday as a email directly to your inbox:

Click to publicize, if you like this article :

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

Possibly Related posts:

1. One visualforce page as an iframe in another visualforce page – Salesforce.com
2. Life Cycle of Visualforce page during GET Request- Salesforce Interview question
3. How to Host S-Control in Visualforce Page
4. Override standard Links with VisualForce pages in Salesforce
5. Passing multiple Parameters in ActionFunction in Visualforce