Question posted in
You can find the official documentation here.

Remove ajax loader on beforeSend and add it again after Start – Jquery ajax

The ajax events on our projects are triggered as of this code and it is added in the jsp of the application header. It is a generic one so we cannot make changes in this code

$( document ).ajaxSend(function( event, request, settings ) {
    $("#ajaxStatus").show()
});

$( document ).ajaxStop(function( event, request, settings ) {
    $("#ajaxStatus").hide()
});

$( document ).ajaxError(function( event, request, settings ) {
    $("#ajaxStatus").hide()
});

#ajaxStatus is the id of the div that contains the loader and the div is

<div id="ajaxStatus" style="display: none;">
    <div id="load_gridGrid" class="loading ui-state-default ui-state-active" style="display: block; border: none !important; width: 130px;">
        <asset:image src="ajax-loader.gif" alt="" />
    </div>
</div>

The ajax request is

$.ajax({
    url: "${createLink(controller: 'test',action: 'test123')}",
    data: "${true}",
    type: "POST",
    dataType: "json",
    beforeSend:function() {
                        
    },
    success: function (data) {
    },
    complete: function (data) {
    }
});

So what I want is to remove the loader in beforeSend() of ajax. We tried .unbind() and .hide() but it did not work. The one that worked was .remove(), but if we remove the loader the whole div of the loader will be removed from the DOM and we need to append that div again after ajax success function without page refresh. Can we append that div again without page refresh? or Can we just hide the loader in beforeSend() without removing it?

Tags:

2

Answers


  1. 0

    I think you can just set the property global to false to prevent the global handlers (ajaxSend,Stop etc.)

    $.ajax({
      url: "${createLink(controller: 'test',action: 'test123')}",
      global: false, 

      ...

    😉

    Login or Signup to reply.
  2. 0

    Kindly use the below solution using the jQuery CSS method, It will work

    $.ajax({
    url: "${createLink(controller: 'test',action: 'test123')}",
    data: "${true}",
    type: "POST",
    dataType: "json",
    beforeSend:function(){
        $('#ajaxStatus').css('display','block');
    },
    success: function (data) {
        $('#ajaxStatus').css('display','none');
    },
    complete: function (data) {
    }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search