0

This question already has an answer here:

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"/>
  <!-- REQUIRED SLDS WRAPPER -->
        <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>
                                        </div>
                                    </div>
                                </div>
                            </apex:outputPanel>            
                            </apex:facet>
                        </apex:actionStatus>

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?

marked as duplicate by Raul, Pranay Jaiswal, glls, Community Apr 15 at 17:05

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • 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 at 15:29
0

VF Page :

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

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


    </script>
<body>

<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>
                          </svg>
                          <span class="slds-assistive-text">Close</span>
                        </button>-->
                        <h2 class="slds-text-heading--medium" >Processing Payment...</h2>
                      </header>

                      <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>
                                        </div>
                                    </div>
                              </div>
                              </apex:outputPanel>
                              </apex:outputPanel>
                    </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>
                    </footer>
                </div>
             </div>
             <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.

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