1

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.

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 ;) enter image description here

  • When I look at this, I see that I have a lot of the same elements that you put in your "Pro" version solution, yet mine doesn't work. I guess part of my problem is that I don't really understand why what I have doesn't work and what you have does work. – justinpdove Oct 2 '17 at 14:50
  • One thing that stands out missing in your solution is lack of "rerender". If you don't have that, whole page will reload and SF tends to not bother with statuses / spinning wheels; you just see the progress bar / loading icon that are your browser's default. You can see that rerender is used both in developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/… and in samples like salesforce.stackexchange.com/questions/65580/… – eyescream Oct 2 '17 at 15:16
  • Gaaaaaah! Re-render was it. I read somewhere before that because the v-force page redirects after a successful commit that re-rendering will cause some issues. That's awesome. Thank you very much for your help! – justinpdove Oct 2 '17 at 15:35
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.