DirtyForms 不能与 $.blockUI 一起正常工作

Posted 2023-05-09

【中文标题】DirtyForms 不能与 $.blockUI 一起正常工作

【英文标题】：DirtyForms does not work properly with $.blockUI

【发布时间】：2018-11-10 15:11:09

【问题描述】：

我正在使用DirtyForms 和$.blockUI 插件，后者在单击链接时更改页面（在我的应用中，某些页面需要几秒钟才能加载，并且视觉反馈很好）。

当我更改字段内容然后单击任何链接时，会触发 DirtyForms：但是当我取消停留在页面上的过程时，$.blockUI 开始游戏，导致页面卡住

$('form[method="post"]').dirtyForms();
$('a').on('click', function()
	$.blockUI();
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>

<p>Change the field content to activate DirtyForms, then click on the link.<br>
When the popup appears, click on "cancel" to stay on the page.<br>
Watch blockUI getting fired as the link is going to be followed</p>
<form action="#" method="post">
  <input type="text" name="username" required>
  <button type="submit">send</button>
</form>
<a href="https://google.com">click me after changing field content</a>

请问有什么解决办法吗？

编辑：我也尝试了 stay.dirtyforms 和 afterstay.dirtyforms 事件，但它们没有效果。 defer.dirtyforms 似乎有效，但该事件被触发了两次（我放了一个 console.log() 来检查），我不确定这是要走的路......

【参考方案1】：

我已经编辑了我的答案：我已经添加了一些代码行来首先禁用onbeforeunload 对话框警报taken from here。最后还有一个链接，指向您可以尝试的另一个想法的答案。

我的想法：您必须阻止默认链接操作并使用 $.blockUI Modal Dialogs methods 打开自定义对话框，然后从链接中捕获链接属性href 将其放入里面变量并将变量值用于对话框的#yes 按钮。

看看这个解决方案能否满足你的需求

/* beforeunload bind and unbind taken from https://gist.github.com/woss/3c2296d9e67e9b91292d */

// call this to restore 'onbeforeunload'
var windowReloadBind = function(message) 
  window.onbeforeunload = function(event) 
    if (message.length === 0) 
       message = '';
    ;
  
    if (typeof event == 'undefined') 
       event = window.event;
    ;
    if (event) 
       event.returnValue = message;
    ;
    return message;
  
;

// call this to prevent 'onbeforeunload' dialog
var windowReloadUnBind = function() 
    window.onbeforeunload = function() 
      return null;
   ;
;

var linkToFollow; // href to follow

$('form[method="post"]').dirtyForms();

$('a').on('click', function(e)
        e.preventDefault();
        windowReloadUnBind(); // prevent dialog
	$.blockUI( message: $('#question'), css:  width: '275px'  );
        linkToFollow = $(this).attr('href');
);

$('#no').click(function()  
        $.unblockUI();
        return false; 
);

$('#yes').click(function()  
        $(window.location).attr('href', linkToFollow); 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>

<p>Change the field content to activate DirtyForms, then click on the link.<br>
When the popup appears, click on "cancel" to stay on the page.<br>
Watch blockUI getting fired as the link is going to be followed</p>
<form action="#" method="post">
  <input type="text" name="username" required>
  <button type="submit">send</button>
</form>
<a href="https://google.com" class="link">click me after changing field content</a>
<div id="question" style="display:none; cursor: default"> 
    <h6>Would you like to contine?.</h6> 
    <input type="button" id="yes" value="Yes" /> 
    <input type="button" id="no" value="No" /> 
</div>

其他想法取自另一个答案：其他想法是在beforeunload as seen in this answer 中的返回值之前进行简单的jQuery.ajax() 调用

【讨论】：

感谢 Emanuele：让它工作起来似乎有点棘手，但我很感激花在我的问题上的时间

是的，这是一种解决方案。感谢您的反馈