Calling Ajax in VisualForce Apex

Posted on 20-02-2013 16:06 by graham
This tutorial describes how to perform an Ajax call on a VisualForce page.

Building your page


You start with building your VF page. Below is a simple example:
SomeView.page
<apex:page controller="SomeController">

<apex:form>

<!-- this panel will be reloaded when the Ajax action executes -->
<apex:outputPanel id="message">
<apex:outputText value="{!message}"></apex:outputText>
</apex:outputPanel>

<apex:commandLink value="Show message" action="{!showMessage}" rerender="message"></apex:commandLink>

</apex:form>

</apex:page>

Note the most important part - the rerender attribute on the commandLink. It tells the page to reload the contents of the message panel once the Ajax action has finished executing.

Build the controller


The page above uses SomeController.cls for processing the actions, so we need to build it as well:
SomeController.cls
public class SomeController
{
public String message { get; private set; }

public PageReference showMessage()
{
this.message = 'Hello from an Ajax call';
}
}

And that's all. Now, once the "Show Message" link is clicked, the contents of the message panel will be reloaded, and the message defined in the controller displayed.
Comments

 

Add comment

Has this tutorial been helpful to you? Or do you see anything wrong? We appreciate your opinion!
Your comment:
Show formatting hints
HTML is disallowed, but in your text you can use the following markup
  • [code][/code] for a block of code
  • [tt][/tt] for inline code
  • [link]link href|link anchor[/link] for links
  • [b][/b] for bold text
Email:
+ Ask a question
If you have a technical question related to programming and computers, ask it here. Other users will help you solve it!
Unanswered questions
Share your knowledge by helping others solve their problems