How to Use Apex:actionSupport tag in Visualforce Page.
<apex:actionSupport>A component that adds AJAX support to another component, allowing the component to be refreshed asynchronously by the server when a particular event occurs, such as a button click or mouseover.
actionSupport component adds AJAX support to other components in visualforce. It allows components to be refreshed asynchronously by calling the controller’s method when any event occurs (like click on button). It allows us to do partial page refresh asynchronously without refreshing full page.
In the example below, initially count value is set to 0. But when we will click on ‘Click here to increment! ‘, then controller action method will be called and count will be incremented. Also outputText component will be rendered without refreshing complete page.
Similarly when we will click on ‘Click here to decrement!’, then controller action method will be called and count will be decremented. Also outputText component will be rendered without refreshing complete page.
apex:actionSupport has following attributes in our example:
- action: action attribute specifies the controllers action method that will be invoked when event occurs.
- event: It is DOM event that generates AJAX request
- reRender: It is comma separated id’s of components that needs to be partially refreshed. In our example, we have given its value as ‘out’. So component with ‘out’ id will be refreshed without refreshing complete page.
Attribute
|
Description
|
action
|
The action method invoked by the AJAX request to the server. Use merge-field
syntax to reference the method. For example,
action="{!incrementCounter}" references the incrementCounter()
method in the controller. If an action is not specified, the page simply
refreshes.
|
disabled
|
A Boolean value that allows you to disable the component. When set to
"true", the action is not invoked when the event is fired.
|
disableDefault
|
A Boolean value that specifies whether the default browser processing
should be skipped for the associated event. If set to true, this processing
is skipped. If not specified, this value defaults to true.
|
event
|
The DOM event that generates the AJAX request. Possible values
include "onblur", "onchange", "onclick",
"ondblclick", "onfocus", "onkeydown",
"onkeypress", "onkeyup", "onmousedown",
"onmousemove", "onmouseout", "onmouseover",
"onmouseup", "onselect", and so on.
|
focus
|
The ID of the component that is in focus after
the AJAX request completes.
|
id
|
An identifier that allows the component to be referenced by other
components in the page.
|
immediate
|
A Boolean value that specifies whether the action associated with
this component should happen immediately, without processing any validation
rules associated with the fields on the page. If set to true, the action
happens immediately and validation rules are skipped. If not specified, this
value defaults to false.
|
onbeforedomupdate
|
The JavaScript invoked when the onbeforedomupdate event occurs--that
is, when the AJAX request has been processed, but before the browser's DOM is
updated.
|
oncomplete
|
The JavaScript invoked when the result of an AJAX update request
completes on the client.
|
onsubmit
|
The JavaScript invoked before an AJAX update
request has been sent to the server.
|
rendered
|
A Boolean value that specifies whether the
component is rendered on the page. If not specified, this value defaults to
true.
|
reRender
|
The ID of one or more components that are redrawn when the result of
an AJAX update request returns to the client. This value can be a single ID,
a comma-separated list of IDs, or a merge field expression for a list or
collection of IDs.
|
status
|
The ID of an associated component that displays the status of an AJAX
update request. See the actionStatus component.
|
timeout
|
The amount of time (in milliseconds) before an AJAX update request
should time out.
|
Example 1 :
<apex:page controller="actionSupportController">
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
<apex:outputpanel id="panel1">
<apex:outputText value="Click here to increment!"/>
<apex:actionSupport event="onclick" action="{!incrementCounter}" rerender="out"/>
</apex:outputpanel>
<apex:outputpanel id="panel2">
<apex:outputText value="Click here to decrement!"/>
<apex:actionSupport event="onclick" action="{!decrementCounter}" rerender="out"/>
</apex:outputpanel>
<apex:outputText value="{!count}" id="out" label="Count Is:"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Controller :
public class actionSupportController {
Integer count = 0;
public PageReference incrementCounter() {
count++;
return null;
}
public PageReference decrementCounter() {
count--;
return null;
}
public Integer getCount() {
return count;
}
}
Example 2:
http://sfdcsrini.blogspot.com/2014/08/simple-ajax-example-using-visualforce.html
Example 3:
http://sfdcsrini.blogspot.com/2014/09/what-is-action-support-salesforce.html
