I have jQuery results that I wanted to put into a Div row in the HTML razor view.
such that when the "Select Receivable Note" is clicked it populate a modal with the payment related to the client selected.
The Razor view is pasted below
<div class="form-group">
@Html.LabelFor(model => model.Account_ClientReceipt.ClientCode, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div data-tip="Please select Client">
@Html.DropDownList("Account_ClientReceipt.ClientCode", new SelectList(Html.ClientCodeDropDownList(), "ClientCode", "FullDescription", Model.Account_ClientReceipt.ClientCode), new { id = "Account_ClientReceipt.ClientCode", @class = "form-control input-sm" })
@Html.ValidationMessageFor(model => model.Account_ClientReceipt.ClientCode, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="button" class="btn btn-primary" onclick="ShowDebitNoteDialog(this, 'Account_ClientReceipt.ClientCode');">Select Receivable Note</button>
<a href="#dialog3" class="btn btn-primary" title="Confirm Setup" data-toggle="modal" onclick="dialog3();">Submit</a>
</div>
</div>
jQuery Script is Pasted below:
var alreadyCalled = false;
var lastClientId = '';
var rootUrl = "@Helper.GetRootURL()";
var fetchUrl = rootUrl + "/Underwriting/LoadReceivableNoteList/" + selected + "?" + new Date().getTime();
if (lastClientId != selected || alreadyCalled == false) {
document.getElementById("AttachmentDiv2").innerHTML = "Loading receivable note list. Please wait...";
$.getJSON(fetchUrl,
function (result) {
document.getElementById("AttachmentDiv2").innerHTML = "";
removeOptions(document.getElementById("ReceivableNoteDropDownList"));
$.each(result, function (i, option) {
$('#ReceivableNoteDropDownList').append($('<option/>').attr("value", option.AccountReceivableCode).text(option.AccountReceivableCode));
$('#ReceivableNoteDropDownList').append($('<option/>').attr("value", option.TransDate).text(option.TransDate));
$('#ReceivableNoteDropDownList').append($('<option/>').attr("value", option.GrossAmount).text(option.GrossAmount));
});
alreadyCalled = true;
lastClientId = selected;
})
.fail(function (jqXHR, textStatus, errorThrown) {
if (jqXHR.status === 401) {
window.location.href = jqXHR.Data.LogOnUrl;
return;
}
else {
BootstrapDialog.alert(jqXHR.responseText);
}
});
}
InnerHTML Modal where the result should appear is pasted below
<div class="row">
<div class="col-md-12 col-sm-8 col-xs-12 col-xs-offset-0">
<div id="dialog2" tabindex="-1" role="dialog" aria-labelledby="dialog2Label" aria-hidden="true" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="dialog2Label">Receivable Note List</h4>
</div>
<div class="modal-body">
<input type="hidden" name="SelectedDebitNoteID" id="SelectedDebitNoteID" value="@ViewBag.DebitNoteID" />
<div id="AttachmentDiv">
<div id="AttachmentDiv2"></div>
<p>
Receivable Notes: <select id="ReceivableNoteDropDownList" class="form-control" onchange="setReceivedNote(this);"></select>
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Next</button>
</div>
</div>
</div>
</div>
</div>
</div>
the current result is attached below:

From the above:
- The date is not well displayed. I want the date to be formatted to "dd/mm/yyyy"
- 2 rows are expected in the order below
Ref_Note Date Amount
AR0000000002 15/10/2022 125,000.00
AR0000000004 15/10/2022 384,575.48
3) Why is my date in the above attachment not showing correctly as the expected result in the attached result below?

4) What do I do wrong in achieving the above-attached result output?
Thank you for your anticipated urgent assistance,
Best regards,
Abiodun