テーブルを使用してデータを表示し、ユーザーが行をクリックして関連データのフォームをポップアップすることで、テーブル内のデータを編集できるようにするRuby on Railsアプリがあります。フォームに変更が加えられると、テーブル内の該当する行が更新されます。
適切なフォームを表示するテーブル行クリックのイベント リスナーは次のようになります。
$('.addable-rows > tbody').on('click', 'tr', function(e){
e.preventDefault();
var fieldset = $($(this).data('id'));
if ($(this).hasClass('selected')){
$(this).removeClass('selected');
fieldset.hide('slow');
} else {
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
fieldset.siblings().hide('slow');
fieldset.show('slow');
}
});
フォームの入力の変更をチェックし、テーブルの適切な行を更新するリスナーは次のようになります。
$('.addable_row_host').on('change', ':input', function(){
var fieldset = $(this).closest('fieldset')
var id = fieldset.attr('id')
$('#'+id+'_tr').replaceWith(build_row(fieldset, id));
});
上記で参照されている行の作成方法は次のとおりです。
function build_row(fields, id){
row = $("<tr id='"+id+"_tr' data-id='#"+id+"' class='selected'></tr>");
fields.find('select, input:not([type=hidden])').each(function(){
val = $(this).val();
if(val == null){
val = '';
}else if(val.indexOf(",") !== -1){
val.split(",").join(", ");
}
row.append('<td>'+val+' </td>');
});
return row;
}
これはすべて機能し、Chrome/FF/Safari では非常に便利ですが、IE が最も不自然にグラグラします。IE はクラッシュを報告するウィンドウをポップアップし、ページをリロードします。コンソールで問題が発生した原因については言及されていません。さらに、このコードのすべてのデバッグ ステートメントが実行され、クラッシュの前にコンソールに表示されるため、クラッシュが発生している場所を特定できませんでした。
私が欠けているものを知っている人はいますか?