jQuery ダイアログのモーダル状態が消える
現在プロジェクトに取り組んでいます。画面上に検索、クリア、追加などのボタンがあります。追加ボタンを押すと、jQuery ダイアログが表示されます。
共通のjsは以下の通りです
var AddDialog = new function() {
self.d = null
this.init = function(opt){
var o = {modal:true,..omitted`..}; for (var k in opt ){o[k]=opt[k]}
self.d = $("#template").dialog(o);//テンプレートは div の ID です
$("#btnsave ").click (Function() {/*共通の保存方法*/});
$("#btnclose"). その他ちょっと
}
各画面初期化時
$(function(){
//その他ちょっと
AddDialog.init();
//その他少し
});
今回、jqueryDialog の便利さを実感しつつ、非常にクレイジーな現象にも遭遇しました。以前に遭遇したことがありますか?
画面がロードされた後、ダイアログにデータを入力した後、直接追加ボタンをクリックすると、入力チェック中のエラーもダイアログの指定された領域に表示され、モーダルが表示されます。状態を維持することも可能です。ただし、検索ボタンを押してクエリを実行し、追加ボタンをクリックした後、ダイアログの入力項目に誤りがある場合、すべて正常に表示されますが、モーダルステータスが自動的に false に変わります(これは毎回起こるわけではありません) 、しかし、原因が分からず、どれが問題なのかも分からないので、その可能性は非常に高いです)。
同様の問題に遭遇した人はいますか?調査の手がかりを提供していただければ幸いです。よろしくお願いします。
私が使用する jquery バージョン: 1.5.2
ui バージョンは: 1.8.13
firebug を使用してデバッグしたところ、入力チェック メソッドを実行した後、ダイアログがまだモーダル状態であることがわかりましたが、メソッドが実行された後、jquery が他のハンドラーがあるかどうかを判断した後、モーダル ステータスが消えます。 jQueryのバグなのか気になりますか?
最後に、この問題を回避するにはどうすればよいでしょうか?
ディスカッションへの返信(解決策)
入力チェックコードはどこですか?
入力チェックコードはどこですか?
司会者さん、お疲れ様でした。
問題は解決されました。今夜詳しく書きます、これは私自身のプログラムのバグです
昨日やっと理由が分かりましたが、上で述べたものはどれも役に立ちません。使用していた共用部分に問題があることが判明しました。
1) 画面上の検索ボタンを押すと処理モーダルダイアログ(※1)がポップアップし、検索コールバック関数(※1)で共通JSがOFFになります。
ここが問題です。初期のスタイルではポップアップ(※1)を必要としませんでしたが、後からスタイルを追加する際にコードの変更を減らすために、ポップアップをオフにするコード(※1)が発生しました。共通で書かれています。ポップアップ(※1)しなくてもクローズ用のコード(※1)を実行しても問題ないことを考慮し、クローズ用のコードは無条件で実行されるように記述しています。
2) 追加ボタンをクリックすると表示されるモーダルダイアログ(※2)。
(※2) のボタンは、押した後に (※1) のようなポップアップを表示する必要はありませんが、イベントによって一般的なコールバック関数も実行されます。このとき、コールバック内で(※1)を閉じると、追加した(※2)のモーダル状態も解除されます。
対策:(※1)を閉じる際に(※1)が開いているかどうかを判断し、開いている場合のみ(※1)を閉じるコードを実行します。
ヒント: jQuery のダイアログのモーダルは、スタイル付きの DIV をページ本文に追加することで実装されているため、この div を削除すると、スイッチがオフになります (※1) と、モーダルの状態も切り替わります (※2)。この現象を解消します