Load data without a page refresh

Question

I have a similar question to this post. But unfortunatly this solve does not work for me.

I am using a <a href="javascript:void(0)" onclick="showCreditPull();" rerender="refreshOutputPannel" role="button"/> for my button rather then a apex:commandButton.

The issue I am running into is: every time I run showCreditPull() the page reloads. Which I do not want to happen. My end goal is to press a button, load a spinner while the web callouts happen, then replace the spinner with the newly populated data.

showCreditPull() is my JavaScript function. This function calls my apex method pullReport(). This apex method brings back the data I want displayed on the page.

I believe my issue is with this apex method. When I remove the apex method from my function, I am able to update the page without a refresh. But I need this method so I am able to do a web callout and return data to the page.

Am I missing something with actionFunctions? Or Apex methods and javascript? I need to return the data to the server side without a page refresh.

I attempted to reRender a specific block on the page rather then the whole page but no success.

JS:

function showCreditPull() {
    pullReportOP(); //APEX method
    var panel = $('#divforspinner');
    var panel_body = panel.find('#oldPullreportbutton');
    var spinner = panel_body.find(".business-loading-icon"); //spinner
    if('{!bvs.Status__c}' != 'Completed') {
      $('.replaceDiv').replaceWith(spinner.show());
    }
    else if ('{!bvs.Status__c}' == 'Completed') {
      $('#oldPullreportbutton').replaceWith('#populatedChart');
    }
    else {
      spinner.hide();
    }
}

I have also attempted a while loop for this but it would get stuck in an infinite loop. I believe this is the correct way to call the spinner once I can figure out the page refresh.

//once data is loaded, stop the spinner.
while ('{!bvs.Status__c}' != 'Completed') {
    $('.replaceDiv').replaceWith(spinner.show());
    //break;
}

APEX:

public void pullReport()
{   
    serializeData(); //this is the POST and GET callout method
    bvs = new Business_Verification_Summary__c();//creating a new object
    insert bvs;
    bvs.Lexis_Nexis_Report_Link__c = jsonStr; //this data is pulled from serializeData()
    bvs.CreditReview__c = actId;
    bvs.Transaction_Date__c = newdate;//this data is pulled from serializeData()
    if (bvs.Transaction_Date__c != null)
    {
      bvs.Status__c = 'Completed';  
    } 
    update bvs;
}

VFP:

<apex:outputPanel id="refreshOutPutPannel">
    <div class="panel-body panel-footer">
        <div class="form-group" style="position:relative;text-align:center">
            <div class="disabledByZ-index"></div> 
                <input type="hidden" value="1" class="pullBizCredit"/>
                    <a href="javascript:void(0)" onclick="showCreditPull();" rerender="refreshOutPutPannel" role="button" class="btn permissionDeny btn-default">Pull Report2</a> 
        </div>
    </div> 

<div class="rowOP borderTop">       
    <div class="cellOP evenOP paddingStyle">        
        <div class="cellOP floatLOP paddingStyle">      
            Report Date     
        </div>      
        <div class="cellOP floatROP paddingStyle">      
            {!bvs.Transaction_Date__c}      
        </div>      
    </div>      
</div>      
<div class="rowOP">     
    <div class="cellOP oddOP paddingStyle">     
        <div class="cellOP floatLOP paddingStyle">      
            Full Report     
        </div>      
        <div class="cellOP floatROP paddingStyle">      
            <a href="{!bvs.Lexis_Nexis_Report_Link__c}" target="_blank" class="paddingStyle">View Details </a>      
        </div>      
    </div>      
</div>      
</apex:outputPanel>     

CODE UPDATES:

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

<apex:commandLink action="{!pullReport}" reRender="refreshOutPutPannel" status="spinnerStatus" html-role="button" styleClass="btn permissionDeny btn-default" value="Pull Report" />

Answer 1

pullReportOP appears to be an apex:actionFunction. You need to specify the reRender attribute on this element, not on your a anchor. Despite the JavaScript-y nature of apex:actionFunction, if you don't specify a reRender attribute on it, it will cause a page refresh.

Also, you don't need the JS you're using at all, you can simply use an apex:actionStatus, like this:

<apex:actionFunction name="pullReportOP"
                     action="{!pullReport}"
                     reRender="refreshOutPutPannel"
                     status="spinnerStatus" />
<apex:actionStatus id="spinnerStatus">
    <apex:facet name="start">
        <!-- put spinner code here -->
    </apex:facet>
</apex:actionStatus>

Alternatively, just use apex:commandLink instead of your normal link:

<apex:commandLink action="{!pullReport}"
                  status="spinnerStatus"
                  reRender="refreshOutPutPannel"
                  html-role="button"
                  styleClass="btn permissionDeny btn-default"
                  value="Pull Report2" />