issue with loading image display none and block with jquery

Question

I am using gif image for loading and it is the default display none and when the form is getting submitted it will display block and when ajax request get complete it will again display none as below

function showLoader() {
    $("#loading-image").css("display", "block");
}
function hideLoader() {
    $("#loading-image").css("display", "none");
}
$("#review_submit").click(function(e) {
  e.preventDefault();
  showLoader();
  var fd = $("form").serialize();
  $.ajax({
            type: 'POST',
            async : false,
            url: '',
            data: fd,
            contentType: false,
            processData: false,
            success: function(response){
                console.log(response);
                hideLoader();
                
            }
        });     
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="" id="review_form" method="post" class="wp-form" novalidate="novalidate">
 <input type="text" name="product" />
  <input class="add-my-review large_button" type="submit" id="review_submit" value="Add My Review" name="add_review">
</form>

<span class="ajax-loader" id="loading-image" style="display: none;">
  <img alt="Loading..." src="/assets/images/loader.gif" />
</span>

but this code is not working in live

can anybody help me in this

can you show us the full html code that is failing to work on live? — blessing, Feb 29 '20 at 10:20
What do you mean by "not working"? What happens instead? What have you tried to debug the problem? — Nico Haase, Feb 29 '20 at 10:21
I think this is because you use a submit, so the entire page is reloaded and your your ajax call go nowhere — Mister Jojo, Feb 29 '20 at 10:21
@MisterJojo he has e.preventDefault() but yeah, it's better to replace that to `type=button` — Jerdine Sabio, Feb 29 '20 at 10:22
@NicoHaase not working means showLoader() does not block the gif image — , Feb 29 '20 at 10:23

Jerdine Sabio · Accepted Answer · 2020-02-29T10:35:15.040

Your code is working actually. It's just that you placed your hideLoader() function inside the success callback, that means it would only hide if the ajax function succeed. If there is an error, it wouldn't hide it.

You could add an error callback .fail() to your ajax call like below; The demo below will likely output an error hence it would hide the image.

You could remove the setTimeout wrapper, I just placed it because it hides it instantly.

function showLoader() {
  $("#loading-image").css("display", "block");
}

function hideLoader() {
  $("#loading-image").css("display", "none");
}
$("#review_submit").click(function(e) {
  e.preventDefault();
  showLoader();
  var fd = $("form").serialize();
  $.ajax({
    type: 'POST',
    async: false,
    url: '',
    data: fd,
    contentType: false,
    processData: false,
    success: function(response) {
      console.log(response);
      hideLoader();
    }
  }).fail(function(data) {
    console.log(data);
    setTimeout(function() {
      hideLoader();
    }, 2000);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="add-my-review large_button" type="submit" id="review_submit" value="Add My Review" name="add_review">

<span class="ajax-loader" id="loading-image" style="display: none;">
  <img alt="Loading..." src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif" />
</span>

score 0 · Answer 2 · answered Feb 29 '20 at 10:37

on debug i found some warning

Synchronous XMLHttpRequest on the main thread is deprecated

You Can get more about warning here

and i just added this line on your code

<script>$.ajaxPrefilter(function( options, originalOptions, jqXHR ) { options.async = 
true; });</script>

like

<script>$.ajaxPrefilter(function( options, originalOptions, jqXHR ) { options.async = 
true; });</script>

<script>

function showLoader() {
$("#loading-image").css("display", "block");
}
function hideLoader() {
$("#loading-image").css("display", "none");
}
$("#review_submit").click(function(e) {
e.preventDefault();
showLoader();
var fd = $("form").serialize();
$.ajax({
        type: 'POST',
        async : false,
        url: '',
        data: fd,
        contentType: false,
        processData: false,
        success: function(response){
            console.log(response);
            hideLoader();

        }
    });     

  });

 </script>

hope it help you.

issue with loading image display none and block with jquery

2 Answers2