Ajax POST data not appearing in modal

I have a table that’s populated by JSON data. In the last column you can open up a modal that corresponds to each row and you can add a comment in an input box—doing so will update that modal. In other words, table rows that have no comments have an empty modal and rows with at least one comment should appear in the modal that they correspond with.

In my backend manager (SQL Server Management Studio) I can see that the comments are showing up there, but they’re not appearing in the modals.

I can’t tell if the problem is coming from the JavaScript side (the view) or from the model, or from elsewhere.

The addition of the DocBudgetId is relatively new. Before that, the review/comment data was tied to the DocNumber and the info was appearing in the modals. I suspect that I have to make an adjustment/change to the DocBudgetId but I’m not sure how.

Modal screenshot: https://i.stack.imgur.com/Vqd4o.png The DocNumber appears on the top left. Comments have been made to the row that this modal belongs to but they’re not appearing in the modal table.

Model:

public class ReviewRow
    {
        public Guid DocBudgetId { get; set; }
        public string DocNumber { get; set; }
        public string ReviewBy { get; set; }
        public string ReviewOn { get; set; }
        public string ReviewComment { get; set; }   
    }

View:

<div class="modal-body">
        <div id="review"></div>
        <table>
           <tr>
              <td>
                @Html.LabelFor(x => Model.ReviewComment)<br />
                @Html.TextAreaFor(x => x.ReviewComment, new { style = "width: 200px; " })<br />
                @Html.HiddenFor(x => x.DocUnderReview, new { id = "txtDocUnderReview" })
                <input type="submit" value="@BB360.Models.BudgetReportingViewModel.Buttons.Review" name="@Html.NameFor(x => x.SubmitButton)" id="SubmitButton" class="btn btn-secondary" />
              </td>
           </tr>
        </table>


// --- other code --- //

function ShowReviewModal(DocBudgetId, DocNumber) { 
        $("#txtDocUnderReview").val(DocNumber);
        console.log(DocNumber)

        $.ajax({
            type: "POST",
            url: "/Doc/GetDocUnderReviewDetails",
            data: "docNumber=" + DocNumber + "&docBudgetId=" + DocBudgetId,
            timeout: 5000,
            success: function(data) {
                console.log(data); // ------------- empty array
                // write out the modal table
                var tBody = $("#tblExpenseDeductionDetails tbody");
                tBody.empty();
                s = "";

                for (x = 0; x < data.length; x++) {
                  let ReviewBy = data[x].ReviewBy,
                      ReviewOn = data[x].ReviewOn,
                      ReviewComment = data[x].ReviewComment;
                        s = s + "<tr>";
                        s = s + "<td>" + ReviewBy + "</td>";
                        s = s + "<td>" + ReviewOn + "</td>";
                        s = s + "<td title='" + ReviewComment.replace(/'/g, '') + "' style='max-width:550px;word-wrap: break-word;'>" + stringTruncate(ReviewComment, 65) + "</td>";
                        s = s + "</tr>";
                }

                $("#modalDocName").text(DocNumber);
                tBody[0].innerHTML = s;
                $("#ReviewModal").modal();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });

        $("#ReviewModal").modal();
    }

Controller

public ActionResult BudgetReporting(BudgetReportingViewModel model)
        {
            Common.GetDbExecutor().QueryNonQuery(Sql.InsertDocUnderReview, new {
                model.DocBudgetId, 
                DocNumber = model.DocUnderReview, // D is uppercase
                ReviewBy = Common.GetUserName(),
                ReviewComment = model.ReviewComment,
            }, 30).ToString();

            PopulateBudgetReportingDetail(model);

            return View(model);
        }

        public ActionResult GetDocUnderReviewDetails(Guid docBudgetId) // camelCase // 
        {
            var data = Common.GetKKDbExecutor().Query<BudgetReportingViewModel.ReviewRow>(Sql.GetDocUnderReviewDetails, new {
               docBudgetId
            }).ToList();

            return Json(data);
        }

Sql file

namespace BB360
{
    public partial class Sql
    {
        public const string GetDocUnderReviewDetails = @"

        select 
            DocBudgetId, 
            DocNumber, 
            ReviewBy, 
            convert(varchar, ReviewOn, 101) as ReviewOn, 
            isnull(ReviewComment, '') as ReviewComment 
            from DocBudgetReview 
            where DocBudgetId = @DocBudgetId
            order by ReviewOn desc   
        ";
    }
}

Answer

Update: I did some tinkering and got the table data to show.

In the stored procedure (GetDocUnderReviewDetails.cs) I commented out the line where DocBudgetId = @DocBudgetId and added where DocNumber = @DocNumber. I noticed that if I just commented out where DBI = then it showed all of the comments made for every modal, which was an issue I was dealing with earlier.

So now, my stored procedure looks like this:

namespace BB360
{
    public partial class Sql
    {
        public const string GetDocUnderReviewDetails = @"

        select 
            DocBudgetId, 
            DocNumber, 
            ReviewBy, 
            convert(varchar, ReviewOn, 101) as ReviewOn, 
            isnull(ReviewComment, '') as ReviewComment 
            from DocBudgetReview 
            --where DocBudgetId = @DocBudgetId
            where DocNumber = @DocNumber
            order by ReviewOn desc   
        ";
    }
}

I also added string docNumber to the Controller:

public ActionResult GetDocUnderReviewDetails(Guid docBudgetId, string docNumber)
        {
            var data = Common.GetBBDbExecutor().Query<BudgetReportingViewModel.ReviewRow>(Sql.GetDocUnderReviewDetails, new {
                docBudgetId,
                docNumber
            }).ToList();


            return Json(data);
        }