如何使用jquery.dirtyforms？
[英]How to use jquery.dirtyforms?
问题描述
I am getting confused on how to use jquery.dirtyforms . 
我对如何使用jquery.dirtyforms感到困惑。
I am trying to create a simple form with a text box and submit button. 我正在尝试使用文本框和提交按钮创建一个简单的表单。 If the user modify the text box and try to refresh the page or click on a link inside the page before saving the result, Dirty Forms plugin should alert the user. 如果用户修改文本框并尝试刷新页面或在保存结果之前单击页面内的链接，则Dirty Forms插件应提醒用户。 But nothing is working. 但没有任何工作。
Below is my code: 以下是我的代码：
<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>
What is wrong with this code and how to use this plugin? 这段代码有什么问题以及如何使用这个插件？
2 个解决方案
解决方案1
1 已采纳 2017-01-09 13:19:23
Your code will work if you remove the title and message from the dirtyforms call. 如果从dirtyforms调用中删除标题和消息，则代码将起作用。 As per the documentation: 根据文件：
// 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.'
});
Because you are trying to use the default browser dialog, these extra attributes cause the dirtyform code to break. 因为您尝试使用默认浏览器对话框，所以这些额外属性会导致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>
解决方案2
1 2017-01-10 07:40:44
While @Joffutt came up with a working solution, there is an explanation for this behavior that he overlooked. 虽然@Joffutt想出了一个有效的解决方案，但他忽略了这种行为的解释。 The issue is that you are setting a dialog module here: 问题是您在此处设置对话框模块：
dialog: { title: 'Wait!' },
This tells Dirty Forms not use the default browser dialog and to use your custom dialog module. 这告诉Dirty Forms 不使用默认浏览器对话框并使用自定义对话框模块。 However, you did not complete the rest of the custom dialog module registration as per the documentation (namely, you don't have an open method defined), so you have an invalid configuration. 但是，您没有按照文档完成剩余的自定义对话框模块注册（即，您没有定义开放方法），因此您的配置无效。
If you don't want a custom dialog module, you should not define a dialog: in your configuration. 如果您不想要自定义对话框模块，则不应在配置中定义dialog:
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.