сигурни ли сте / мръсни форми - скрийте или покажете, моля, изчакайте

Използвам dirty-forms / are-you-sure js на тестов формуляр, който потвърждава дали потребителят иска да навигирайте далеч от страница с незапазени промени.

Това работи според очакванията, но аз също използвам изображение „моля, изчакайте“, което показва, когато потребителят се обади на сървъра.

Как да задействам изображението „моля, изчакайте“ САМО когато потребителят кликне върху бутона „Напускане на тази страница“ на -сигурен ли си изскачащ прозорец за съобщение?

В момента имам задействано изображение за моля, изчакайте, за да се появи, когато потребителят щракне върху бутона за отмяна, b/c Не мога да се сетя откъде другаде да го задействам.

Ето моя ‹ head > код:

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

Ето кода на моя шаблон:

<a href="/bg{% 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;
}

person user1261774    schedule 14.09.2014    source източник
comment
Съществуващият отговор има работещ пример. Ако нещо не работи с неговия отговор, оставете коментар и го уведомете. На мен ми изглежда добре.   -  person Chris Baker    schedule 29.11.2014
comment
BTW как показваш/скриваш изображението..? Можете ли да предоставите онлайн демонстрация, ако проблемът продължава..?   -  person T J    schedule 29.11.2014
comment
Крис Бейкър - погледнете отново. Заредете страницата. Обновете страницата, без да правите промени.   -  person user1261774    schedule 30.11.2014


Отговори (3)


Можете да запазите състоянието на вашия формуляр и може би стойностите на вашия формуляр.

проверете тези две връзки.

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

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

Можете също така да получите всички елементи от формуляра си и да ги запишете някъде.

Когато искате да нулирате формуляра си, можете също да нулирате състоянието на запазените стойности.

Това обаче са сурови идеи.

person Soley    schedule 04.12.2014
comment
Саливан, това е по-добрият отговор, затова ти давам наградата. - person user1261774; 07.12.2014

Вижте примерите:

   /*
    *  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.";        
    }

Plunkr тук

person geekymartian    schedule 15.09.2014
comment
Благодаря за отговора, но ако страницата се нулира и се щракне върху бутона за отмяна на мръсните формуляри, моля изчакайте не трябва да се показва на страницата. Това е грешката, която имам в момента. - person user1261774; 30.11.2014
comment
ако страницата е нулирана и бутонът за отмяна на мръсните форми е щракнат - това няма смисъл за мен. Бихте ли изяснили малко повече какво се опитвате да направите / работен процес? - person ; 05.12.2014
comment
yhax, ако страницата е замърсена и страницата е нулирана (или потребителят се опитва да излезе от страницата, без да запази промените), ще се появи потвърждението за напускане или оставане. Иконата за моля, изчакайте трябва да се появи/изведе само ако потребителят щракне върху бутона за напускане на тази страница. Има ли логика в това? - person user1261774; 05.12.2014

Не мисля, че това може да се постигне.

Salivan даде по-добър отговор.

person user1261774    schedule 06.12.2014
comment
Защо отбелязахте това като отговор? Не мисля, че може да се маркира като отговор. - person Sasse; 03.09.2015