learning ‘apex:actionSupport’

<apex:actionSupport> is a standard VisualForce 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. For example, the commandButton component has the inbuilt AJAX support but others such as outputText component does not have – so we can use actionSupport in outputText  to add the AJAX support. An <apex:actionSupport> component must be a child of an <apex:form> component. It allows us to do partial page refresh asynchronously without refreshing  full page. It is different from <apex:actionFunction>, which defines a new JavaScript function which can then be called from within a block of JavaScript code.

The below code snippet explains the functionality of how it works – In the VisualForce code, I used actionSupport to add the AJAX functionality to the outputText component which has an appearance as button. When the button(or text) is clicked, the action method of the controller(incrementCount/decrementCount) is called as the event is set to ‘onclick‘. After the AJAX request (controller method here) completes –  we are using another attibute reRender, which refreshes only the section of the page with id ‘output’ and displays required information.

Click here for demo

VisualForce code :

Apex Controller :

Feel Free to provide your valuable comments or point out any issues or scope of improvement in the above post.