html table response is not displayed in MVC view on button click jquery function

Question

I am working on asp.net MVC application.

On button click below jQuery function gets called.

I get status === "success" and in response all rows are available in the .html(response) but he same data not showing in the view where html is defined (html is nothing but an modal pop up window).

jQuery function call:

        var url = '@Url.Action("UserDetails", "CompanyUsage")';
        var data1 = { dateTime: data.getValue(chart.getSelection()[0].row, 0), Company: company, serverID: ServerID, Organisation: Organisation, BusinessArea: BusinessArea, ApplicationName: ApplicationName, AppVersion: AppVersion, ADCheck: ADCheck }

        $.post(url, data1)
            .done(function (response, status, jqxhr) {

                if (status === "success") {
                    $('#modal .modal-body').html(response);
                    $('#modal').modal('show');
                    $("#exportPopUpUserToExcel").show();

                    $(".multiselect").click(function () {
                        $(".btn-group").toggleClass("open");
                    });

                }
                else {
                    /* your "email doesn't exist" action */
                    var pan = 0;
                }

            })
            .fail(function (jqxhr, status, errorThrown) {
                /* do something when request errors */
            });
    };

    return false;
};

View :

<div id="modal" class="modal fade">
<div class="modal-dialog" style="overflow-y: scroll; max-height:80%; width: 1200px;  margin-top: 50px; margin-bottom:50px;left: 0px;">
    <div class="modal-content">
        <div class="modal-header">

        </div>

        <div class="modal-body">
            <p>One fine body&hellip;</p>

            @if (Model.UserList != null)
            {
                <div>
                    <table id="tableid" class="table table-striped table-hover3">
                        <tr>
                            <th>User ID</th>
                            <th>User Name</th>
                            <th>Company</th>
                            <th>License ID</th>
                            <th>Server ID</th>
                            <th>Start Time</th>
                        </tr>

                        @foreach (var item in Model.UserList)
                        {
                            <tr>
                                <td>
                                    @item.UserID
                                </td>
                                <td>
                                    @item.UserName
                                </td>
                                <td>
                                    @item.Company
                                </td>
                                <td>
                                    @item.LicenseId
                                </td>
                                <td>
                                    @item.ServerID
                                </td>
                                <td>
                                    @item.StartTime
                                </td>
                            </tr>
                        }

                    </table>
                </div>
            }
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

I get the below resut with modal pop up data as blank body.

Update: .html(response) contains the following data.

Also now I am using tbody tag instead of tr and th but getting the blank record same as previous. Below is the updated code,

    <div class="modal-body">
            <p>One fine body&hellip;</p>
            Hi
            @if (Model.UserList != null)
            {

                <div>
                    <table id="tableid" class="table table-striped table-hover3">
                        <thead>
                            <tr>
                                <th>User ID</th>
                                <th>User Name</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model.UserList)
                            {
                                <tr>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.UserId)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.UserName)
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            }
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>

Try check for string returned by AJAX call inside `response` object, is that contains `` and `` tags to form table data? Also check for possible errors in console. — Tetsuya Yamamoto, Feb 19 '19 at 06:02
@TetsuyaYamamoto response object doesn't contains and . I think its not required as it is already mentioned in the html. no error in console. Thanks — pankaj bawdane, Feb 19 '19 at 06:45
`$('#modal .modal-body').html(response)` replaces existing content inside element which has `modal-body` CSS class (the table element is also cleared). If you want to update table contents only, put a `` and use it as selector instead. What kind of data that `response` has? — Tetsuya Yamamoto, Feb 19 '19 at 06:51
@TetsuyaYamamoto Thanks for explanation. I have tried using tag instead of tr and th and but getting the blank record same as previous.I have updated the main post with new view code with tbody. and also mentioned response data snapshot. — pankaj bawdane, Feb 19 '19 at 08:13

score 1 · Accepted Answer · answered Feb 19 '19 at 09:12

The problem seem coming from this line:

$('#modal .modal-body').html(response);

According to the documentation, jQuery.html() used to replace existing HTML content with HTML string passed as its argument. Hence, it replaces all child HTML elements which uses modal-body CSS class with response object data including the table element, even response doesn't contain HTML elements. That's the reason why the table element disappear inside modal popup.

If your objective is to replace existing data inside table with data provided from AJAX response, you need to iterate response object, then create <tr> & <td> row elements for each iteration, and append each row to <tbody> element as provided in example below:

var url = '@Url.Action("UserDetails", "CompanyUsage")';
var data1 = { dateTime: data.getValue(chart.getSelection()[0].row, 0), Company: company, serverID: ServerID, Organisation: Organisation, BusinessArea: BusinessArea, ApplicationName: ApplicationName, AppVersion: AppVersion, ADCheck: ADCheck }

$.post(url, data1).done(function (response, status, jqxhr) {
    if (status === "success") {
       // set tbody selector
       var $tbody = $('#tableid tbody');

       // remove previous table entries
       $tbody.empty();

       var row = $('<tr>');
       var cell = $('<td>');

       // iterate the response and create table elements
       $.each(response, function(i, item) {
           row.append(
              cell.text(item.UserId),
              cell.text(item.UserName)
           ).appendTo($tbody);
       });

       // show the modal with table inside
       $('#modal').modal('show');
       $("#exportPopUpUserToExcel").show();

       $(".multiselect").click(function () {
           $(".btn-group").toggleClass("open");
       });

    }
    else {
       /* your "email doesn't exist" action */
       var pan = 0;
    }
})
.fail(function (jqxhr, status, errorThrown) {
    /* do something when request errors */
});

Related issues:

Using jQuery to build table rows from Ajax response (Json)

Convert JSON array to an HTML table in jQuery

Thanks for the detailed explanation. I solved the issue. It was helpful. — pankaj bawdane, Feb 19 '19 at 10:50

html table response is not displayed in MVC view on button click jquery function

1 Answers1