Safari не обновляет пользовательский интерфейс во время отправки формы

Question

У меня есть функция JavaScript, которая отправляет форму.

Первый шаг моей функции - отключить его (чтобы предотвратить несколько кликов) и применить класс, который лучше иллюстрирует, что он отключен. Я также меняю текст на «Пожалуйста, подождите ...»

Следующим шагом является подтверждение моей формы. Если проверка не выполнена, верните изменения на первом шаге, чтобы вернуть кнопку в нормальное состояние.

Если валидация прошла, отправьте форму.

Все это в основном происходит в одном процессе.

То, что я нахожу, происходит в том, что в Safari первый этап процесса (стили кнопок) почти игнорируется. После дальнейшего копания я понял, что он работает, но пользовательский интерфейс не перерисовывается до завершения процесса. Проблема здесь в том, что завершение процесса является перенаправлением от страницы, поэтому пользователь никогда не увидит «Пожалуйста, подождите ...»

Затем я исследовал, почему Safari не перерисовывает пользовательский интерфейс, и я обнаружил ряд исправлений для этого, один из таких примеров ниже:

// Aims to trigger the redraw by 'resetting' it 
elem.style.display='none'; 
elem.offsetHeight; 
elem.style.display=''; 

Еще один я пытался намеренно скрывается и показывающий элемент до/после обновления с использованием прототипа (который является основной библиотекой JavaScript в системе):

elem.hide(); 
elem.addClassName('disabledBtn'); 
elem.disable(); 
elem.update('Please Wait'); 
elem.show(); 

Другим было создание e «перерисовать» метод, чтобы заставить перерисовать.

Element.addMethods({ 
    redraw: function(element){ 
     element = $(element); 
     var n = document.createTextNode(' '); 
     element.appendChild(n); 
     (function(){n.parentNode.removeChild(n)}).defer(); 
     return element; 
    } 
}); 
... 
elem.addClassName('disabledBtn'); 
elem.disable(); 
elem.update('Please Wait'); 
elem.redraw(); 

Ни один из этих элементов не будет работать. Процесс не будет обновлять пользовательский интерфейс до завершения, а пользователь перенаправляется. Для справки, это довольно интенсивная форма с хорошими несколькими секундами обработки, требуемыми во время ее представления, так что это кошмар UX.

Неужели кто-то еще сталкивается с этой ситуацией?

Answer 1

Я понял это.

Поскольку это технически обходное решение, а не решение проблемы, я все равно буду открыт для других ответов, которые могут решить проблему напрямую.

Я подумал об этой терминологии «process» и о том, как я мог бы эффективно завершить процесс, тем самым применяя стили, и запустил другую, чтобы отправить форму.

То, как я это понял, состояло в том, чтобы принять заключительный этап моего кода (представление формы) и вставить его в асинхронный процесс. Таким образом, процесс моделирования и проверки «завершается», так как изменения стиля вступают в силу немедленно, и представление формы будет происходить в какой-то момент после этого.

мне удалось это асинхронный процесс с setTimeout()

elem.observe('click', function(e) { 
    // [Disabled styles] 
    // [Form Validity] 
    if (!valid) { 
     // [Reverse Button Disabling] 
    } else { 
     setTimeout(function(){ $('myform').submit(); }, 0); 
    } 
}); 

Answer 2

Вы пытались остановить событие первым (в случае, если ваша кнопка является актуальной type="submit")? то есть

elem.observe('click', function(e) { 
    e.stop(); // prevent the default actions 

    // [Disabled styles] 
    // [Form Validity] 

    if (!valid) { 
     // [Reverse Button Disabling] 
    } else { 
     $('myform').submit(); 
    } 
});