Estoy usando una imagen gif para cargar y es la pantalla predeterminada para ninguno y cuando se envía el formulario, mostrará bloque y cuando se complete la solicitud ajax, nuevamente no mostrará ninguno como se muestra a continuación

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>

Pero este código no funciona en vivo

Puede alguien ayudarme en esto

1
MNJ 29 feb. 2020 a las 13:17

2 respuestas

La mejor respuesta

Tu código está funcionando en realidad. Es solo que colocó su función hideLoader() dentro de la devolución de llamada exitosa, eso significa que solo se ocultaría si la función ajax tiene éxito. Si hay un error, no lo ocultará.

Puede agregar una devolución de llamada de error .fail() a su llamada ajax como se muestra a continuación; La demostración a continuación probablemente generará un error, por lo tanto, ocultaría la imagen.

Puede eliminar el contenedor setTimeout, lo acabo de colocar porque lo oculta instantáneamente.

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>
1
Jerdine Sabio 29 feb. 2020 a las 10:35

En depuración encontré alguna advertencia

XMLHttpRequest síncrono en el subproceso principal está en desuso

Puede obtener más información sobre la advertencia aquí

Y acabo de agregar esta línea en su código

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

Como

<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>

Espero que te ayude.

0
Tausif 29 feb. 2020 a las 10:37