Create table in bootbox dialog with ajax call result

Question

I'm currently developing an application where it should be reported attendance on unique occasions . I get a list of JSON objects through an AJAX call .

I would then create a table in a bootbox dialogue which will create new rows for each item in the result from my AJAX call . Each line will consist of the name and a checkbox that is linked to the name's Id.

But when I show boot box , it shows only object.object and an empty box underneath.

What am I doing wrong?

Here is my code:

$.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

I think the solution here is to create the string before calling the bootbox. Try to do something like that:

$.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 () {

                }
            }
        }
    });

}});