apex:actionstatus with remote-action call from javascript

Question

i want to show waiting spinner on my remote-action call on command button with onClick event. i have wrote following code for that but its now working :

VisualForce Page:

<apex:actionStatus id="WORKING" >
 //loading spinner code.
</apex:actionStatus>
<apex:commandButton status="WORKING" value="click here" onclick="doCheckRun(true);return false;"></apex:commandButton>

<script>
function doCheckRun(preview){
     Controller.remoteActionFunction();
}
</script>

now when i click on command button then status="WORKING" is now showing the spinner if i add like this it is working :

<script>
     ShowSpinner();
</script>
<apex:actionFunction name="ShowSpinner" reRender="rerender" status="WORKING"/>

so when i add onClick event on command button its not working.

any help would be appreciated.

Answer 1

You can't use an apex:actionStatus element with a @RemoteAction or any other pure-JavaScript implementation (such as using XMLHttpRequest, webservice, sforce.connection.* methods, sforce.apex.* methods, etc).

Instead, you would have to draw your own spinner. apex:actionStatus only works with other Visualforce elements, such as apex:commandButton, apex:commandLink, apex:actionPoller, and apex:actionFunction.

<div id="spinner" style="display: none">
   <!-- spinner code here -->
</div>

<apex:commandButton status="WORKING" value="click here" onclick="doCheckRun(true);return false;"></apex:commandButton>

<script>
function doCheckRun(preview){
     document.getElementById("spinner").style.display = "block";
     Controller.remoteActionFunction(function(result) {
         document.getElementById("spinner").style.display = "none";
     });
}
</script>

Answer 2

There is already one onClickEvent on apex commandbutton so it can't be overirdden by custom onclick event given you can use apex commandlink button