DirtyForms не работает должным образом с $ .blockUI - PullRequest
Новая
       29

DirtyForms не работает должным образом с $ .blockUI

0 голосов
/ 31 мая 2018

Я использую плагин 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 Ответ

0 голосов
/ 11 июня 2018

Я отредактировал свой ответ : я добавил строку кода, чтобы отключить сначала диалоговое предупреждение onbeforeunload, взято отсюда .И в конце ссылку на ответ с другой идеей, которую вы можете попробовать.

Моя идея: Вы должны предотвратить действие ссылки по умолчанию и использовать модальные диалоги $ .blockUI .методы , чтобы открыть пользовательское диалоговое окно, затем перехватить атрибут ссылки 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>

Другая идея взята из другого ответа: Другой идеей будет сделать простой вызов jQuery.ajax({}) перед возвращаемым значением в beforeunload как видно из этого ответа

...