Button onclick change his text with an <actionStatus>

Question

I'm able to display a loading image after a click on a button.

<apex:commandButton id="myButton" value="Save" action="{!save}" status="saveStatus"/>

<apex:actionStatus id="saveStatus">
    <apex:facet name="start">
        <apex:image value="/img/loading24.gif" height="16" width="16" />
    </apex:facet> 
</apex:actionStatus>

Now, I'm wondering if there is a way to replace the button text by the loading image after a click and put the text when process is done ?

Answer 1

You should be able to do this by using a string in the controller that feeds the status like so:

NOTE: Edited to remove bug

Controller

public String buttonStatus {public get; public set;}
....
//in constructor, set the value of the text:
buttonStatus = 'Save';

//now in save method, change the status. You need to do this, as you changed it via
//javascript when you called the save method
public PageReference save(){
...
buttonStatus = 'Save';
return null;

Page

<apex:commandButton id="myButton" value="Save" action="{!saveScreening}"  onclick="this.value = 'Saving...'"/>

Of course, you'll need to make sure you refresh the form oncomplete

If you want to add an image to the button, you can add this javascript function:

function setImage(button){
      button.value = '      Saving...';
      button.style.background = 'url(/img/loading24.gif)';
      button.style.background-position = 'no-repeat';
      button.style.cursor = 'pointer';
      button.style.border = 'none';
    }

And call it in your onclick method.