¿Cómo obligo a DOM a actualizar/actualizar justo antes y después de una consulta de AJAX?

Question

Tengo un problema con el navegador de mi icono de Ocupado. El código se ve así:

$("#busysymbol").show(); 
$("#busysymbol").position({my:"right top",at:"right top",of:$("#datepicker"),offset:"-3 3"}); 
var resp = $.ajax({url: "book_ajax.php?req=daysformonth&month=1", 
     cache: false, 
     async: false 
     }).responseText; 
$("#busysymbol").hide(); 
var daysInMonth = resp.split(","); 
...etc...

Este código funciona perfectamente en Firefox; sin embargo, en Chrome y Safari no se muestra el símbolo de ocupado. Creo que Chrome y Safari están guardando en caché los cambios en el DOM y que la llamada $ ("busysymbol"). Show() no se está refrescando de inmediato.

¿Hay alguna manera de forzar a Chrome/Safari a actualizar la pantalla?

Answer 1

Quizás intente utilizar ajaxStart y ajaxStop eventos globales para su símbolo de ocupado. Por ejemplo:

$("#busysymbol").ajaxStart(function(){ 
    $(this).show(); 
}); 
$("#busysymbol").ajaxStop(function(){ 
    $(this).hide(); 
}); 

al comienzo de su código, y quitar el ocultar y mostrar de su .ajax específica (manipuladores).

Oh, acabo de notar que está utilizando solicitudes síncronas, por lo que ni siquiera es AJAX, más parecido a SJAX. ¿Tiene alguna buena razón para bloquear por completo la interfaz de usuario de su navegador mientras espera que la solicitud finalice o se agote el tiempo de espera? Si no, entonces trate de usar algo como esto:

$("#busysymbol").hide(); 
$("#busysymbol").ajaxStart(function(){ 
    $(this).show(); 
}); 
$("#busysymbol").ajaxStop(function(){ 
    $(this).hide(); 
}); 
var resp = $.ajax({url: "book_ajax.php?req=daysformonth&month=1", 
     cache: false, 
     success: function (resp) { 
      var daysInMonth = resp.split(","); 
      ...etc... 
     } 
}); 

(no probado)

probar si funciona sin tener que desplazar la #busysymbol y luego tratar de añadir el posicionamiento correcto desde el principio. Tenga en cuenta que .position() no toma argumentos para que la línea más larga en su código no esté realmente haciendo nada - vea the docs. Lo que necesita es .offset() o .css().

Answer 2

Creo que Chrome y Safari están ejecutando su solicitud de Ajax sincrónicamente, a pesar de aynch bandera. Para conseguir alrededor de eso, usted podría ocultar el icono de una devolución de llamada de la función ajax así:.

$.ajax({ 
    url: 'book_ajax.php?req=daysformonth&month=1', 
    success: function(data) { 

    $("#busysymbol").hide(); 

    } 
});