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.