Loading screen while Servlet loads

Question

I have this JSP where I select certain parameters and hit "submit" button, after clicking "submit" I am calling a JavaScript function as below

<body>
<input type=button class="button"  id = "submit" value="Evaluate" 
onclick="JavaScript:return evaluateFunction()">
</body>

and in the evaluateFunction() I am collecting all the parameters and call a new Servlet in new popup window as below:

<script>
function evaluateFunction(){
var win = window.open('ConfirmEvaluate?parameters,'mywindow','width=600,height=500,titlebar=no')
}
</script>

Now the issue is ConfirmEvaluate servlet takes some time to get the data from database(around 15-20 secs based on size of input) and displays the data in the forwarded JSP(say userdata.jsp) Now I want to display a loading gif or screen in that 15-20 seconds while the Servlet loads the data from database. How can I proceed, any help would be appreciated.

I have already gone through some similar questions in SO but none of them is having a specific answer.

Possible duplicate of [Display something while servlet loads](https://stackoverflow.com/questions/36303493/display-something-while-servlet-loads) — Sarah Aziziyan, Aug 21 '17 at 12:28
@Sarah No it's not a duplicate as there was no specific solution provided in that question,I have already gone through it, if you don't know the answer stay idle, don't act like moderator. — raviraja, Aug 21 '17 at 12:30
The simplest solution would be a show a div with "loading" gif as mentioned above. — PanBrambor, Aug 21 '17 at 13:58

score 0 · Answer 1 · answered Aug 21 '17 at 21:40

You have to use AJAX. Servlet requests like the one in your example are 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.

The way i would approach this is in the following way:

You get the user details in ConfirmEvaluate, and redirect the user to userdata, then once the user is on the page do the AJAX request to fetch the information that takes a long time to process. When the request is made you can show a loading icon but when you get a response from the AJAX request, you can hide this loading icon. Check out this brilliant post on how to make AJAX requests with servlets

I had to implement something like this recently, here is some example code:

<script>
//when page loads, the ajax request starts
$(document).ready(function() {
    $(this).scrollTop(0);
    getposts(username);
    });

//ajax request that will show and hide the loader depending on response
 var getposts = function (username) {
     var params = {
            user: username        
        };
$.get("../GetUserFeed",$.param(params),function(responseXml) {      
        $("#user-feed").append($(responseXml).find("feed").html()); // Parse XML, find <data> element and append its HTML to HTML DOM element with ID "somediv".
        $('#logo-loader').hide();
           if(isBlank(responseXml)){
            $('#logo-loader-completed').show();
            $('#logo-loader-image').hide();
        }
    });
 };

 </script>

score 0 · Answer 2 · answered Aug 12 '23 at 07:41

Here is the solution you are looking for. you can use this example to get your issue solved.

<script>
//when page loads, the ajax request starts
$(document).ready(function() {
    $(this).scrollTop(0);
    getposts(username);
    });

//ajax request that will show and hide the loader depending on response
 var getposts = function (username) {
     var params = {
            user: username        
        };
$.get("../GetUserFeed",$.param(params),function(responseXml) {      
        $("#user-feed").append($(responseXml).find("feed").html()); // Parse XML, find <data> element and append its HTML to HTML DOM element with ID "somediv".
        $('#logo-loader').hide();
           if(isBlank(responseXml)){
            $('#logo-loader-completed').show();
            $('#logo-loader-image').hide();
        }
    });
 };

 </script>

Loading screen while Servlet loads

2 Answers2