CODEWITHSUNDEEP
javascriptphpjqueryajaxloader
user4225623
user4225623

Reputation:

How to show the image loader until the respose from AJAX request comes in following scenario?

Following is the jQuery-AJAX code that I've written :

$('#request_form').submit(function(e) {
  var form = $(this);
  var formdata = false;

  if(window.FormData) {
    formdata = new FormData(form[0]);
  }

  var formAction = form.attr('action');

  $.ajax({
    url         : 'xyz.php',
    type        : 'POST',    
    cache       : false,
    data        : formdata ? formdata : form.serialize(),
    contentType : false,
    processData : false,

    success: function(response) {
      var responseObject = $.parseJSON(response);    
      if(responseObject.error_message) {
        if ($(".alert-dismissible")[0]) {
          $('.alert-dismissible').remove();   
        }  
        var htmlString = "<div class='alert alert-danger alert-dismissible' role='alert'><button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>"+responseObject.error_message+"</div>";    
        $(htmlString).insertBefore('div.modal-body #request_form');        
      } else {
        $('#Modal1').modal('hide');
        $('#Modal2').modal('show');       
      }
    }
  });
  e.preventDefault();
});

I want to show the loader image on a web page until some response comes from PHP side. The loader should be displayed in such a way that user should not be able to click anywhere in the browser window. Once the response(error/success) comes from the server(i.e. PHP side) the loader image should vanish and let the flow do their work.

Can someone please help me in this regard please?

If you want any further information regarding my issue please do let me know.

Thanks in advance.

Upvotes: 1

Views: 439

Answers (1)

Anarki
Anarki

Reputation: 393

Before the ajax query add this :

$('idOfYourLoader').fadeIn();

In the end of success/error part of the ajax query add this :

$('idOfYourLoader').fadeOut();

Upvotes: 2

Related Questions