Salesforce: Do not use status animation on both commandButton and actionFunction in VisualForce

April 15, 2015

Everyone who has ever developed a VisualForce page knows that actionFunction, which is called from page and performs controller method, takes some time to be processed on backend, and as a rule we want to prevent users from any actions during controller action method being executed.

Usually, we use status parameter of commandButton and actionFunction. Lets assume we have some page like this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<apex:page controller="testC">
<apex:form >
<apex:actionFunction action="{!controllerAction1}" name="actionJavaScriptFunction1"  status="statusAnim" />
<apex:commandButton value="Action 1" onclick="javascriptFunction();" status="statusAnim"/>
</apex:form>
<script type="text/javascript">
function javascriptFunction() {
if ( confirm( 'Do you really want to hurt me?\r\nDo you really want to make me cry?' ) ) {
actionJavaScriptFunction1();
}
}
</script>
</apex:page>

with a controller like this

1
2
3
4
5
public class testC {
 
public PageReference controllerAction1() {
return null;
}
 
}

Then imagine that we have actually created some status animation which shows image from static resources

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<style>
DIV#grayArea {
width: 100%;
height: 100%;
position: absolute;
z-index: 10;
padding: 0 0 0 0;
margin: 0 0 0 -10px;
display: none;
}
DIV#grayAreaInside{
width: 100%;
height: 100%;
background-color: #39C;
position: absolute;
z-index: 11;
opacity: 0.5;
padding: 400px 0 0 0;
margin: -359px 0 0 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
</style>
 
<div id="grayArea" class="grayArea">
<div id="grayAreaInside" class="grayAreaInside"></div>
<div align="center">
<img alt="Loading..." src="{!$Resource.Load}" id="loadingImage"/>
<br/>
<img src="{!$Resource.loader}" id="loadingImage"/>
</div>
</div>
<apex:actionStatus id="statusAnim" onstart="jQuery('div#grayArea').css('display','block');" onstop="jQuery('div#grayArea').css('display','none');" />

and have some logic in the controller, and it happens that this animation is stopped before we actually want to stop it. The reason is that we used it twice, once in commandButton and second time in actionFunction.

So, if we simply remove it from the commandButton everything would work just fine and everyone will be happy because animation won’t be stopped before all the logic has been performed completely.

Cheers.

Tags



Share


Recent Articles

Is Your Email Secure Enough?

February 16, 2018 | Anton Derevyanchenko

Methods to Minimize Spoofing and Forgery Throughout Your Workplace With the arrival of any transformative technology, those wishing to exploit it ethically or otherwise always arrive with it. The digital communication era has been no different. The nuisance of email spoofing and forgery threatens digital security on every level of society, from personal email to […]

CoreValue Services Welcomes Roman Dzvinka as a VP of Business Development

February 9, 2018

CoreValue Services, a software and technology company, is pleased to announce and welcome Roman Dzvinka as a Vice President of Business Development. Mr. Dzvinka, as a member of our management team, will be responsible for the leadership of company sales and marketing, developing new business opportunities and implementing company strategies for customer service. Igor Kruglyak, […]

© Copyright - CoreValue 2018
Salesforce, Sales Cloud, and others are trademarks of salesforce.com, inc., and are used here with permission.
Used with permission from Microsoft.