0

I have a button- when it is clicked, an alert shows up, prompting for an input, after the user puts in data, the data is sent to the server, processed, and a result comes out. This can last up to 30 seconds-1 min, because I have to handle quite a large amount of data, so I would need to show a "Loading, please wait" alert, while the server-side job is running, so the user won't think things are not working.

Can anyone offer any suggestions, please?
I am quite new to javascript and jquery. I have a feeling this has to be done with ajax, but I don't really know how.

Negrea Stefan
  • 3
  • 1
  • 3

2 Answers2

1

I think the same question has been asked here - How to display a "busy" indicator with jQuery? and a verified answer with code is provided.

Community
  • 1
  • 1
NT88
  • 947
  • 5
  • 25
  • Is there any way to set things up individually rather then setting them globally and individually removing? And will this also affect ajax calls from other files than the one with ajaxSetup? – Negrea Stefan May 10 '13 at 14:09
  • If your scenario is in some cases of invoking one ajax request to have indicator and in othere cases when invoking it to dont have i would advise you before doing the request to set the indicator and to use promisses - when. Please take a look at - http://api.jquery.com/jQuery.when/ – NT88 May 10 '13 at 14:13
0

What you need exactly a Jquery Plugin Named Block UI http://www.malsup.com/jquery/block/

Source code and working demo can be found at

http://www.malsup.com/jquery/block/#page

As per comment if you want to do it for indivisual ajax you can unblock in success or error handler of Ajax call... suppose 

$.ajax({
     url: "test.html", 
     cache: false, 
     beforeSend: function ( xhr ) {
        $.blockUI({ overlayCSS: { backgroundColor: '#00f' } });
     }
}).done(function( html ) {
     // Do your work 
     $.unblockUI();
 });
rahul maindargi
  • 5,359
  • 2
  • 16
  • 23
  • looks nicely, but how will I know when to unblock if I don't want to block all ajax requests? – Negrea Stefan May 10 '13 at 14:11
  • you can unblock in success or error handler of Ajax call... suppose `.ajax({ url: "test.html", cache: false }).done(function( html ) { // Do your work // Unblock });` – rahul maindargi May 10 '13 at 14:24