Table cannot show on webpage

Question

0.00/5 (No votes)

See more:

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:

JavaScript

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:

JavaScript

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:

JavaScript

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.

Posted 2-May-21 19:28pm

nkm00e

Updated 2-May-21 20:29pm

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

nkm00e · Accepted Answer · 2021-05-02T20:29:00

I fixed it by changing the table name in the delete function.
This is the new delete function:

JavaScript

<pre>function DeletePayment(){
    var theDeletePaymentContent = `
        <td>
        <table id ="theDeletePaymentsTable" 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 theDeletePaymentsTable= ``;
        theDeletePaymentsTable+=`<tr>`;
        theDeletePaymentsTable+= `<th style='border: 1px solid black'>Delete</th>`;
        theDeletePaymentsTable+= `<th style='border: 1px solid black'>PaymentId</th>`;
        theDeletePaymentsTable+= `<th style='border: 1px solid black'>CustomerId</th>`;
        theDeletePaymentsTable+= `<th style='border: 1px solid black'>TotalAmount</th>`;
        theDeletePaymentsTable+= `</tr>`;
        for (var i in thePayments)
        {
            var theSinglePaymentArray = [{
                id: thePayments[i]["Id"]
            }];
            var thePaymentRecord = encodeURIComponent(JSON.stringify(theSinglePaymentArray));
            theDeletePaymentsTable+= `<tr>`;
            theDeletePaymentsTable+=`<td style='border: 1px solid black'>` +`<button type="button" id='delete' onclick=DeletePayment("`+thePaymentRecord+`")>Delete</button> ` + `</td>`;
            theDeletePaymentsTable+= `<td style='border: 1px solid black'>` +thePayments[i]["Id"] + `</td>`;
            theDeletePaymentsTable+=`<td style='border: 1px solid black'>` + thePayments[i]["CustomerRef"] + `</td>`;
            theDeletePaymentsTable+=`<td style='border: 1px solid black'>` +thePayments[i]["TotalAmt"] + `</td>`;
            theDeletePaymentsTable+= `</tr>`;
            document.getElementById("theDeletePaymentsTable").innerHTML = theDeletePaymentsTable;
        }
}

Table cannot show on webpage

1 solution

Solution 1

Add your solution here

Preview 0

Table cannot show on webpage

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us