Salesforce Tutorial – Create Simple Ajax based Visualforce page

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

Posted

in

by


Related Posts

Comments

11 responses to “Salesforce Tutorial – Create Simple Ajax based Visualforce page”

  1. Guest Avatar
    Guest

    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

  2. Sohail Avatar
    Sohail

    Jitendra Sir,

    your way of giving the notes and explanation is excellent. Thank you very much sir

    1. JitendraZaa Avatar
      JitendraZaa

      Thanks Sohail…

      1. unni Avatar
        unni

        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?

  3. Ganesh Avatar
    Ganesh

    I don’t have word to explain not nice but Awesome Tutorial.Thanks

  4. hareesh Avatar
    hareesh

    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

  5. Nitin Wader Avatar
    Nitin Wader

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

    1. Jitendra Zaa Avatar

      Thanks for nice words..

  6. Archita Patnaik Avatar
    Archita Patnaik

    Thank you so much sir for this post. Its very simple and give clear idea about ajax and Visualforce.

  7. Sumit Datta Avatar

    Jitendra Sir,

    This is one of the best description of Ajax based VisualForce Page on the internet, that I have come across .

    Thank you very much for the upload

  8. renil Avatar

    In outputpanel u 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? and where is CurrTime Declared?

    Thank u

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading