Question

How do I add a loading bar while push a linking button with a “href” directed to another page?

Because the backend service needs to process some requests which could take around 10 secs
prior to showing the new page. (The situation is when I push the linking button, the page looks like stopping response around 10 secs…)

I need to fire the loading bar action when pressing the linking button.

just found a way using ajaxstart, ajaxstop (ref: http://jsfiddle.net/jonathansampson/VpDUG/170/), is it suitable for my case?

Answer 1

Yes, AJAX is suitable in your case. I will explain it a bit.

1. After the user clicked on a link, prevent the page loading using JavaScript. In jQuery code this would look like to following.

   $('a').click(function(e){
       e.preventDefault();
   
       // save the destination of the link for the ajax request
       var destination = $(this).attr('href');
   });
   

2. Display a loading bar.

   $('#loading').show();
   

3. Then send an AJAX request to the server.

4. The server receives the request, calculates the result and sends it back to the client.

5. When the JavaScript on the client side got the response from the server, replace the content of the page. jQuery allows you to define a callback function which is executed when the response arrives.

6. In case hide the loading bar.

   $('#loading').hide();
   

I recommend using jQuery to do simplified AJAX request. It will save you much time.