I am trying to add a spinner with a backdrop as the loading screen but the spinner is not working when the action function is invoking. Action function is able to call the apex method but not invoking the actionstatus.

Here's the VF Page code,

<apex:form >
     <apex:actionFunction name="paymentaction" action="{!test1}" status="pageStatus"/>
        <div class="slds-scope">
            <apex:actionStatus id="pageStatus">
                        <apex:facet name="start">
                            <apex:outputPanel >
                                <div class="demo-only" style=" height: 6rem;">
                                    <div id="spinner" class="slds-spinner_container slds-is-relative" >
                                        <div role="status" class="slds-spinner slds-spinner--large slds-spinner--brand">
                                            <div class="slds-spinner__dot-a"></div>
                                            <div class="slds-spinner__dot-b"></div>

The command button here is in a different column of the grid but that does not seem to be the problem as it is invking subsequent functions just fine,

<apex:commandButton styleClass="slds-button slds-button_outline-brand" status="pageStatus" value="{!$Label.Obtain_Token}" id="obtainToken" onclick="return doSomeWork();"/>

Apex Method :

public void test1(){
        system.debug('In Test Method');
        Integer start = System.Now().millisecond();
        while(System.Now().millisecond()< start+10){ 

What am I doing wrong here? I also looked at Modals in SLDS and would love to implement it with Modals and backdrop?

  • actually I was able to resolve it using Modal and spinner from the SLDS. I added a Modal on button click and then added a spinner in the modal content. I would only render the Spinner when I click on the button so it does not overlay on UI all the time. – apple123 Apr 15 '19 at 15:29

VF Page :

         function doSomeWork() {           
            // first, call the action function to post the payment request here

            // second, disable the buttons, enable the modal, backdrop and spinner for loading
            // third, return false to prevent the click from
            // posting the form a second time
            return false;


<apex:form id="theform">
    <!-- Action Functions-->
    <apex:actionFunction name="paymentaction" action="{!test1}" oncomplete="closeModal(); return false;" />
    <apex:actionfunction name="updateBillingPayment" action="{!updateBillingPayment}" />
    <!--Action function to rerender the show spinner output panel -->
    <apex:actionFunction name="rerenderspinnerop" action="{!showspinnermethod}" rerender="showspinner,parentspinner" oncomplete="openmodal(); return false;" />
    <!-- /Action Functions--> 
    <apex:inputHidden id="showspinner" value="{!showspinner}" />
        <!-- REQUIRED SLDS WRAPPER -->
        <div class="slds-scope">
            <!-- MODAL & SPINNER -->
            <div class="slds-modal" aria-hidden="false" role="dialog" id="modal">
                <div class="slds-modal__container" >
                    <header class="slds-modal__header">
                        <!--<button class="slds-button slds-button--icon-inverse slds-modal__close" onclick="closeModal()">
                          <svg aria-hidden="true" class="slds-button__icon slds-button__icon--large">
                            <use xlink:href="/apexpages/slds/latest/assets/icons/action-sprite/svg/symbols.svg#close"></use>
                          <span class="slds-assistive-text">Close</span>
                        <h2 class="slds-text-heading--medium" >Processing Payment...</h2>

                      <div class="slds-modal__content slds-p-around_x-large slds-is-relative">
                          <apex:outputPanel id="parentspinner">
                          <apex:outputPanel id="spinnerop" rendered="{!showspinner==true}" >
                              <div class="demo-only" style="height: 6rem;"> 
                                <div class="slds-spinner_container">
                                        <div class="slds-spinner--brand slds-spinner slds-spinner_medium" role="alert">
                                            <span class="slds-assistive-text">Loading...</span>
                                            <div class="slds-spinner__dot-a"></div>
                                            <div class="slds-spinner__dot-b"></div>
                    <footer class="slds-modal__footer slds-p-around_x-small">
                        <p class="slds-text-align_center">Please wait, do not hit refresh or back button...</p>
             <div class="slds-backdrop" id="backdrop"></div>
             <apex:outputPanel id="buttons">

                        <apex:commandButton styleClass="slds-button slds-button_outline-brand" status="pageStatus"  value="{!$Label.Obtain_Token}" id="obtainToken" onclick="return doSomeWork();"/>

Basically, I call the JS function on button click, I add the backdrop, enable the modal and then render the output panel where the spinner is.

| improve this answer | |

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