0

テーブルを使用してデータを表示し、ユーザーが行をクリックして関連データのフォームをポップアップすることで、テーブル内のデータを編集できるようにする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+'&nbsp;</td>');
  });
  return row;
}

これはすべて機能し、Chrome/FF/Safari では非常に便利ですが、IE が最も不自然にグラグラします。IE はクラッシュを報告するウィンドウをポップアップし、ページをリロードします。コンソールで問題が発生した原因については言及されていません。さらに、このコードのすべてのデバッグ ステートメントが実行され、クラッシュの前にコンソールに表示されるため、クラッシュが発生している場所を特定できませんでした。

私が欠けているものを知っている人はいますか?

4

0 に答える 0