0

No he dado con la verdad en cuanto a cómo mostrar el mensaje indicador de la petición AJAX de manera tal de que si existe error en la misma, el indicador se mantenga visible durante un tiempo prudencial que le permita al usuario leerlo. En caso de que la petición haya sido satisfactoria, el mensaje desaparecería mucho más rápido. Pero aún no sé cómo jugar con los eventos fail y always de AJAX. El siguiente código es una función a la que se llama una vez seleccionado un nodo, como resultado debe mostrar la vista central de la app asociada al nodo seleccionado. El elemento con id=”indicador” sirve para mostrar el estado de la petición, inicialmente tiene una clase asociada que lo mantiene oculto y su contenido html es un glyphicon y el texto Cargando… La idea es que si se devuelve la vista correctamente, desaparezca el mensaje indicador rápidamente, pero si ocurriese un error, es decir la petición cae en fail, el mensaje indicador además de cambiar la clase, y el texto del mismo pasa a ser el resultado de jqXHR.responseText, debería mantenerse durante un periodo de tiempo prudencial que permita al usuario leerlo. Y finalmente he intentado en el always restaurar el contenido de indicador para que esté disponible para cualquier otra llamada AJAX. Erróneamente pues he estado usando el parámetro de always para compararlo con ´success´ pero esto no es cierto, si ocurre un error, always tiene como parámetro a jqXHR, pero si la petición es satisfactoria, simplemente always recibe el contenido devuelto por el servidor.

***** Agregando solución **************
function cargarVistaCentral(nodo) {
        $.ajax({
            dataType: 'html',
            type: 'GET',
            url: Routing.generate('app_renderVistaCentral', {'id_estructura': nodo.id}),
            beforeSend: function() {
                $('#indicador').addClass('cargando-satisfactorio').slideDown('fast');
            }
        }).done(function(data) {
            $('#vistas').html(data);
        }).fail(function(jqXHR) {
            if (jqXHR.status === 401) {
                window.location = _HOMEPAGE;
            } else {
                $('#indicador').removeClass('cargando-satisfactorio').addClass('cargando-error').html(jqXHR.responseText);
            }
        }).always(function() {
            if (!$('#indicador').hasClass("cargando-satisfactorio")) {
                $('#indicador').fadeOut(5500, function() {
                    $(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                });
            } else {
                $('#indicador').fadeOut('fast', function() {
                    $(this).removeClass('cargando-satisfactorio').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                });
            }
        });
    }

Anh, las clases cargando-satisfactorio y cargando-error básicamente lo que hacen es aplicarle un color de fondo verde o rojo al indicador respectivamente, por eso es que trato de jugar con el addClass y removeClass para poner y quitar una u otra en dependencia del resultado de la petición. Y siempre tratando de quitarlas al final para que el indicador una vez iniciada otra petición no las tenga aplicadas.

Exactamente, chequeando si existe la clase cargando-satisfactorio en el always del AJAX se puede aplicar más o menos tiempo al fadeOut del indicador.

3 respuestas 3

0

usa .hasClass() para saber si tiene la clase "cargando-satisfactorio"

    if ($('#indicador').hasClass("cargando-satisfactorio")) {
                    $('#indicador').fadeOut(5500, function() {
                        $(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                    });
   } else {
                    $('#indicador').fadeOut('fast', function() {
                        $(this).removeClass('cargando-satisfactorio').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                    });
   }
1
  • Comparando de esta manera me sirve dentro del always
    – Francisco
    Commented el 13 may. 2017 a las 21:00
0

¿Realmente necesitas un if en un always para definir si hay un error? si done se ejecuta cuando no hay error y fail se ejecuta cuando ocurrió un error

function cargarVistaCentral(nodo) {
        $.ajax({
            dataType: 'html',
            type: 'GET',
            url: Routing.generate('app_renderVistaCentral', {'id_estructura': nodo.id}),                
        }).done(function(data) {
            $('#vistas').html(data);
            $('#indicador').addClass('cargando-satisfactorio').slideDown('fast');
            $('#indicador').fadeOut('fast', function() {
                    $(this).removeClass('cargando-satisfactorio').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                });

        }).fail(function(jqXHR) {
            console.log(JSON.stringify(jqXHR));
            if (jqXHR.status === 0) {
                $('#indicador').removeClass('cargando-satisfactorio').addClass('cargando-error').html("Error de conexi&oacute;n");
            } else if (jqXHR.status === 401) {
                window.location = _HOMEPAGE;
            } else {
                $('#indicador').removeClass('cargando-satisfactorio').addClass('cargando-error').html(jqXHR.responseText);
            }
            $('#indicador').fadeOut(5500, function() {
                    $(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
             });
        });
    }
1
  • en el always estaba usando el if porque comparaba con un valor erróneo del always.
    – Francisco
    Commented el 13 may. 2017 a las 20:59
0

Leyendo un poco la documentación de JQuery, pues hay algo que se me pasó por alto, el método always recibe 3 argumentos:

jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { });

En caso de que la respuesta sea satisfactoria, pues .always() tomará los mismos argumentos que .done(), y en caso de ser fallida, .always() toma los mismos argumentos que .fail()

significa que puedo tener:

.always(function(dataOrjqXHR, textStatus, jqXHROrErrorThrown) {
            if (textStatus === 'error') {
                $('#indicador').fadeOut(5500, function() {
                    $(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                });
            } else {
                $('#indicador').fadeOut('fast', function() {
                    $(this).removeClass('cargando-satisfactorio').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                });
            }
        })

De esta forma no hay por qué chequear la existencia de la clase cargando-satisfactorio para el elemento indicador. Aunque es válido para este implementación muy específica, creo resulta más "bonito" chequear el argumento textStatus de .always()

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.