Accessing Table in Partial View

Question

I'm trying to edit a table by adding rows, but running into an issue with the the partial view not being fully rendered (This is my assumption)

I'm loading the partials into their divs via page load and ajax calls;

<div id="preTestSteps">
</div>

<div id="mainTestSteps">
</div>

<div id="postTestSteps">
</div>

Scripts;

    $(document).ready(function() {
        var testSuiteExecutionId = @(Model.TestSuiteExecutionId);
        var testSuiteId = @(Model.TestSuiteId);

        loadTestStepResultsPartialView(testSuiteExecutionId, testSuiteId, 1, "preTestSteps");
        loadTestStepResultsPartialView(testSuiteExecutionId, testSuiteId, 0, "mainTestSteps");
        loadTestStepResultsPartialView(testSuiteExecutionId, testSuiteId, 2, "postTestSteps");
    });

    function loadTestStepResultsPartialView( testSuiteExecutionId, testSuiteId, testStepType, divId) {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("DetailsTestStepResults", "TestSuiteExecutions")',
            data: { 'testSuiteExecutionId': testSuiteExecutionId, 'testSuiteId': testSuiteId, 'testStepType': testStepType },
            success: function(data) {
                $("#" + divId).html(data);

            }
        });

In the partial view, the table has a unique ID which is accessed to append (view model is a list of viewmodels, using the first index is to get data which is unique for the list of logs);

<div id="@collapseStepItemName" class="collapse col-sm-12" role="tabpanel" aria-labelledby="headingOne">
                    <div class="card-body">
                        <table class="table" id="logTable_@Model[0].TestStepId@Model[0].MessageType">
                            <thead>
                            <tr>
                                <th width="5%"></th>
                                <th width="20% !important">Time</th>
                                <th width="75%">Message</th>
                            </tr>
                            </thead>
                            <tbody>
                                @foreach (var logEntry in Model)
                                {
                                    <tr id="tableRow_@logEntry.TestStepId@logEntry.MessageType">
                                        <td><img width="20" height="20" src="~/Content/Images/@HtmlUtilities.GetTestSuiteExecutionIconName(logEntry.LogType)" /></td>
                                        <td><i>@logEntry.TimeStamp</i></td>
                                        <td><i>@Html.Raw(HtmlUtilities.GetHtmlFormattedString(logEntry.Message))</i></td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </div>

The current test code (with hard coded tableID for the sake of testing) is the following;

    var tableId = "logTable_" + 44 + "False";

    var newRow = document.getElementById(tableId).insertRow();
    newRow.innerHTML="<td>New row text</td><td>New row 2nd cell</td><td>Please work</td>";

The following error is thrown in the browser debug;

Uncaught TypeError: Cannot read property 'insertRow' of null

Is there a way to execute the script after the partial views are fully rendered? Or is this issue something else and not due to the views being loaded in?

I made sure the table appending script actually works by testing it on a table in the main view, and it worked as intended.

Answer 1

Since you're using jQuery, place this code inside document.ready function:

$(document).ready(function() {

    // other stuff

    var tableId = "logTable_" + @Model[0].TestStepId + @Model[0].MessageType;
    var row = $('<tr>').append('<td>New row text</td><td>New row 2nd cell</td><td>Please work</td>');

    $('#' + tableId).find('tbody').append(row);
});

If you insist using vanilla JS to add rows, make sure that all DOM objects are already loaded as given in example below:

document.addEventListener("DOMContentLoaded", function (ev) { 
    var tableId = "logTable_" + @Model[0].TestStepId + @Model[0].MessageType;

    var newRow = document.getElementById(tableId).insertRow();
    newRow.innerHTML="<td>New row text</td><td>New row 2nd cell</td><td>Please work</td>";
}

The reason behind insertRow has null value is that table DOM elements may not fully loaded when adding row script executes, hence row addition script should run when all required DOM elements are complete.

Demo example: JSFiddle