how to show loading gif when clicked any button

Question

I want to show loading gif when my servlet is busy. In my jsp page, I have 4 button. If user clicked any button, loading gif must showed. My html codes like this.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>TEC REPORT</title>
<script src="jquery-3.4.1.min.js"></script>

</head>
<body>
<h2 style="margin-left:35%;">Please insert Sales Order and click button</h2><br><br><br><br>
<form action="createReport" method="POST">
<table style="margin-left:40%;">
    <tr>
        <td>
            <input type="text" name="salesOrder" id="salesOrder" style="margin-left:20%;">
        </td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr><td><br></td></tr>
    <tr><td><br></td></tr>
    <tr><td><br></td></tr>
    <tr><td><br></td></tr>
    <tr>
        <td>
            <b><label style="margin-left:-250px;">PDM REPORT</label></b><br><br>
            <input type="submit" name="pdm" value="" style="background:url('resources/images/Word-icon.png');background-size:50px 50px;width:50px;height:50px;margin-left:-225px;">
        <td>
            <b><label style="margin-left:-200px;">GATE 1 REPORT</label></b><br><br>
            <input type="submit" name="gate1" value="" style="background:url('resources/images/Word-icon.png');background-size:50px 50px;width:50px;height:50px;margin-left:-160px;">
        </td>
        <td>
            <b><label>SB72-0408 REPORT</label></b><br><br>
            <input type="submit" name="sb408" value="" style="background:url('resources/images/Word-icon.png');background-size:50px 50px;width:50px;height:50px;margin-left:50px;">
        </td>
        <td>
            <b><label style="margin-left:75px;">SHOP VISIT REPORT</label></b><br><br>
            <input type="submit" name="svr" value="" style="background:url('resources/images/Word-icon.png');background-size:50px 50px;width:50px;height:50px;margin-left:130px;">
        </td>
    </tr>
</table>
</form>
</body>
</html>

Should I use ajax or servlet post?

Yes, you may use ajax as well – Abdulrehman Sheikh Dec 26 '19 at 10:34 — Abdulrehman Sheikh, Dec 26 '19 at 10:34
Should I share ajax code to run that gif? – Abdulrehman Sheikh Dec 26 '19 at 10:34 — Abdulrehman Sheikh, Dec 26 '19 at 10:34
@AbdulrehmanSheikh Yeah, it would be great. – mustafa53 Dec 26 '19 at 10:39 — mustafa53, Dec 26 '19 at 10:39
Okay just sharing... – Abdulrehman Sheikh Dec 26 '19 at 10:44 — Abdulrehman Sheikh, Dec 26 '19 at 10:44
Check my answer. I have modified your file – Abdulrehman Sheikh Dec 26 '19 at 11:01 — Abdulrehman Sheikh, Dec 26 '19 at 11:01

score 2 · Answer 1 · answered Dec 26 '19 at 10:56

You have to use AJAX. Servlet requests can be synchronous which means it will wait until the processing finishes then do the next activity. With an AJAX request you can send the request and then do something else without having to wait for it to finish processing, because it is asynchronous.

Add your loading gif image to html and make it hidden (using style in html itself now, you can add it to separate CSS):

<img src="path\to\loading\gif" id="img" style="display:none"/ >
Show the image when button is clicked and hide it again on success function

$('#buttonID').click(function(){
  $('#img').show(); //<----here
  $.ajax({
    ....
   success:function(result){
       $('#img').hide();  //<--- hide again
   }
}

Make sure you hide the image on ajax error callbacks too to make sure the gif hides even if the ajax fails.

Similar question: Show "loading" animation on button click

score 1 · Accepted Answer · answered Dec 26 '19 at 11:00

Here is your modified file.

Steps:

Just change your img urls because I have changed to load live images.
Remove last jquery line "event.preventDefault();" so your form submission will start working.
Replace your jquery local file path as I have added the live path.

Its all done, now on your form submission the loader will start loading automatically and when your server will response it will hide the loader on page reloading (Form Submitting via reloading)

Your Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="ISO-8859-1">
        <title>TEC REPORT</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <style>
            img.loaderimg {
                position: absolute;
                top: 30%;
                left: 40%;
                display: none; 
            }
        </style>
    </head>
    <body>
        <h2 style="margin-left:35%;">Please insert Sales Order and click button</h2><br><br><br><br>
        <form action="" id="createReport" method="POST">
            <table style="margin-left:40%;">
                <tr>
                    <td>
                        <input type="text" name="salesOrder" id="salesOrder" style="margin-left:20%;">
                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr><td><br></td></tr>
                <tr><td><br></td></tr>
                <tr><td><br></td></tr>
                <tr><td><br></td></tr>
                <tr>
                    <td>
                        <b><label style="margin-left:-250px;">PDM REPORT</label></b><br><br>
                        <input type="submit" name="pdm" value="" style="background:url('https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/190412-institute-vaseline-1555101948.png');background-size:50px 50px;width:50px;height:50px;margin-left:-225px;">
                    <td>
                        <b><label style="margin-left:-200px;">GATE 1 REPORT</label></b><br><br>
                        <input type="submit" name="gate1" value="" style="background:url('https://specials-images.forbesimg.com/imageserve/5d1225c2142c500008c72898/960x0.jpg');background-size:50px 50px;width:50px;height:50px;margin-left:-160px;">
                    </td>
                    <td>
                        <b><label>SB72-0408 REPORT</label></b><br><br>
                        <input type="submit" name="sb408" value="" style="background:url('https://www.brandchannel.com/wp-content/uploads/2018/11/unilever-baby-dove-personalized.jpg');background-size:50px 50px;width:50px;height:50px;margin-left:50px;">
                    </td>
                    <td>
                        <b><label style="margin-left:75px;">SHOP VISIT REPORT</label></b><br><br>
                        <input type="submit" name="svr" value="" style="background:url('https://www.oberlo.com/wp-content/uploads/2017/11/Backpack.jpg');background-size:50px 50px;width:50px;height:50px;margin-left:130px;">
                    </td>
                </tr>
            </table>
        </form>
        <img src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif" class="loaderimg" />
    </body>
</html>
<script>
    $("#createReport").submit(function (event) {
        $("img.loaderimg").show(); 
        event.preventDefault(); 
    });
</script>

how to show loading gif when clicked any button

2 Answers2