I have a web application with different functions. When I click on the update function, it will load the table. But when I return to the main page and loads the delete function, the table will not be loaded. I console log the data and it did return the data.
This is how the table looks like: https://imgur.com/C3id3u9 .
This is what is returned: https://imgur.com/K5haCaN .
This issue only happens when I load the delete function after I load the update function.
This is the function to load the main page:
function LoadPaymentMain()
{
var thePaymentContent = `
<td>
<div class="buttons">
<button type="button" onclick="AddPaymentMain()" class="button">Create Payment</button><br>
<button type="button" onclick="UpdatePaymentMain()" class="button">Update Payment</button><br>
<button type="button" onclick="DeletePaymentMain()" class="button">Delete Payment</button><br>
<button type="button" onclick="LoadMainSelectionPage()" class="button">Back</button><br>
</div>
</td>`;
document.getElementById('page_chart_of_account').style.display = "none";
document.getElementById('page_item_main').style.display = "none";
document.getElementById('page_item_add').style.display = "none";
document.getElementById('page_item_modify_main').style.display = "none";
document.getElementById('page_item_modify').style.display = "none";
document.getElementById('page_customer_modify_main').style.display = "none";
document.getElementById('page_main').style.display = "none";
document.getElementById("page_customer_main").style.display = "none";
document.getElementById('page_customer_add').style.display = "none";
document.getElementById("page_customer_modify_page").style.display = "none";
document.getElementById("page_customer_delete_main").style.display = "none";
document.getElementById('page_item_delete').style.display = "none";
document.getElementById('page_invoice_main').style.display = "none";
document.getElementById("page_invoice_add_main").style.display = "none";
document.getElementById("page_invoice_add").style.display = "none";
document.getElementById("page_invoice_update_main").style.display = "none";
document.getElementById("page_invoice_update").style.display = "none";
document.getElementById("page_invoice_delete").style.display = "none";
document.getElementById("page_payment_add_main").style.display = "none";
document.getElementById("page_payment_add").style.display = "none";
document.getElementById("page_payment_update_main").style.display = "none";
document.getElementById("page_payment_update").style.display = "none";
document.getElementById("page_payment_delete").style.display = "none";
document.getElementById("page_authorization").style.display = "none";
document.getElementById('page_payment_main').innerHTML = thePaymentContent;
document.getElementById("page_payment_main").style.display = "";
}
This is the update function:
function UpdatePaymentMain(){
var theUpdatePaymentContent = `
<td>
<table id ="thePaymentsTable" style="width: 100%; border: 1px solid black; ">
</table>
<button type="button" onclick="LoadPaymentMain()" class="button">Back</button><br>
</td>
`;
const thePayments = GetPaymentsArray();
document.getElementById('page_chart_of_account').style.display = "none";
document.getElementById('page_item_main').style.display = "none";
document.getElementById('page_item_add').style.display = "none";
document.getElementById('page_item_modify_main').style.display = "none";
document.getElementById('page_item_modify').style.display = "none";
document.getElementById('page_customer_modify_main').style.display = "none";
document.getElementById('page_main').style.display = "none";
document.getElementById("page_customer_main").style.display = "none";
document.getElementById('page_customer_add').style.display = "none";
document.getElementById("page_customer_modify_page").style.display = "none";
document.getElementById("page_customer_delete_main").style.display = "none";
document.getElementById('page_item_delete').style.display = "none";
document.getElementById('page_invoice_main').style.display = "none";
document.getElementById("page_invoice_add_main").style.display = "none";
document.getElementById("page_invoice_add").style.display = "none";
document.getElementById("page_invoice_update_main").style.display = "none";
document.getElementById("page_invoice_update").style.display = "none";
document.getElementById("page_invoice_delete").style.display = "none";
document.getElementById("page_payment_main").style.display = "none";
document.getElementById("page_payment_add_main").style.display = "none";
document.getElementById("page_payment_add").style.display = "none";
document.getElementById("page_payment_delete").style.display = "none";
document.getElementById("page_payment_update").style.display = "none";
document.getElementById("page_authorization").style.display = "none";
document.getElementById('page_payment_update_main').innerHTML = theUpdatePaymentContent;
document.getElementById("page_payment_update_main").style.display = "";
var thePaymentsTable = ``;
thePaymentsTable +=`<tr>`;
thePaymentsTable += `<th style='border: 1px solid black'>Update</th>`;
thePaymentsTable += `<th style='border: 1px solid black'>PaymentId</th>`;
thePaymentsTable += `<th style='border: 1px solid black'>CustomerId</th>`;
thePaymentsTable += `<th style='border: 1px solid black'>InvoiceId</th>`;
thePaymentsTable += `<th style='border: 1px solid black'>TotalAmount</th>`;
thePaymentsTable += `</tr>`;
for (var i in thePayments)
{
var theSinglePaymentArray = [{
id: thePayments[i]["Id"],
customerId: thePayments[i]["CustomerRef"],
invoiceId: thePayments[i]["Line"]["LinkedTxn"]["TxnId"],
totalAmount: thePayments[i]["TotalAmt"]
}];
var thePaymentRecord = encodeURIComponent(JSON.stringify(theSinglePaymentArray));
thePaymentsTable += `<tr>`;
thePaymentsTable+=`<td style='border: 1px solid black'>` +`<button type="button" id='delete' onclick=UpdatePaymentPage("`+thePaymentRecord+`")>Update</button> ` + `</td>`;
thePaymentsTable += `<td style='border: 1px solid black'>` +thePayments[i]["Id"] + `</td>`;
thePaymentsTable+=`<td style='border: 1px solid black'>` + thePayments[i]["CustomerRef"] + `</td>`;
thePaymentsTable+=`<td style='border: 1px solid black'>` + thePayments[i]["Line"]["LinkedTxn"]["TxnId"] + `</td>`;
thePaymentsTable+=`<td style='border: 1px solid black'>` +thePayments[i]["TotalAmt"] + `</td>`;
thePaymentsTable += `</tr>`;
document.getElementById("thePaymentsTable").innerHTML = thePaymentsTable;
}
}
This is the delete function:
function DeletePayment(){
var theDeletePaymentContent = `
<td>
<table id ="thePaymentsTable" style="width: 100%; border: 1px solid black; ">
</table>
<button type="button" onclick="LoadPaymentMain()" class="button">Back</button><br>
</td>
`;
const thePayments = GetPaymentsArray();
console.log(thePayments);
document.getElementById('page_chart_of_account').style.display = "none";
document.getElementById('page_item_main').style.display = "none";
document.getElementById('page_item_add').style.display = "none";
document.getElementById('page_item_modify_main').style.display = "none";
document.getElementById('page_item_modify').style.display = "none";
document.getElementById('page_customer_modify_main').style.display = "none";
document.getElementById('page_main').style.display = "none";
document.getElementById("page_customer_main").style.display = "none";
document.getElementById('page_customer_add').style.display = "none";
document.getElementById("page_customer_modify_page").style.display = "none";
document.getElementById("page_customer_delete_main").style.display = "none";
document.getElementById('page_item_delete').style.display = "none";
document.getElementById('page_invoice_main').style.display = "none";
document.getElementById("page_invoice_add_main").style.display = "none";
document.getElementById("page_invoice_add").style.display = "none";
document.getElementById("page_invoice_update_main").style.display = "none";
document.getElementById("page_invoice_update").style.display = "none";
document.getElementById("page_invoice_delete").style.display = "none";
document.getElementById("page_payment_main").style.display = "none";
document.getElementById("page_payment_add_main").style.display = "none";
document.getElementById("page_payment_add").style.display = "none";
document.getElementById("page_payment_update_main").style.display = "none";
document.getElementById("page_payment_update").style.display = "none";
document.getElementById("page_authorization").style.display = "none";
document.getElementById('page_payment_delete').innerHTML = theDeletePaymentContent;
document.getElementById("page_payment_delete").style.display = "";
var thePaymentsTable = ``;
thePaymentsTable +=`<tr>`;
thePaymentsTable += `<th style='border: 1px solid black'>Delete</th>`;
thePaymentsTable += `<th style='border: 1px solid black'>PaymentId</th>`;
thePaymentsTable += `<th style='border: 1px solid black'>CustomerId</th>`;
thePaymentsTable += `<th style='border: 1px solid black'>TotalAmount</th>`;
thePaymentsTable += `</tr>`;
for (var i in thePayments)
{
var theSinglePaymentArray = [{
id: thePayments[i]["Id"]
}];
var thePaymentRecord = encodeURIComponent(JSON.stringify(theSinglePaymentArray));
thePaymentsTable += `<tr>`;
thePaymentsTable+=`<td style='border: 1px solid black'>` +`<button type="button" id='delete' onclick=DeletePayment("`+thePaymentRecord+`")>Delete</button> ` + `</td>`;
thePaymentsTable += `<td style='border: 1px solid black'>` +thePayments[i]["Id"] + `</td>`;
thePaymentsTable+=`<td style='border: 1px solid black'>` + thePayments[i]["CustomerRef"] + `</td>`;
thePaymentsTable+=`<td style='border: 1px solid black'>` +thePayments[i]["TotalAmt"] + `</td>`;
thePaymentsTable += `</tr>`;
document.getElementById("thePaymentsTable").innerHTML = thePaymentsTable;
}
}
What I have tried:
I have console logged the data and it returns the correct data.