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