In my typescript file, I have a set of functions that send an ajax request to add values to the database upon clicking a button.
static bindAddForm() {
TaxIndex.showHelperMessage(helperText);
$("#addTaxForm").submit(e => {
e.preventDefault();
if (typeof dataLayer !== "undefined") {
dataLayer.push({ 'event': "my_acc_tax_entry_add_button_clicked" });
}
const taxId = $('#add-tax-input').val();
const countryCode = $('#dllCountry').data('selected-value');
if (!taxId || !countryCode) {
$("#add-tax-input-error").removeClass('hidden');
return;
}
var spinner = $('.page-spinner');
spinner.startSpinning();
$("#add-tax-input-error").addClass('hidden');
$.ajax({
type: 'POST',
url: '/account/taxes/AddTax',
data: {
taxId: taxId,
countryCode: countryCode
},
success(response) {
TaxIndex.showNotification(response);
if (response.IsSuccessful) {
$('#add-tax-input').val('');
$("#eudoc-no").attr('checked', 'checked');
}
},
complete: () => {
spinner.stopSpinning();
}
});
});
}After receiving a successful response, we trigger the showNotification function which displays a notification box and calls the LoadData method to fetch updated data from the server and refresh the datagrid.
static showNotification(response) {
var notificationBox = $("#notificationBox");
notificationBox
.removeClass('alert-success')
.removeClass('alert-danger')
.html(response.Message).show();
if (response.IsSuccessful) {
notificationBox.addClass('alert-success');
console.log('successful response in Show Notifications.');
TaxIndex.loadData();
} else {
notificationBox.addClass('alert-danger');
}
}The LoadData function then triggers generateTable to update the datagrid with the new data.
static loadData() {
const spinner = $('.page-spinner');
spinner.startSpinning();
$.ajax({
type: "GET",
cache: false,
url: "/account/taxes/GetTaxes",
success: (taxes) => {
console.log('taxes length' + taxes.length);
spinner.stopSpinning();
if (taxes.length === 0) {
$('#tblTaxesContainer').addClass('hidden');
} else {
$('#tblTaxesContainer').removeClass('hidden');
TaxIndex.generateTaxTable(taxes);
}
}
});
}Here is the code for generating the datatable:
static generateTaxTable(taxes) {
$("#tblTaxes").empty();
$.each(taxes,
(taxRowIndex) => {
var rowData = taxes[taxRowIndex];
var row = $("<tr>" +
"<td>" + rowData.TaxNumber + "</td>" +
"<td class='text-center'>" + rowData.CountryCode + "</td>" +
"<td class='text-center'>" + rowData.Status + "</td>" +
"</tr>");
const InvalidTaxStatus = 2;
if (rowData.StatusId === InvalidTaxStatus) {
row.addClass('text-secondary');
}
$('#tblTaxes').append(row);
});
}The concern raised is that sometimes after successfully adding a value to the database and calling the LoadData function, the datagrid does not reflect the new value immediately. Only after refreshing the browser can the new value be seen. Any insights on why this might be happening would be greatly appreciated. Thank you.