Display a loading dialog with non-ajax pages

Question

I've the current situation:

1. Have a Link in some HTML page.

2. When the user click that Link, an NORMAL (vs Ajax) HTTP request is being sent to a Web Server (typically a Java Servlet)

3. After that, of course the browser will bring the contents from the server and start rendering it. (actually it's the same page with modified contents - don't ask me to do it in ajax, cause it is the requirements)

Before step 3 is being done (while the page is being loaded) I need to display some frame to the user saying something like loading ....

Answer 1

Well, just populate a div somewhere on the page with "Loading..." when the link is clicked. Here's some rough code

$('#yourlink').click(function(){
   $('#loading').html('Loading....'); 
}); 


<div id="loading">
</div> 

And when the page loads, the current loading div will be replaced with an empty one, this will signify that the loading is complete.

Another approach:

The css

#loading
{
  display: none; 
}

The html

<div id="loading">
    Loading....
</div>

The js

$('#yourlink').click(function(){
    $('#loading').show(); 
});  

Answer 2

Well, there's several non Ajax ways to do this. The simplest I guess would be to have a giv animated image with your loading bar, which you keep in a hidden div in your initial page:

<div style="display:hidden;"><img src="/img/loading.gif"></div>

Then add some javascript to the link/button that submits the page, such as when it is clicked it unhides the div with image.

Answer 3

There are many ways to do this. I handle it something like this:

// Any anchor with showOverlay class will invoke the overlay function
$("a.showOverlay").click(function() {
    overlay();
});

// Normal form submits are intercepted. Overlay call also be skipped by
// making the form of class "noOverlay"
$("form").submit(function() {
    var skipOverlay = $(this).hasClass("noOverlay");
    if(!skipOverlay){
        overlay();
    }       
    return valid;
});

// This overlay function uses the blockUI plugin, other methods can also be used
function overlay(){
    $.blockUI({
        fadeIn: 500,
        css: {
            height: '150px',
            top: '35%'
        },
        message: '<div style="margin-top: 40px;"><table align="center" ><tr ><td style="padding-right: 25px;"><img src="/images/wait.gif" /></td><td style="line-height: 25px;"><h1> Just a moment...</h1></td></tr></table></div>'
    });
}