1

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" />
3

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" />
  • oh interesting. Thank you @sfdcfox. I am now able to return the data without a page refresh. The actionStatus is not working for the spinner but I will keep hacking away at that. – Olivia Nov 8 '16 at 20:13
  • @Olivia If I remember correctly, if you want multiple elements in the facet, you have to wrap them inside an apex:outputPanel. Try that and see what happens. – sfdcfox Nov 8 '16 at 20:15
  • I've done some research and it looks like apex:actionStatus is the right way to go about it and I don't necessarily need to wrap it in apex:outputPanel. I have attached the code updates with the actionStatus and the updated commandLink. I am not seeing anything wrong with this in comparison to other examples. Still not getting any response.Any insight? I am still digging as well... Examples: salesforce.stackexchange.com/questions/65580/… , developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/… – Olivia Nov 8 '16 at 23:35
  • @Olivia - the spinner is not displaying because the containing div style in your posted code is set to display:none – Eric Nov 8 '16 at 23:42
  • @Olivia Yeah, I just saw your code update, too. The actionStatus element specifically does the showing and hiding for you, so don't include any of your own hide/show CSS/JavaScript methods. – sfdcfox Nov 8 '16 at 23:45

Your Answer

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

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