Unable to add a new row

krutovdl

Using code from an old MS Framework 4.6.2 project no longer works in a converted a .Net Core 3.1 project. The purpose of this code is to add a new row to an already loaded table which did work in an older project. The old project used version 1.10.19. The new project uses version 1.10.21. The line highlighted "tblCommentsList.row.add(data).order([[0, 'desc']]).draw();" which is in bold should update the table and no longer does. This code is applied but does not do anything.

Here is the code that no longer works:

        $(document).on('click', '#btnChangeComment', function () {
            $(this).prop('disabled', true);
            $("#spCommentErr").val('');
            $.ajax({
                type: "POST",
                url: '@Url.Action("AddUserComment", "CoverageInfo")',
                data: {
                    UnqMbrId: $(document).find('[id*="hdnUnqCommentMbrId"]').val(),
                    fln: $("#txtFLNValue").val(),
                    Comments: $('#editedComments').val()
                },
                datatype: "json",
                success: function (data) {
                    if (data !== null) {
                        var CommentsDttm = new Date(parseInt(data.CommentsDttm.substr(6)));
                        var AlertUserEndDt = new Date(parseInt(data.AlertUserEndDt.substr(6)));
                        $("#divNoData").addClass('hide');
                        $("#mainCommentsList").removeClass('hide');
                        data.CommentsDttm = (CommentsDttm.getMonth() + 1).toString() + '/' + (CommentsDttm.getDate()).toString() + '/' + (CommentsDttm.getFullYear()).toString();
                        data.AlertUserEndDt = (AlertUserEndDt.getMonth() + 1).toString() + '/' + (AlertUserEndDt.getDate()).toString() + '/' + (AlertUserEndDt.getFullYear()).toString();
                        **tblCommentsList.row.add(data).order([[0, 'desc']]).draw();**
                        $("#comments_module").modal('hide');
                    }
                    else {
                        $("#spCommentErr").val('There is an issue on the server. Please contact your administrator.');
                    }
                },
                fail: function (xhr) {
                    $("#spCommentErr").html(xhr.status + ": " + xhr.statusText + "<br />Contact your administrator");
                }
            });
        });

Here is the table code:

        var tblCommentsList = $('#tblCommentsList').DataTable({
            columns: [
                {
                    data: null,
                    width: "15%",
                    orderData: [6],
                    render: function (data, type, row) {
                        var strDt = row.CommentsDttm.split(' ')[0];
                        var dt = new Date(strDt);
                        var month = dt.getMonth() + 1 < 10 ? '0' + (dt.getMonth() + 1).toString() : (dt.getMonth() + 1).toString();
                        var day = dt.getDate() < 10 ? '0' + dt.getDate().toString() : dt.getDate().toString();
                        var year = dt.getFullYear().toString();
                        return month + '/' + day + '/' + year + '/' + row.CommentsUser;
                    }
                },
                { data: "Comments", width: "80%", orderable: false },
                {
                    data: "AlertInd",
                    width: "5%",
                    orderable: false,
                    render: function (data, type, row) {
                        var checked = row.AlertInd === "1" ? 'checked="checked"' : '';
                        return '<input type="checkbox" ' + checked + '" name="alertInd" />';
                    }
                },
                { data: "UnqMbrId", visible: false },
                { data: "CommentNum", visible: false },
                { data: "AlertUserEndDt", visible: false },
                { data: "CommentsDttm", visible: false, type: "date" },
                { data: "CommentsUser", visible: false },
            ],
            order: [[0, "desc"]],
            lengthMenu: [
                [-1, 10, 25, 50, 100],
                ["All", 10, 25, 50, 100]
            ],
            pageLength: -1
        });

Here is a row data sample from the server:

{
   UnqMbrId: 10046,
   CommentNum: 42,
   CommentsUser: 'user',
   CommentsDttm: '2020-10-30T13:31:47.571087',
   Comments: 'FLN 1122334455667: Testing 4'
}

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

krutovdl

I figured out the solution but i don't understand why this code worked in the old project and had to be fixed in the new project. The fix is to change the orderData. The the old project with identical data and identical client side code was "orderData: [6]". In the new project, it is changed to "orderData: [5]". After making this change ,everything started working like it should.

kthorngren

Guessing its a date sorting issue?

You have this for cols 5 and 6:

        { data: "AlertUserEndDt", visible: false },
        { data: "CommentsDttm", visible: false, type: "date" },

What is AlertUserEndDt. It might be a date that Datatables can automatically sort. Take a look at this sorting blog for the recommended date sorting solution.

Keivn

krutovdl

AlertUserEndDt it is a datetime type on the server and database. I will take a look at the blog. But it is still hard to understand why reassigning orderData was the fix.

kthorngren

But it is still hard to understand why reassigning orderData was the fix.

Its hard to say without seeing the problem. Can you simulate it in a test case with simulated data?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

I'm wondering if the row was added but the sorting was not working as expected so you didn't see the new row.

Kevin

krutovdl

Hi Kevin I had trouble getting the test case online so I solved the issue. Basically i rearranged the table by placing the "CommentsDttm" to the first column and I got rid of orderData all together because I don't know how the indexing works and it does not have an option to pass in the column name string. Below is the final solution:

Here is the initialization:

       var tblCommentsList = $('#tblCommentsList').DataTable({
            columns: [
                {
                    data: null,
                    visible: false, 
                    render: function (data, type, row) {
                        return moment(row.CommentsDttm).unix();
                    }
                },
                {
                    data: null,
                    width: "15%",
                    render: function (data, type, row) {
                        return moment(row.CommentsDttm).format('MM/DD/YYYY') + '/' + row.CommentsUser;
                    }
                },
                { data: "Comments", width: "80%", orderable: false },
                {
                    data: "AlertInd",
                    width: "5%",
                    orderable: false,
                    render: function (data, type, row) {
                        var checked = row.AlertInd === "1" ? 'checked="checked"' : '';
                        return '<input type="checkbox" ' + checked + '" name="alertInd" />';
                    }
                },
                { data: "UnqMbrId", visible: false },
                { data: "CommentNum", visible: false },
                { data: "AlertUserEndDt", visible: false },
                { data: "CommentsUser", visible: false },
            ],
            order: [[0, "desc"]],
            lengthMenu: [
                [-1, 10, 25, 50, 100],
                ["All", 10, 25, 50, 100]
            ],
            pageLength: -1
        });

Here is the the code to add a new row:

        $(document).on('click', '#btnChangeComment', function () {
            $(this).prop('disabled', true);
            $("#spCommentErr").val('');
            $.ajax({
                type: "POST",
                url: '@Url.Action("AddUserComment", "CoverageInfo")',
                data: {
                    UnqMbrId: $(document).find('[id*="hdnUnqCommentMbrId"]').val(),
                    fln: $("#txtFLNValue").val(),
                    Comments: $('#editedComments').val()
                },
                datatype: "json",
                success: function (data) {
                    if (data !== null) {
                        $("#divNoData").addClass('hide');
                        $("#mainCommentsList").removeClass('hide');
                        data.CommentsDttm = new Date(data.CommentsDttm).toString();
                        data.AlertUserEndDt = new Date(data.AlertUserEndDt).toString();
                        tblCommentsList.row.add(data).order([[0, 'desc']]).draw();
                        $("#comments_module").modal('hide');
                    }
                    else {
                        $("#spCommentErr").val('There is an issue on the server. Please contact your administrator.');
                    }
                },
                fail: function (xhr) {
                    $("#spCommentErr").html(xhr.status + ": " + xhr.statusText + "<br />Contact your administrator");
                }
            });
        });

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

krutovdl

Here is the code to add new row:

        $(document).on('click', '#btnChangeComment', function () {
            $(this).prop('disabled', true);
            $("#spCommentErr").val('');
            $.ajax({
                type: "POST",
                url: '@Url.Action("AddUserComment", "CoverageInfo")',
                data: {
                    UnqMbrId: $(document).find('[id*="hdnUnqCommentMbrId"]').val(),
                    fln: $("#txtFLNValue").val(),
                    Comments: $('#editedComments').val()
                },
                datatype: "json",
                success: function (data) {
                    if (data !== null) {
                        $("#divNoData").addClass('hide');
                        $("#mainCommentsList").removeClass('hide');
                        data.CommentsDttm = new Date(data.CommentsDttm).toString();
                        data.AlertUserEndDt = new Date(data.AlertUserEndDt).toString();
                        tblCommentsList.row.add(data).order([[0, 'desc']]).draw();
                        $("#comments_module").modal('hide');
                    }
                    else {
                        $("#spCommentErr").val('There is an issue on the server. Please contact your administrator.');
                    }
                },
                fail: function (xhr) {
                    $("#spCommentErr").html(xhr.status + ": " + xhr.statusText + "<br />Contact your administrator");
                }
            });
        });

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.