Loader Image on Synchronous call - Rest Api SharePoint

Question

Stuck with "Loader" while deleting items. I have a set of items to delete and need to display a loader image while deleting. But, for some reason, i'm not able to solve this. I have came across different solutions and implemented it hoping it will solve the issue. But, no luck. Below were the solutions i implemented.

AjaxStart, AjaxStop methods
SetTimeout(function(){},0);
jQuery.ajaxSetup({beforeSend:function(),complete()})
fadeIn,Fadeout methods

I have used the below code as synchronous...

$(document).ready(function(){ 

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

    $('#btndelete').click(function(){
        $('#callLoader').show();
        setTimeout(function() {
            $.ajax({
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('12kListItems')/items?$top=9999",
                    },beforeSend: function () { 
                    $('#callLoader').show();
                },
                success: function (data) {
                    var items = data.d.results;
                    var counter = 0;        
                    for (var i = 0; i < data.d.results.length; i++) {
                        if(data.d.results[i].Id != undefined){
                            //storage.push(data.d.results[i].Id);
                            $('#DisplayCounter').text(i);
                        }               
                     }
                    setTimeout(function(){
                        $('#callLoader').hide();
                    },1000);
                },
                async:false,
                error: function (error) {
                    console.log(JSON.stringify(error));
                }
            })
        ;}, 0);

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

    });
});

"callLoader" is a Div tag

can you explain what is happening now, and what exactly you want? I am not sure what you are using setTimeOut for both the occurrence. If you can tell the exact behavior may be we can help. — ThinkB4Code
– ThinkB4Code, Commented Sep 14, 2017 at 8:04
@ThinkB4Code : Currently, the ('#callLoader').show(); is being executed but, it is not displaying the loader image due to synchronous operation. Without showing the image, the operation is performed. — Shandeep AM
– Shandeep AM, Commented Sep 14, 2017 at 8:10
Hi, thanks for the clarification, I had modified your code, can you check below in answer and try out the code. — ThinkB4Code
– ThinkB4Code, Commented Sep 14, 2017 at 9:50

theChrisKent · Accepted Answer · 2017-09-13 19:22:26Z

Asynchronous Solution

You can take advantage of the fact that the $.ajax() method returns jqXHR objects that implement the Promise interface.

$(document).ready(function(){

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

  $('#btndelete').click(function(){
    $('#callLoader').show();

    $.ajax({
      url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('12kListItems')/items?$top=9999"
    }).done(function(data, textStatus, jqXHR) {
      var items = data.d.results;
      var counter = 0;        
      for (var i = 0; i < data.d.results.length; i++) {
        if(data.d.results[i].Id !== undefined){
          //storage.push(data.d.results[i].Id);
          $('#DisplayCounter').text(i);
        }               
      }
    }).fail(function(jqXHR, textStatus, errorThrown){
      console.log(JSON.stringify(errorThrown));
    }).always(function(){
      $('#callLoader').hide();
    });
  });

});

Synchronous Solution:

The jQuery documentation on ajax indicates that setting the async to false will allow your call to be done synchronously:

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done()

The following code should accomplish what you are looking for:

$(document).ready(function(){

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

  $('#btndelete').click(function(){
    $('#callLoader').show();

    $.ajax({
      url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('12kListItems')/items?$top=9999",
      async: false,
      success: function(data, textStatus, jqXHR) {
        var items = data.d.results;
        var counter = 0;        
        for (var i = 0; i < data.d.results.length; i++) {
          if(data.d.results[i].Id !== undefined){
            //storage.push(data.d.results[i].Id);
            $('#DisplayCounter').text(i);
          }               
        }
      },
      error: function(jqXHR, textStatus, errorThrown){
        console.log(JSON.stringify(errorThrown));
      },
      complete: function(){
        $('#callLoader').hide();
      }
    });
  });
});

Appreciate your help. But, i'm using the Rest Api ajax call as Synchronous. Your suggested code works as Async. Any other alternative ways ? — Shandeep AM
– Shandeep AM, Commented Sep 13, 2017 at 7:17

Vishnu S · Accepted Answer · 2017-09-14 07:35:48Z

0

You can use ajax events to achieve your goal.
Use beforeSend & complete event in Ajax.

url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('12kListItems')/items?$top=9999",
    },
    beforeSend: function () { 
            $('#callLoader').show();
    },
    complete: function () {
        $('#callLoader').hide();
    },

answered Sep 14, 2017 at 7:35

Vishnu S

8741 gold badge14 silver badges25 bronze badges

This will successfully work on Async:true condition. But, does not work on Async:false condition. Any other alternatives ?

Shandeep AM
– Shandeep AM

2017-09-14 08:11:47 +00:00
Commented Sep 14, 2017 at 8:11
in that case theChrisKent synchronous solution will work for you.

Vishnu S
– Vishnu S

2017-09-14 08:36:16 +00:00
Commented Sep 14, 2017 at 8:36

Add a comment |

ThinkB4Code · Accepted Answer · 2017-09-14 09:49:57Z

I had updated your code. There was a problem in your code that after url: ....., the next line contains end of ajax option object i.e. }, before.... The } here ends the ajax options because of that, you were having problem.

Try the below code and let us know if this is working or not.

$(document).ready(function(){ 
    $('#btndelete').click(function(){
        $('#callLoader').show();

        $.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('12kListItems')/items?$top=9999",
            success: function (data) {
                var items = data.d.results;
                var counter = 0;        
                for (var i = 0; i < data.d.results.length; i++) {
                    if(data.d.results[i].Id != undefined){
                        //storage.push(data.d.results[i].Id);
                        $('#DisplayCounter').text(i);
                    }               
                }

                $('#callLoader').hide();
            },
            async:false,
            error: function (error) {
                console.log(JSON.stringify(error));
                $('#callLoader').hide();
            }
        });          

    });
});

I have already implemented the same code. the problem is the list has 12k items. So, it created the problem. Now, i have used JSOM as alternative solution. Works Awesome ! Thanks much for your suggestions. — Shandeep AM
– Shandeep AM, Commented Sep 14, 2017 at 16:11

Stack Exchange Network

Loader Image on Synchronous call - Rest Api SharePoint

3 Answers 3

Asynchronous Solution

Synchronous Solution:

Your Answer

Hot Network Questions

Loader Image on Synchronous call - Rest Api SharePoint

3 Answers 3

Asynchronous Solution

Synchronous Solution:

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions