April 15, 2015

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

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

More Value with Lightning Value Providers

February 15, 2019 | Bohdan Dovhan, Senior Salesforce Engineer

Salesforce cloud platform offers the whole variety of customization options. Those include point-and-click tools like Lightning App Builder, Process Builder, Visual Flow and Workflow alongside development tools like Apex, Visualforce, Lightning Aura Components, Lightning Aura Events, Lightning Aura Tokens, Lightning Aura Standalone application and Lightning Web Components. Lightning Aura Components development involves the development of […]

Hot in Salesforce Marketing Cloud: January 2019 Release Notes

February 8, 2019 | Ihor Shupeniuk, Salesforce Engineer and Marketing Cloud Specialist

In the era of intelligent marketing with the proliferation of technology where modern consumers are offered the widest choice, Marketing Cloud is sometimes named a future-looking service, We continue to closely follow the developments and improvements to  Marketing Cloud and we can safely affirm that this product is becoming better and better. Everyone who has […]