показывать div при отправке формы, работает в Chrome, FF, IE, но не в Safari

Question

Не уверен, куда идти с этим.

У меня есть форма, при отправке которой я хотел бы отобразить сообщение "Обработка, пожалуйста, подождите". (Форма имеет фотографии для загрузки, поэтому может занять некоторое время)

У меня есть следующий jQuery

$(document).ready(function() {
    $('#addnews').submit(function() {
        $('#loading').show();
    });
});

addnews это мой идентификатор формы, и div в моем шаблоне

<div id="loading">Please wait, your news is being submitted...
    <img src="/-/images/addwalk-loader.gif"/>
</div>

с этим CSS

#loading{
    display:block;
    display: none;
    background:#399f8a;
    color:#FFFFFF;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding:10px;
    margin-top: 10px;
}

.loading img{
    float: right;
}

Теперь это работает, когда я нажимаю Submit в FF (Mac), Chrome (Mac & PC) и IE9 (хотя gif не анимируется, но я знаю, что это отдельная проблема)

но, похоже, он не хочет работать в Safari на Mac. Любые идеи, если есть что-то в том, что у меня есть, это останавливает это? Или какой лучший способ отладки это? Спасибо!

Answer 1

Это сработало для меня. Не знаю почему, но, возможно, Safari нужен небольшой перерыв, чтобы действительно показать его перед отправкой :) Похоже, что отправка останавливает некоторые события на странице. Анимированные GIF-файлы останавливаются при отправке в Safari и IE, но в Chrome и FF они по-прежнему перемещаются в процессе отправки.

$(document).ready(function() {
    $('#addnews').submit(function() {
        setTimeout(gogo,1);    
    });
});

function gogo() {
    $('#loading').show();
}

Answer 2

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

После просмотра консоли на предмет подсказок я понял, что все изменения CSS происходят и применяются к странице, однако я просто не вижу их отраженных на экране.

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

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

Для вас это будет означать что-то вроде этого ...

$(document).ready(function() {
    $('#addnews').submit(function(e) {
        e.preventDefault();
        $('#loading').show();
        $(this).submit();
    });
});

Однако возникает еще одна проблема, так как submit - это инициирующее событие, а событие, которое мы хотим запустить, создает бесконечный цикл, который никогда не будет отправлен из-за того, что мы предотвращаем дефолт.

Чтобы решить эту проблему, вам либо не нужно запускать все из отправки, либо мы можем сделать что-то вроде этого ...

$(document).ready(function() {
    $('#addnews').each(function(){
        this.preventNextSubmit = true;            
    }).submit(function(e) {
        if(this.preventNextSubmit == true){
            this.preventNextSubmit = false;
            e.preventDefault();
            $('#loading').show();
            $(this).submit();
        }
    });
});

Этот пример изначально добавляет логическое значение к форме, установленной в значение true. Если это правда, он подавляет отправку формы и вместо этого показывает анимацию, затем он сбрасывает логическое значение и вызывает повторную отправку, которая теперь будет просто отправлена ​​как обычно.

Надеюсь, это поможет:)

Answer 3

Похоже, что это проблема, которая потребует от вас подготовить состояние страницы, на которой вы хотите, чтобы она была на до отправки. Итак, если вы не слишком привязаны к форме с кнопкой type='submit', вот правильное решение:

Шаг 1

Измените кнопку submit на обычную кнопку.

Шаг 2

<input type="button" class=".fake_submit" value="Submit" />

Привязать функцию, которая показывает оверлей, так:

$(".fake_submit").click(function(){
      $('.overlay').fadeIn(function(){
    $(form).submit();
   });
});

Исчезновение в анонимной функции действует как временная задержка, поэтому к тому времени, когда форма фактически исчезает, состояние наложения уже будет установлено. Это сработало для меня.

Бонусный совет

Если вы хотите какую-то анимацию, Safari, похоже, мешает gifs делать то, для чего они были рождены. Может быть, ошибка, или, возможно, люди из Apple решили, что бессмысленно тратить ресурсы на страницу, которая вот-вот выйдет. Безотносительно причины они, кажется, не включали анимацию в это. Таким образом, вы можете использовать загрузчик анимации CSS3 вместо gif и в настольной версии Safari, это, похоже, все еще работает. Вы можете найти классную анимацию здесь:

http://fortawesome.github.io/Font-Awesome/examples/#animated