headers - jquery ajax

Deshabilite ajaxStart() y ajaxStop() para una solicitud específica

Question

Estoy usando .ajaxStart () y .ajaxStop () para mostrar un modal mientras se realiza una solicitud de ajax. (entre el inicio y la parada)

Ahora me gustaría agregar una función longpoll que siga esperando notificaciones, similar a la que se encuentra en la esquina superior izquierda de este sitio.

Mi problema ahora radica en deshabilitar este modal solo para la solicitud longpolling.

Registro de "cargar la pantalla" dentro y fuera de los controladores:

$(document).ajaxStart(handleAjaxStart);
$(document).ajaxStop(handleAjaxStop);

Mi función longpoll:

$.ajax({
timeout: 35000,
url: longPollUrl,
success: function(data){
if(data.queCount) $(''#numQueCount'').html(data.queCount);
if(data.queAccept) $(''#numQueAccept'').html(data.queAccept);
},
dataType: ''json'',
complete: longpoll
});

Lo intenté:

$().off(''ajaxStart'');
$().off(''ajaxStop'');

..y volver a conectar los controladores después de comenzar el sondeo, pero no hay alegría.

También traté de introducir una variable global en handleAjaxStart() que volvería en la primera línea de la función, pero parece que mata por completo la pantalla de carga.

¿Alguna idea de cómo se puede lograr esto?

Answer 1

Después de leer todas las soluciones posibles, quiero combinar las respuestas.

Solución 1: Enlazar / Desvincular

//binding
$(document).bind("ajaxStart.mine", function() {
$(''#ajaxProgress'').show();
});
$(document).bind("ajaxStop.mine", function() {
$(''#ajaxProgress'').hide();
});
//Unbinding
$(document).unbind(".mine");

Es una solución depreciada. Antes de jQuery 1.9, los eventos globales de ajax como ajaxStart, ajaxStop, ajaxError etc. pueden vincularse a cualquier elemento. Después de jQuery 1.9:

A partir de jQuery 1.9, todos los manejadores de los eventos Ajax globales de jQuery, incluidos los agregados con el método .ajaxStart (), deben adjuntarse al documento.

Por lo tanto, no podemos vincular / desvincular estos eventos a espacios de nombres personalizados.

Solución 2: establezca la propiedad global en false

$.ajax({
url: "google.com",
type: "GET",
dataType: "json",
global: false, //This is the key property.
success: function (data) {
console.log(data);
},
error: function (data) {
console.log(data);
}
});

Esta solución funciona para desactivar ajaxStart()/ajaxStop() evento (s). Sin embargo, también desactiva ajaxComplete(), ajaxError(), ajaxSend(), ajaxSuccess() . Si no utiliza estos eventos globales, parece correcto, pero cuando sea necesario, debe volver y cambiar la solución para todas las páginas donde configure global: false .

Solución 3: Usar variable global

var showLoadingEnabled = true;
$(document).ready(function () {
$(''#loading'')
.hide() // at first, just hide it
.ajaxStart(function () {
if (showLoadingEnabled) {
$(this).show();
}
})
.ajaxStop(function () {
if (showLoadingEnabled) {
$(this).hide();
}
});
});
function justAnotherFunction() {
window.showLoadingEnabled = false;
$.ajax({
url: ''www.google.com'',
type: ''GET'',
complete: function (data) {
window.showLoadingEnabled = true;
console.log(data);
}
});
}

Las variables globales no se deben usar en los archivos javascript. Sin embargo, esta es la solución más simple, puedo encontrar.

Preferí la tercera solución para mi proyecto.

Answer 2

Me lo imaginé..

Hay un atributo en el objeto de opciones .ajax() toma llamada global .

Si se establece en falso, no activará el evento ajaxStart para la llamada.

$.ajax({
timeout: 35000,
url: longPollUrl,
success: function(data){
if(data.queCount) $(''#numQueCount'').html(data.queCount);
if(data.queAccept) $(''#numQueAccept'').html(data.queAccept);
},
global: false, // this makes sure ajaxStart is not triggered
dataType: ''json'',
complete: longpoll
});