Любая помощь о том, как использовать jquery.dirtyforms?

Я запутался в том, как использовать jquery.dirtyforms.

Я пытаюсь создать простую форму с текстовым полем и кнопку отправки. Если пользователь изменил текстовое поле и попытался обновить страницу или щелкнуть ссылку внутри страницы перед сохранением результата, плагин Dirty Forms должен предупредить пользователя. Но ничего не работает.

Ниже мой код:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js" type="text/javascript"></script>
</head>

<body>
<script type="text/javascript">

    $(document).ready(function(){
            $('form').dirtyForms({ 
        dialog: { title: 'Wait!' }, 
        message: 'You forgot to save your details. If you leave now, they will be lost forever.' 
    });
    });

</script>
<form action="/" method="post">
        <input id="input" type="text" />
        <button id="btnSubmit" type="submit" value="Submit">Submit</button>
        </form>

<a href="http://www.google.com">google</a>
</body>
</html>

Может кто-нибудь сказать мне, что не так с этим кодом и как использовать этот плагин?

Источник

2 ответа

Решение

Ваш код будет работать, если вы удалите заголовок и сообщение из вызова dirtyforms. Согласно документации:

// Customize the title and message.
// Note that title is not supported by browser dialogs, so you should 
// only set it if you are using a custom dialog or dialog module.
$('form').dirtyForms({ 
    dialog: { title: 'Wait!' }, 
    message: 'You forgot to save your details. If you leave now, they will be lost forever.' 
});

Поскольку вы пытаетесь использовать диалоговое окно браузера по умолчанию, эти дополнительные атрибуты приводят к разрыву кода dirtyform.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js" type="text/javascript"></script>
</head>

<body>
<script type="text/javascript">

    $(document).ready(function(){
            $('form').dirtyForms();
    });

</script>
<form action="/" method="post">
        <input id="input" type="text" />
        <button id="btnSubmit" type="submit" value="Submit">Submit</button>
        </form>

<a href="http://www.google.com">google</a>
</body>
</html>

Источник

Хотя @Joffutt придумал рабочее решение, есть объяснение этому поведению, которое он упустил из виду. Проблема в том, что вы устанавливаете диалоговый модуль здесь:

dialog: { title: 'Wait!' },

Это говорит Dirty Forms не использовать диалоговое окно браузера по умолчанию и использовать ваш пользовательский диалоговый модуль. Однако вы не завершили оставшуюся часть регистрации пользовательского диалогового модуля согласно документации (а именно, у вас не определен метод open), поэтому у вас неверная конфигурация.

Если вам не нужен пользовательский диалоговый модуль, вы не должны определять dialog: в вашей конфигурации.

Источник
Другие вопросы по тегам