ちょっとした序文...私はjQueryにかなり慣れていないので、何かが間違っているか冗長に見える場合は、お気軽に役立つ提案を提供してください。
さて、問題です。ページ上の2つの別々のリンクから開始される2つのモーダルがあります。
- 最初のモーダルはかなり問題がありませんでした。同じページに投稿するシンプルなフォームです。「close:」セクションの項目が何であるか疑問に思っている場合、それらは、ダイアログが閉じられたときに値をクリアしたいフォーム フィールドです。
- 2番目のものを追加すると、問題が発生しました。このモーダルは、coldfusion ページをモーダルに呼び出して画像を表示します。問題は、2 番目のものを開いた後に発生します。「閉じる」ボタンから2番目のモーダルを閉じることができません。次のエラーが表示されます。
エラー: 初期化前にダイアログでメソッドを呼び出すことはできません。メソッド「close」を呼び出そうとしました
モーダルの右上隅にある「x」から閉じる必要があります。閉じた後、最初に開こうとするとエラーが発生します。
エラー: 初期化前にダイアログでメソッドを呼び出すことはできません。メソッド「open」を呼び出そうとしました
これがそのコードです。
$(document).ready(function() {
$(".dig").click(function() {
//based on which we click, get the current values
var cItemName = $("#checklistItemName").attr( "title");
var c2id = $("#check2id").attr( "title");
$("#ItemName").html(cItemName);
$("#ItemID").html(c2id);
$("#objCheckItemName").val(cItemName);
$("#objCheck2ID").val(c2id);
console.log(cItemName);
console.log(c2id);
});
$( "#image-form" ).dialog({
autoOpen: false,
height: 450,
width: 650,
modal: true,
buttons: {
"Submit": function() {
$('#mForm').submit();
return true;
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$('#defaultSectionName')
.val('');
$('#defaultSectionDesc_hidden')
.val('');
$('#Photo')
.val('');
$('#objCheck2ID')
.val('');
$('#Check21')
.val('');
},
zIndex: 500
});
次のコードは、問題が発生していると思われる場所です。
$( "#image_trigger" )
.click(function() {
$( "#image-form" ).dialog( "open" );
});
var dlg=$('#register').dialog({
title: 'Case Pictures',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:650,
height:450,
buttons: {
close: function() {
$( this ).dialog( "close" );
}
},
zIndex: 500
});
$('#reg_link').click(function(e) {
e.preventDefault();
var linkurl=('assets/includes/modalPictures.cfm' + '?'
+ 'id=' + $("#objCheck2ID").val()
);
dlg.load(linkurl, function(){
dlg.dialog('open');
});
});
jQuery UI: 1.10.1
jQuery: 1.9.1
サーバー側: Coldfusion
HTML はかなり広範です。その一部を見る必要がある場合は、私に知らせてください。ご協力いただきありがとうございます！