2017-01-09 3 views
4

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>

いずれかは、このコードとどのようにこのプラグインを使用すると間違っているものを私に伝えることができますか?

+1

メッセージは機能しますが、メッセージとタイトル属性は機能しません。また、あなたのPC上でhtmlファイルで実行した場合、 '/ cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js'というリンクは動作しません。それはまたhttp/httpsの代わりにあなたのPCからそれをロードしようとします –

答えて

1

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>

+0

私と一緒に働くタンクをタンクしますが、私はdirtyform srcリンクで簡単な変更を行います。http:// cdnの前に追加しました – abkmrad

+0

http:// in私のスニペットも。ヘッドアップをありがとう – Joffutt4

1

@Joffuttは、実用的なソリューションを思い付いたが、彼が見落としていること、この動作のための説明があります。問題は、ここでダイアログモジュールを設定していることである:これは汚いフォームがデフォルトのブラウザダイアログを使用して、カスタムダイアログモジュールを使用しないよう指示

dialog: { title: 'Wait!' }, 

。ただし、残りのカスタムダイアログモジュール登録as per the documentationを完了していない(つまり、開いているメソッドが定義されていない)ため、無効な構成になっています。

カスタムダイアログモジュールを使用しない場合は、構成内にdialog:を定義しないでください。

関連する問題