0

I am currently working with jQuery/Ajax. I wanted to add a spinner when an ajax request is made. My scenario is: There are two tabs in the UI, one is Home and other is Activities. So, when the user click the Activities tab, it will make ajax request to the backend. At this point I wanted to add a loading spinner overlay to the whole page. I am currently using jQuery block UI. I doesn't seem to work with this. I have my code like this:

beforeSend: function (xhr) {
    $.blockUI({message: $("#spinner")});
    //show the loading spinner.
},
success: function (data) {
   //get the data.
},
error: function (error) {
    //get the error response.
},
complete: function (jqXHR, textStatus) {
   $.unblockUI();
   //hide the loading spinner
}

I have my spinner element like this:

<div id="spinner" style="background:url('assets/img/spinner.gif')"></div>

Is there something I am missing here....

Update: (Solved) The reason was due to the ajax synchronous nature. It locks the browser until the response is received. So, I changed by call to be async. You may want to look here for more discussion. view

Community
  • 1
  • 1
Rana_S
  • 1,520
  • 2
  • 23
  • 39
  • The sentence in the update is incorrect: AJAX is not synchronous by nature (it stands for "Asynchronous Javascript And Xml"). You can make a synchronous call (strongly discouraged btw), but that doesn't mean that AJAX is synchronous. – Alvaro Montoro Oct 05 '15 at 02:01
  • @Alvaro, I understand what you are saying. I was using synchronous request with ajax. That made it impossible for spinner to load. – Rana_S Oct 05 '15 at 02:07

1 Answers1

0

According to jQuery BlockUI Plugin's documentation, the message parameter expects an HTML string.

So, you must change that part of your code to:

$.blockUI({ message: $("#spinner").html() });
Buzinas
  • 11,597
  • 2
  • 36
  • 58
  • Thanks for your prompt response but it doesn't seem to work that way as well. – Rana_S Oct 04 '15 at 16:23
  • @RossiRobinsion since you've solved it, you can answer your own question and mark it as the accepted 48h later. – Buzinas Oct 04 '15 at 20:38