I might be having a brain fart but what would be the best way to get the actionFunction status (mine is a spinner) to replace the content of a div? Mine is currently spinning above the div.

I have tried writing JavaScript replaceWith, display = 'none' and many other variations with no success. It doesn't look like you can declare a second action, let alone a second JS function, on the actionFunction action. I have tried putting my JS inside of my apex method pullIDAnalyticsReportAPEX but I feel like there is an easy way that I am missing.

<apex:actionFunction name="pullReportActionFunction" action="{!pullIDAnalyticsReportAPEX}" status="spinnerStatus1" rerender="refreshOutPutPannel1, IDoldPullreportbutton1"/>

<apex:outputPanel id="IDoldPullreportbutton1" style="display:{!If(crs.Status__c !='Completed' && crs.Status__c !='Error' && crs == NULL ,'block','none')};">

    <div class="tableOP panel-default" id="IDoldPullreportbutton1" onload="deleteButton()" >
    <apex:outputPanel layout="none" >
        <div class="rowOP headerOP greenOP">
            <div class="cell cheaderOP panel-heading green-panel">
            ID Analytics Report

          <apex:actionStatus id="spinnerStatus1">
            <apex:facet name="start">
               <apex:outputPanel >
                  <div class="business-loading-icon1 panel-body" align="center" style="margin-right:5px;height:178px;">
                     <span style='display:inline-block; height:100%; vertical-align:middle;'></span>
                       <img src="{!URLFOR($Resource.loadingspinner)}" style="height:100px" />

//report not pulled div
          <apex:outputPanel rendered="{!crs == NULL && creditReviewObj.PG1__c != NULL}" layout="none" id="reportNotBeenPulled">
               <div class="panel-body">
                 <div class="text-center">
                    <p>Report has not been pulled.</p>

<apex:outputPanel rendered="{!creditReviewObj.PG1__c != NULL}" layout="none">
    <div class="col-md-8" style="position:center">
        <div class= "form-group btn btn-default btn pull-right">
           <apex:commandLink value="Pull Report OLD" onclick="pullReportActionFunction(); return false;" style="text-decoration: none; text-align: center; position:relative; color: #333;"/>

//output data
<apex:outputPanel id="refreshOutPutPannel1" style="display:{!If(crs.Status__c =='Completed' && crs.Status__c !='Error' && crs != NULL ,'block','none')};">
    <table>........Data pulled from pullIDAnalyticsReportAPEX method...........</table>

So I guess my narrowed down question is- can you write javascript to react to a status in the actionFunction?

It currently looks like:

enter image description here

1 Answer 1


In the general case, no, you can't. However, as it turns out, you don't need to. The following generally works:

<apex:form id="form">
    <apex:actionFunction name="doSomething" action="{!anAction}" reRender="form" status="status">
    <apex:actionStatus id="status">
        <apex:facet name="start">
            <!-- spinner goes here -->
        <apex:facet name="stop">
            <!-- main page content here -->
  • do I only put in stop what I want it to render once the spinner has stopped? And as for the header and Pull Report buttons, do those go above?
    – Olivia
    Feb 3, 2017 at 17:00
  • @Olivia Yes, put the spinner in the start area, the stuff to display afterwards in the stop area, and the header and footer outside the actionStatus area if you want them to always display.
    – sfdcfox
    Feb 3, 2017 at 17:16
  • awesome. thank you. I keep looking and can't find much info on status start and stop, so this break down is much appreciated! this is exactly what I needed
    – Olivia
    Feb 3, 2017 at 18:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .