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.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *