вы уверены / грязные формы - скрыть или показать пожалуйста подождите

Я использую dirty-forms / are-you-sure js в тестовой форме, которая подтверждает, хочет ли пользователь перейти со страницы с несохраненными изменениями.

Это работает, как и ожидалось, но я также использую изображение «пожалуйста, подождите», которое показывает, когда пользователь делает вызов на сервер.

Как сделать так, чтобы изображение "подождите" отображалось ТОЛЬКО тогда, когда пользователь нажимает кнопку "Покинуть эту страницу" на -you-sure всплывающее окно с сообщением?

В настоящее время у меня есть изображение «Подождите, пожалуйста», которое появляется, когда пользователь нажимает кнопку отмены, потому что я не могу придумать, откуда еще его вызвать.

Вот мой код ‹ head >:

<div id="loading-div-background">
    <div id="loading-div" >
        <img  src="{{ STATIC_URL }}img/page-loader.gif" />
    </div>
</div>

Вот мой код шаблона:

<a href="{% url certification_details %}" class="btn" onclick="showProgressAnimation();">Cancel</a>

Вот код js, который у меня есть:

<script>
    $('form').areYouSure( {'message':'You have unsaved changes.'} );
</script>

РЕДАКТИРОВАНИЕ — добавлен CSS скрытого изображения в соответствии с запросом.

Это CSS, который скрывает значок «Подождите» при первой загрузке страницы:

#loading-div-background {
    background-color: rgba(246,246,246,0.7);
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

javascript forms jquery form-submit
person user1261774    schedule 14.09.2014    source источник
comment
В существующем ответе есть рабочий пример. Если что-то не работает с его ответом, оставьте комментарий и дайте ему знать. Выглядит хорошо для меня.   -  person Chris Baker    schedule 29.11.2014
comment
Кстати, как вы отображаете/скрываете изображение ..? Можете ли вы предоставить онлайн-демонстрацию, если проблема не устранена ..?   -  person T J    schedule 29.11.2014
comment
Крис Бейкер - посмотри еще раз. Загрузите страницу. Обновите страницу без внесения изменений.   -  person user1261774    schedule 30.11.2014

Ответы (3)


arrow_upward
5
arrow_downward

Вы можете сохранить состояние вашей формы и, возможно, значения вашей формы.

проверьте эти две ссылки.

https://stackoverflow.com/a/10312156/2655623

https://stackoverflow.com/a/26535253/2655623

Вы также можете получить все элементы формы и сохранить их где-нибудь.

Если вы хотите сбросить форму, вы также можете сбросить состояние сохраненных значений.

Однако это сырые идеи.

person Soley    schedule 04.12.2014
comment
Саливан, это лучший ответ, поэтому я присуждаю тебе награду. - person user1261774; 07.12.2014

arrow_upward
3
arrow_downward

Посмотрите на примеры:

   /*
    *  Mixing in your own logic into the warning.
    */
    $('#my-form').areYouSure( {'silent':true} );
    $(window).on('beforeunload', function() {
        isSunday = (0 == (new Date()).getDay());
        if ($('#my-form').hasClass('dirty') && isSunday) {
            return "Because it's Sunday, I'll be nice and let you know you forgot to save!";
        }
    }

Если вы хотите инициировать сообщение «Подождите» в любом случае (уходе или нет), вам, вероятно, следует использовать что-то вроде этого:

   /*
    *  Displaying your please wait message
    */
    $('#my-form').areYouSure( {'silent':true} );
    $(window).on('beforeunload', function() {
        $('#pleasewaitmessage').show();
        return "You have unsaved changes.";        
    }

Загрузить здесь

person geekymartian    schedule 15.09.2014
comment
Спасибо за ответ, но если страница сброшена и нажата кнопка отмены грязных форм, подождите, пожалуйста, не должно появляться на странице. Это ошибка, которая у меня сейчас есть. - person user1261774; 30.11.2014
comment
если страница сброшена и нажата кнопка отмены грязных форм - для меня это не имеет смысла. Не могли бы вы немного уточнить, что вы пытаетесь сделать / рабочий процесс? - person ; 05.12.2014
comment
yhax, если страница загрязнена и страница сброшена (или пользователь пытается уйти со страницы без сохранения изменений), появится всплывающее подтверждение выхода или пребывания. Значок «Подождите» должен появляться/отображаться только в том случае, если пользователь нажимает кнопку «Покинуть эту страницу». Имеет ли это смысл? - person user1261774; 05.12.2014

arrow_upward
-2
arrow_downward

Я не думаю, что это может быть достигнуто.

Саливан дал лучший ответ.

person user1261774    schedule 06.12.2014
comment
Почему вы отметили это как ответ? Я не думаю, что это нельзя пометить как ответ. - person Sasse; 03.09.2015