Question

我在测试表单上使用dirty-forms / are-you-sure js，确认用户是否确实想要离开未保存更改的网页。

这可以按预期工作，但我也在使用＆＃34;请等待＆＃34;显示用户何时调用服务器的图像。

我如何才触发＆＃34;请等待＆＃34;图片仅当用户点击＆＃34;离开此页面时＃34; are-you-sure消息弹出框中的按钮？

目前，当用户点击取消按钮时，我已触发请等待图片，b / c我无法想到还有哪个地方可以触发它。

这是我的＆lt;头＆gt;代码：

<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;
}

Answer 1

您可以保存表单的状态以及表单的值。

检查这两个链接。

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

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

您还可以获取表单的所有元素并将其保存在某处。

如果要重置表单，也可以重置已保存值的状态。

但这些都是原创的想法。

Answer 2

看一下例子：

   /*
    *  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 here

Answer 3

我不认为这可以实现。

Salivan给出了更好的回应。

你确定/脏的形式 - 隐藏或显示请等待

3 个答案: