How to stop/hide jquery spinner after downloads completes?

Question

In my program when user clicks the submit button (the submit button is in jsp file), the jquery spinner shows up. At the same time the request is sent to java servlet. The servlet handles the request, creates excel file and downloads the file.

But after download completes, I want to hide the jquery spinner. How am I able to do it?

Here are my codes: Below is section of my JSP (html) code:

  <tr>
    <td>
    <br /> 
    <br /> 
    <input type="submit" value="Search" name="action" /> 
    <input type="hidden" id="download_token_value_id" />
    <input type="submit" value="Download" name="action" class="spinner" /> // When user clicks Download buttons the jquery spinner appears      
    </td>
</tr>


<center>

    <div id="fontSpinner" style="color: blue; display: none;" class="fa fa-spinner fa-pulse fa-3x fa-fw">
    </div>
</center>

Below is the script:

   <script>

    $('.spinner').click(function() {
        $("#fontSpinner").css("display", "block");
        }); 
</script>

Below is the Java servlet that creates and download the excel file

 response.setContentType("application/vnd.ms-excel");
response.setCharacterEncoding("UTF-8");
response.setHeader("Content-Disposition", "attachment; filename=\"" + excelFileName + "\"");
....
....
.... // code that creates a excel file
....
....

ServletOutputStream out = response.getOutputStream();
workbook.write(out);

workbook.close();               
out.flush();
out.close();

Answer 1

You could return a status code 200 in the header of the response and basically when the fronted receives the 200 code you set the spinners display property to none. You should also consider to set it to none when an error occurs and do a proper error handling.

Answer 2

@Saroj- On Click of Download you write a javascript function and make a ajax call or http-service call to servlet. Once you get success response(200) from servlet ,put flag to disappear spinner.