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" />
Best Answer
pullReportOP
appears to be an apex:actionFunction. You need to specify thereRender
attribute on this element, not on youra
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:
Alternatively, just use apex:commandLink instead of your normal link: