jQuery addClass () не работает до jQuery.ajax () - PullRequest
Новая
       3

jQuery addClass () не работает до jQuery.ajax ()

3 голосов
/ 31 марта 2010

Я пытаюсь получить кнопку, чтобы onclick применил к телу класс loading (устанавливает курсор на "wait") перед выполнением серии запросов ajax.

Код: 

$('#addSelected').click(function(){
    $('body').addClass('loading');

    var products = $(':checkbox[id^=add_]:checked');
    products.each(function(){
        var prodID = $(this).attr('id').replace('add_', '');
        var qty = $('#qty_' + prodID).val();
        if($('#prep_' + prodID).val())
        {
            prodID += ':' + $('#prep_' + prodID).val();
        }
        // Have to use .ajax rather than .get so we can use async:false, otherwise
        // product adds happen in parallel, causing data to be lost. 
        $.ajax({
            url: '<?=base_url()?>basket/update/' + prodID + '/' + qty,
            async: false,
            beforeSend: function(){
                $('body').addClass('loading');
            }
        });
    });
});

Я пытался сделать 

$('body').addClass('loading');

как до запроса, так и в качестве обратного вызова beforeSend, но разницы нет.

В firebug я вижу, что body не получает класс loading до тех пор, пока запросы не будут выполнены.

Есть идеи?

Я не сортировал это так, как считаю чистым, но я нашел решение.

Если я добавлю setTimeout(function(){ выше var products... и }, 1); ниже конца блока products.each, этот чанк будет задержан, поэтому сначала добавится addClass.

Ответы [ 2 ]

3 голосов
/ 31 марта 2010

Посмотрите на событие jquery .ajaxStart .

Это будет выглядеть примерно так 

$('#addSelected').ajaxStart(function() {
  $('body').addClass('loading');
});

РЕДАКТИРОВАТЬ: я посмотрел документацию jquery и обнаружил, что установка async = false блокирует браузер от других действий. Из документации jquery:

asyncBoolean По умолчанию: true

По умолчанию все запросы отправляются асинхронно (то есть по умолчанию установлено значение true). Если вам нужны синхронные запросы, установите для этого параметра значение false. Обратите внимание, что синхронные запросы могут временно блокировать браузер, отключая любые действия, когда запрос активен.

Может ли это быть причиной проблемы? Попробуйте войти в консоль в событии ajaxStart и посмотреть, запускается ли оно.

0 голосов
/ 31 марта 2010

Какую версию jQuery вы используете? Я выполняю очень похожие функции, и мои вызовы всегда происходят до вызова ajax. Я использую jQuery v1.4.2, так что, возможно, ваша проблема в более старой версии?

Кроме того, из-за того, что вы выполняете цикл «each ()», вам обязательно нужно вызвать addClass перед вызовом .ajax.

...