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

It’s all about Quality: Migration and Data Validation Testing

June 14, 2019 | Yuliya Zubenko, Senior QA Engineer

There exists a lot of reasons why organizations are forced to migrate their data. Data migration can be performed manually or by using special tools. The process becomes more challenging if the migration is to be performed for a complex application with huge amount of data. Data Accuracy is a key aspect that should be […]

Hot and Trendy: Google Teams up with Looker

June 10, 2019

The IT world is stirred up with the latest plans of Google to acquire Looker, a data analytics platform. Google LLC announced its agreement with Looker to join forces in the development of a comprehensive data analytics solution for customers.   Looker, a business analytics and data intelligence platform, empowers organizations to draw insights from […]

Contact Us

By submitting this form you acknowledge that you agreed to our Cookies and Privacy Policy.