0

I am using an SLDS VF page, where I display search parameters. When "Search" button is clicked, the parameters are picked up and a call is made to an external resource, and if there are any matches they are returned to the VF page. My goal is to display a spinner until results are returned. I am able to display the spinner only if I add reRender tag on my button. Unfortunately my page breaks when I do that, meaning my spinner spins and no results are displayed. Are there any workarounds?

    <apex:outputPanel id="searchPanel">
        <li class="slds-button-group-item">
           <apex:commandButton styleclass="slds-button slds-button--neutral slds-grow" value="Search" action="{!doAdvSearch}" status = "recordSearchid" reRender= "cdireturn"/>
              <apex:actionStatus id="recordSearchid">
                <apex:facet name="start">
                  <div class="slds-align_absolute-center" style="height:4rem">
                   <div role="status" class="slds-spinner slds-spinner_medium slds-spinner_inline">
                    <span class="slds-assistive-text">Loading</span>
                       <div class="slds-spinner__dot-a"></div>
                       <div class="slds-spinner__dot-b"></div>
                   </div>
                  </div>
                </apex:facet>
              </apex:actionStatus>
        </li>
    </apex:outputPanel>

<apex:outputPanel id="cdireturn">    
    <apex:outputPanel rendered="{!showAdvSearchResults}">
                       <th class="slds-is-sortable" scope="col">
                       <div class="slds-truncate "></div>
                       </th>

                       <th class="slds-is-sortable" scope="col">
                       <div class="slds-truncate "></div>
                       </th>
    </apex:outputPanel>
</apex:outputPanel>
  • You MUST use reRender to get the spinner with commandButton. You'll want to approach this from the other direction: why is your page breaking when you use reRender...? – sfdcfox Oct 21 at 16:34
  • This does make a lot of sense. My VF page essentially has 2 output panels. The first one contains fields that a user populates. When a button "Search" is clicked, I perform an API call. When results come back I display them in my second output panel. If I do not have the reRender tag on the button, my results set/ouputPanel is displayed. when the reRender is used, the spinner keeps on spinning. I am referencing in the reRender tag the id of my secondary/result output pannel. Happy to put my code in here but it is a lot. – Ivo Dimov Oct 21 at 17:25
  • I updated the code. In this case the spinner does not stop spinning and my cdireturn outputpannel does not display. In my logs I can see that the data comes back, but the pannel is not displaying. – Ivo Dimov Oct 21 at 17:54
  • Is the outputPanel having the complete code? I cannot see any result being displayed in the code currently. Also, as you are using rendered attribute in the outputPanel. You would need to create a parent outputPanel component and rerender that. For ex: <apex:outputPanel id="cdireturn"><apex:outputPanel rendered="{!showAdvSearchResults}" >...</apex:outputPanel></apex:outputPanel> – Hemant Jain Oct 21 at 19:06
  • Thank you for the feedback. I updated as you requested, but the spinner keeps running, and the outputpanel is still not rendured. I am at a loss. – Ivo Dimov Oct 21 at 19:22

Your Answer

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

Browse other questions tagged or ask your own question.