How do I stop the loading indicator on the VF page?

Question

I have single field called Case and on its onchange event along with the apex method, it calls the JavaScript function where the loading indicator can be seen on the VF page like below:

Till here the job of the loading indicator is done and working fine, the problem starts now - the loading indicator doesn't stop and keeps loading. How do I stop it?

Any sort of help is appreciated.

VF code below:

<apex:page>
    <apex:form id="casePageForm">
        <apex:pageBlock title="Case" id="casePageBlock">
            <apex:pageBlockSection title="Case Detail" columns="1" collapsible="false" id="caseDetail">
                <apex:pageBlockSectionItem id="caseContactItem">
                    <apex:outputLabel value="Case" />
                    <apex:inputField value="{!ex.Case__c}" required="true" id="caseContact">
                        <apex:actionSupport event="onchange" action="{!obtainAddress}" rerender="ResContactAddress"
                                             onsubmit="showSpinner();"/>
                    </apex:inputField>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
    </apex:form>


<div id="opaque"/>
   <div id="spinner">
        <p align="center" style='{font-family:"Arial", Helvetica, sans-serif; font-size:20px; height:20px; width:20px;}'><apex:image value="/img/loading.gif"/>&nbsp;Please wait</p>
   </div>

   <script>
    function showSpinner()
    {
       document.getElementById('opaque').style.display='block';
       var popUp = document.getElementById('spinner');

       popUp.style.display = 'block';
    } 
   </script>

</apex:page>

Note: Haven't added the CSS in the above code.

Answer 1

The apex:actionSupport tag has an oncomplete attribute where you can call another JavaScript function that sets the display attributes to 'none'.

That call is performed when the AJAX request has completed.