4

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.


  1. AjaxStart, AjaxStop methods
  2. SetTimeout(function(){},0);
  3. jQuery.ajaxSetup({beforeSend:function(),complete()})
  4. 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 Sep 14 '17 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 Sep 14 '17 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 Sep 14 '17 at 9:50
1

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();
      }
    });
  });
});
| improve this answer | |
  • 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 Sep 13 '17 at 7:17
  • @ShandeepAM I've added a synchronous solution to my answer – theChrisKent Sep 13 '17 at 19:22
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();
    },
| improve this answer | |
  • This will successfully work on Async:true condition. But, does not work on Async:false condition. Any other alternatives ? – Shandeep AM Sep 14 '17 at 8:11
  • in that case theChrisKent synchronous solution will work for you. – Vishnu S Sep 14 '17 at 8:36
0

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();
            }
        });          

    });
});
| improve this answer | |
  • 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 Sep 14 '17 at 16:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.