Actionstatus & ActionSupport using Visualforce page

Here we used action status & action support.

In this example we are showing some text message to user while AJAX request is in progress using actionstatus component.

It shows some different message once request is complete.

When user will click on ‘Click here for increment’ or ‘Click here for decrement’, then count will be incremented or decremented accordingly.

Apex Controller

public class actionStatusandSupport {
    Integer count = 0;
 
    public PageReference incrementCounter() {
            count++;
            return null;
    }
 
    public PageReference decrementCounter() {
            count--;
            return null;
    }
 
    public Integer getCount() {
        return count;
    }

}

Vf Page

<apex:page controller="actionStatusandSupport">
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection >
                <apex:outputpanel id="panel1">
                    <apex:outputText value="Click here to increment!" style="width:120px;padding:5px;border:5px solid green;margin: 0;"/>
                    <apex:actionSupport event="onclick" action="{!incrementCounter}" rerender="out" status="counterStatus"/>
                    <apex:actionStatus id="counterStatus" startText=" (incrementing...)" stopText=" (done)"/>
                </apex:outputpanel>
 
                <apex:outputpanel id="panel2">
                    <apex:outputText value="Click here to decrement!" style="width:120px;padding:5px;border:5px solid green;margin: 0;"/>
                    <apex:actionSupport event="onclick" action="{!decrementCounter}" rerender="out" status="counterStatus2"/>
                    <apex:actionStatus id="counterStatus2" startText=" (decrementing...)" stopText=" (done)"/>
                </apex:outputpanel>
 
                <apex:outputText value="{!count}" id="out" label="Count Is:"/>
 
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Output