ダイアログボックスを検索領域として使用しています。ユーザーが追加アイコンをクリックすると、ダイアログがポップアップし、テキストボックスと小さな検索アイコンが表示されます。検索アイコンをクリックするか、テキストボックス内でEnterキーを押すと、検索を開始したいと思います。
FF 19では完全に機能しますが、IE 9では、Enterボタンを押すとダイアログボックスが閉じます。スタンドアロンのHTMLページと、テキストボックス付きのシンプルなダイアログでテストしましたが、IE9は正常に動作します。そのため、私のコードには、IE9がダイアログボックスを閉じるきっかけとなる何かがあります。
formonダイアログボックスがありません。結果のAJAX呼び出しを実行し、結果が返されると、ダイアログボックスに[追加]ボタンがあり、チェックボックスを使用して、メインページの下のリストボックスに選択した結果を追加します。
ダイアログボックスの1つのボタンがEnterボタンなどにバインドされているという問題のスタックオーバーフローに関するいくつかのクエリをここで読んだので、[追加]ボタンを削除しました。テキストボックスの.keypressコードも削除しましたが（検索AJAX関数が起動します）、Enterボタンを押すとダイアログが閉じます。
ダイアログボックスでabeforeClose: function( event, ui )を実行し、いくつかのイベント情報を警告しました。警告ボックスが開いている間close button (x)、ダイアログ上のにフォーカスがあることがわかります。
Enterキーを押したときに閉じるボタンをトリガーしているものをさかのぼって追跡するにはどうすればよいですか？IEデバッガー、beforeClose、およびbeforeClose関数内にブレークポイントを設定しようとしましたが、IEはそこでブレークしません。また、デバッガーが優れているFFでは問題を再現できません。
以下の私のコードのスニペット：
$('#dialog_add_assign_to').dialog({
autoOpen: false,
closeOnEscape: false,
/*open: function(event, ui) { $(".ui-dialog-titlebar-close", $(this).parent()).hide(); },*/
modal: true,
resizable: true,
minWidth: 600,
buttons: {
"Add": function() {
$('.dialog_add_assign_to_result_checkboxes').each(function() {
if ($(this).is(':checked') ) {
$('#' + $('#dialog_add_assign_to').data("type") + '_id').append('<option value="' + $(this).attr('id') + '">' + $(this).attr('ref_name') + ' (' + $(this).attr('ref_country') + ')</option>');
}
});
},
"cancel": function() {
$(this).dialog( "close" );
}
},
beforeClose: function( event, ui ) {
$('#dialog_add_assign_to_result > tbody:last').empty();
alert(event.originalEvent.originalEvent );
event.preventDefault();
}
});
//When user presses enter, fire off the search function (search icon click)
$("#txt_search").keypress(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
$("#search_assigned_to").click();
}
});
//Click on the icon to start AJAX search call
$("#search_assigned_to").click(function () {
$('#dialog_add_assign_to_result > tbody:last').empty();
$.ajax({
type :'GET',
url : 'get_ajax_data.php?type=search_' + $('#dialog_add_assign_to').data("type") + '&search_text=' + $("#txt_search").val(),
dataType : 'xml',
success : function(xml_results) {
$('#dialog_add_assign_to_result > tbody:last').append('<tr><td><?=_NAME?></td><td><?=_COUNTRY?></td><td></td></tr>');
console.log(xml_results);
$(xml_results).find('search_' + $('#dialog_add_assign_to').data("type")).each(function(){
var int_id = $(this).find("id").text();
var str_name = $(this).find("name").text();
var str_country = $(this).find("country_name").text();
if (int_id == '----') {
var str_tmp = '';
} else {
var str_tmp = '<input type="checkbox" class="dialog_add_assign_to_result_checkboxes" ref_name="' + str_name + '" ref_country="' + str_country + '" id="' + int_id + '" />';
}
$('#dialog_add_assign_to_result > tbody:last').append('<tr><td>' + str_name + '</td><td>' + str_country + '</td><td>' + str_tmp + '</td></tr>');
});
}
});
});
ダイアログHTML：
<div id="dialog_add_assign_to">
<input type="text" id="txt_search" name="txt_search" /><img class="img_16" id="search_assigned_to" src="/images/tray/magnify.gif" />
<table id="dialog_add_assign_to_result"><tbody></tbody></table>
</div>