Using actionStatus to disable button in visualforce

Question

I'm trying to disable in a visualforce page a custom button after clicking once. Admittedly, I'm newer to v-force pages than apex, so I don't fully understand what's going on here. But, after some research, I believe using the actionStatus tag is the preferred method. (I tried using onClick="this.disabled=true", but my controller methods weren't firing.) Anyway, this is what I'm trying to do:

<apex:actionStatus id="addPaymentPlanStatus">
  <apex:facet name="stop">
      <apex:commandButton action="{!doSubmit}" status="addPaymentPlanStatus" value="Set Up Payment Plan"
                        styleClass="pay-staff-button" rendered="{!(planType != null) && chargeGroupsSelected}" />
  </apex:facet>
  <apex:facet name="start">
      <apex:commandButton disabled="true" value="Adding Plan ..." styleClass="pay-staff-button" />
  </apex:facet>
</apex:actionStatus>

The functionality still works, but the button's status doesn't change after a click. Would anyone like to help me figure out what I'm missing here?

Thank you.

Answer 1

"Lame" version, useful only if you have one button. Disable it on start, enable back when the call finishes. Actual "submit" happens in an action function (piece of JavaScript capable to call Apex, pass parameters just like any normal commandButton can), you'd have to read up a bit about them.

<apex:commandButton value="{!$Label.Save_and_New}" onclick="submitForm(this)" oncomplete="saveFinished(this)"/>

function submitForm(obj){
    if(obj.className == 'btn'){
        saveAndNewActionFunction();
        obj.disabled = 'disabled';
        obj.className = 'btnDisabled';
    } // no else clause - it's just a double click prevention to not create duplicate cases
}
function saveFinished(obj){
    obj.disabled = null;
    obj.className = 'btn';
}

---

"Pro" version - bit more code to write but it's all pure VF, no JavaScript.

<apex:pageBlockButtons location="top">
    <apex:actionStatus id="status">
        <apex:facet name="stop">
            <apex:outputPanel >
                <apex:commandButton value="Preview" action="{!preview}" rerender="controls,preview" status="status"/>
                <apex:commandButton value="Export" action="{!export}" status="status"/>
                <apex:commandButton value="Cancel" action="{!cancel}" immediate="true" />
            </apex:outputPanel>
        </apex:facet>
        <apex:facet name="start">
            <apex:outputPanel >
                <apex:commandButton value="Preview" disabled="true"/>
                <apex:commandButton value="Export" disabled="true"/>
                <apex:commandButton value="Cancel" action="{!cancel}" immediate="true" />
                <img id="status" src="/img/loading.gif" alt="Loading..." title="Loading..."/>
            </apex:outputPanel>
        </apex:facet>
    </apex:actionStatus>
</apex:pageBlockButtons>

Bonus spinning wheel ;)

Answer 2

That's not very clear, but I guess you want your second button to be enabled when you click the first.

If so, you need to add a variable in your controller :

public Boolean btnEnabled { get; set; }
public PageReference doSubmit(){
    //...
    btnEnabled = true;
    //...
}

and in your page :

<apex:facet name="start">
    <apex:commandButton disabled value="Adding Plan ..." styleClass="pay-staff-button" rendered="{!!btnEnabled}" />
    <apex:commandButton disabled value="Adding Plan ..." styleClass="pay-staff-button" rendered="{!btnEnabled}" />
</apex:facet>

(Note the two ! in the first button, one is for visualforce reference, one for negation)

If you don't want to duplicate the button you can write a javascript that enables it onload if btnEnable==true

I don't think you can write directly disabled="{!!btnEnabled}" because I think in html disabled="false" doesn't work.

@see https://www.w3schools.com/TAgs/att_button_disabled.asp