Как заставить DOM обновлять / обновлять непосредственно перед и после ajax-запроса? - PullRequest
Новая
       23

Как заставить DOM обновлять / обновлять непосредственно перед и после ajax-запроса?

6 голосов
/ 03 марта 2011

У меня проблема с браузером с иконкой Busy.Код выглядит следующим образом: 

$("#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...

Этот код отлично работает в Firefox, однако в Chrome и Safari символ занятости не отображается.Я считаю, что Chrome и Safari кэшируют изменения в DOM и вызове $ ("busysymbol"). Show () не сразу обновляется.

Есть ли способ заставить Chrome / Safari обновитьдисплей.

Ответы [ 2 ]

7 голосов
/ 03 марта 2011

Возможно, попробуйте использовать глобальные события ajaxStart и ajaxStop для вашего занятого символа. Например: 

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

в начале вашего кода и удалите скрытие и отображение из ваших определенных обработчиков .ajax ().

О, я только что заметил, что вы используете синхронные запросы, так что это даже не AJAX - больше похоже на SJAX. У вас есть очень веская причина полностью заблокировать пользовательский интерфейс вашего браузера, пока вы ожидаете, пока запрос не будет завершен или истекло время ожидания? Если нет, попробуйте использовать что-то вроде этого: 

$("#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...
        }
});

(не проверено)

Попробуйте, если он работает без изменения положения #busysymbol, а затем попробуйте добавить правильное расположение в самом начале. Имейте в виду, что .position() не принимает аргументы, поэтому самая длинная строка в вашем коде на самом деле ничего не делала - см. документы . Что вам нужно, это .offset() или .css().

0 голосов
/ 03 марта 2011

Я думаю, что Chrome и Safari синхронно выполняют ваш Ajax-запрос, несмотря на флаг aynch. Чтобы обойти это, вы можете скрыть значок в функции обратного вызова ajax, например: 

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

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

  }
});
...