Не применяется css во время preventDefault. Как решить?

Question

[alst161]

loginButton.addEventListener('click', function(e) {
    e.preventDefault();
    LoginModalStep1.getElementsByClassName('form_loading')[0].classList.remove('modal-block-inactive');
    var xhr = new XMLHttpRequest();
     ...отправка...
    LoginModalStep1.getElementsByClassName('form_loading')[0].classList.add('modal-block-inactive');
});

В такой ситуации класс добавляется. Отправка занимает например 3 сек (поставил задержку в отладчике хрома). Но сами стили не применяются. Только когда функция полностью отработает стили применяются. Т.е. если удалить строчку ( LoginModalStep1.getElementsByClassName('form_loading')[0].classList.remove('modal-block-inactive')) то до отправки добавится класс modal-block-inactive но его стиль применится после выполнения функции.

Как это обойти?

Comments

[ThunderCat]

на фиддл... а то нифига не понятно.

[Flying]

alst161 у вас там, случаем, не синхронный XHR запрос?

[alst161]

Flying, нет

[alst161]

ThunderCat, суть в том что любые манипуляции с css браузер не отображает пока функция не отработает

[Flying]

alst161, Покажите код полностью? Можно url скрыть и т.п. что не хочется светить, так но чтобы весь код остался. По мне так очень подозрительно выглядит желание менять CSS класс после асинхронного XHR запроса

Answer 1

[ThunderCat]

alst161, первое и самое тупое что приходит в голову - поставить задержку исполнения аякс запроса на пол секунды и проверить "а был ли мальчик?", в смысле проблема вообще в аяксе? И второе - проверить что то же самое происходит с прямой инъекцией цсс свойств, а так же проверить работу с другим классом, возможно класс который вы применяете "кривой".