CODEWITHSUNDEEP
javaajaxservlets
mustafa53
mustafa53

Reputation: 103

how to show loading gif when clicked any button

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?

Upvotes: 1

Views: 2097

Answers (2)

Abdul Rehman Sheikh
Abdul Rehman Sheikh

Reputation: 939

Here is your modified file.

Steps:

  1. Just change your img urls because I have changed to load live images.
  2. Remove last jquery line "event.preventDefault();" so your form submission will start working.
  3. 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>

Upvotes: 1

Nivin John
Nivin John

Reputation: 173

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

Upvotes: 2

Related Questions