ajaxの呼び出し結果を持つブートボックスダイアログのテーブルを作成

Question

私は現在、ユニークな機会に出席報告が必要なアプリケーションを開発中です。 JSONオブジェクトのリストをAJAX呼び出しで取得します。

私はAJAX呼び出しの結果の各項目の新しい行を作成するブートボックスのダイアログにテーブルを作成します。各行は名前と名前のIDにリンクされたチェックボックスで構成されます。

しかし、私がブートボックスを表示すると、object.objectとその下の空のボックスだけが表示されます。

私は間違っていますか？私はここでのソリューションはbootboxを呼び出す前に、文字列を作成することだと思います

$.ajax({ 
    type: 'GET', 
    url: '/Lecture/GetParticipantsToAttend', 
    dataType: 'json', 
    data: { id: lectureId }, 
    success: function (participants) { 

     bootbox.dialog({ 
      backdrop: false, 
      title: "Attendance", 
      message: '<table class="table-striped form-control" id="tblParticipants"> ' 
       + $.each(participants, function (i, participant) { 
        '<tr> ' 
         + '<td class="col-lg-11 col-md-11 col-sm-11 col-xs-11"> ' 
        + '<label> ' + participant.FullName 
        + '</label>' + '</td> ' 
        + '<td class="text-center col-lg-1 col-md-1 col-sm-1 col-xs-1">' 
        + 
       (participant.Attended == true ? '<input type="checkbox" value="' + participant.ParticipantId + '" checked="checked"/>' : '<input type="checkbox" value="' + participant.ParticipantId + '" />') 
        + '</td> ' 
        + '</tr> ' 
      }) + '</table> ', 
      buttons: { 
       success: { 
        label: "Save", 
        className: "btn-success", 
        callback: function() { 

        } 
       }, 
       danger: { 
        label: "Cancel", 
        className: "btn-danger", 
        callback: function() { 

        } 
       } 
      } 
     })    
    } 
}) 

Answer 1

：

は、ここに私のコードです。 このようなことをやりましょう：

$.ajax({ 
type: 'GET', 
url: '/Lecture/GetParticipantsToAttend', 
dataType: 'json', 
data: { id: lectureId }, 
success: function (participants) { 

    var table = '<table class="table-striped form-control" id="tblParticipants"> '; 
    $.each(participants, function (i, participant) { 
     var tr = '<tr> '; 
     tr += '<td class="col-lg-11 col-md-11 col-sm-11 col-xs-11"> '; 
     tr += '<label> ' + participant.FullName; 
     tr += '</label>' + '</td> '; 
     tr += '<td class="text-center col-lg-1 col-md-1 col-sm-1 col-xs-1">'; 
     tr += (participant.Attended == true ? '<input type="checkbox" value="' + participant.ParticipantId + '" checked="checked"/>' : '<input type="checkbox" value="' + participant.ParticipantId + '" />'); 
     tr += '</td> '; 
     tr += '</tr> '; 
     table += tr; 
    }); 
    table += "</table>"; 

    bootbox.dialog({ 
     backdrop: false, 
     title: "Attendance", 
     message: table, 
     buttons: { 
      success: { 
       label: "Save", 
       className: "btn-success", 
       callback: function() { 

       } 
      }, 
      danger: { 
       label: "Cancel", 
       className: "btn-danger", 
       callback: function() { 

       } 
      } 
     } 
    }); 

}});