Thursday, January 29, 2015

Avoid Multiple Clicks on Longer Loading VisualForce Page

For this you'll need a Static asset like this (in my case it's a "waiting/loading" animated gif):


You'll wrap some divs around your buttons and your animate gif:
<apex:pageBlockButtons >
    <div class="waitingGifDiv" >
        <apex:image id="WaitingGif" value="{!URLFOR($Resource.WaitingGif)}" width="50" height="50" style="float:center-right; "/>
    </div>
    <div class="SubmitButtonDiv">
        <apex:commandButton id="SubmitButton" styleClass="SubmitButton" value="Submit Case" action="{!submitCase}" />
    </div>
</apex:pageBlockButtons>

Then you'll need just a little javascript (in this case with a little jquery help) to first hide the animated gif when the page loads.  Then when the user clicks the button, hide the button and unhide the animated gif.  Simple, right?
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script >
      
    j$ = jQuery.noConflict();
    j$(document).ready(function() {
       //code when page is ready 
       j$('.waitingGifDiv').hide();
       
       j$('.SubmitButton').on('click',function() {
           j$('.waitingGifDiv').show();
           j$('.SubmitButtonDiv').hide();
        });
    });
</script>
    

No comments:

Post a Comment