Using Ajax to insert information into a row of a table

Question

Using Ajax to insert information into a row of a table

I am looking to update a table with data from a JavaScript function. The table is located in the same .jsp file but not inside the script.

Using AJAX

<script type="text/javascript">
        function searchDetails() {

            $.ajax({
                type : "post",
                data : {
                    'accountNo' : $(accNumber).val()
                },
                url : "/banking-internet/account-history/add",
                cache : false,
                success : function(data) {
                    var transactionList = data;
                },
                error : function(e) {
                    alert('Error: ' + e);
                }
            });

        }
    </script>

Table Structure

             <tr>
                <th>Transaction Type</th>
                <th>Amount</th>
                <th class="hide-on-mobile">Description</th>
            </tr>
            <c:forEach var="transaction" items="${transactionList}">
                <tr>
                    <td>${transaction.transactionDate}</td>
                    <td>${transaction.transactionType}</td>                     
                    <td>${transaction.accountNarration}</td>
                </tr>
            </c:forEach>

The values are being passed correctly to the data. However, I am facing issues accessing the value outside of the script for further use.

success : function(data) {
                        var transactionList = data;
                    },

This segment successfully retrieves the value from the controller.

Seeking assistance, please.

java javascript jsp spring-mvc

Answer 1

Answer №1

To enhance your table, consider assigning an ID as shown below:

    <table id="updated_table">

Next, use the following function:

    success : function(info) {
                    var dataList = info;
                    addRow ("updated_table", dataList);
    },

Then replace cellX.innerHtml = data.whatever_member_object;

    <script language="javascript">
    function addRow(tableID, dataList) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        cell1.innerHtml = dataList;

        var cell2 = row.insertCell(1);
        cell2.innerHTML = dataList;

        var cell3 = row.insertCell(2);
        cell3.innerHTML = dataList;             
    }
    </script>

We hope this solution proves effective for you.

Answer 2

To enhance your table, consider assigning an ID as shown below:

    <table id="updated_table">

Next, use the following function:

    success : function(info) {
                    var dataList = info;
                    addRow ("updated_table", dataList);
    },

Then replace cellX.innerHtml = data.whatever_member_object;

    <script language="javascript">
    function addRow(tableID, dataList) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        cell1.innerHtml = dataList;

        var cell2 = row.insertCell(1);
        cell2.innerHTML = dataList;

        var cell3 = row.insertCell(2);
        cell3.innerHTML = dataList;             
    }
    </script>

We hope this solution proves effective for you.

Using Ajax to insert information into a row of a table

Answer №1

Similar questions

Whenever I run "npm run build-dev" in Webpack with JavaScript, the browser continuously refreshes

Combining Json, Jquery Autocomplete, and PHP to customize the displayed search options based on multiple items within the Json data

Cross-origin resource sharing (CORS) policy issue arises when the 'Access-Control-Allow-Origin' header is not included in the requested resource, especially when utilizing an iframe in a React

Generate a new nested div if there is already a different child present at the specified coordinates (x, y)

What is the best method for transforming a JavaScript array of Objects to a different format?

having trouble retrieving information from the input field

Verifying Username Availability with Struts2 and AJAX Request

Tips for arranging alternating elements in a column layout using an array data model

Different methods to avoid using $scope.$watch in a directive when dealing with an undefined variable

Tips for recognizing when AJAX content, such as images and text, has been fully loaded within a div while utilizing both AJAX and jQuery

Error: The function $.simpleTicker is not defined

The anchor tag is failing to register when placed inside a dynamically created table cell

I'm encountering inexplicable duplications of elements on my Wordpress site

Steps to Turn Off Automatic Loading in Jquery Ajax tabs

Using Ajax and PHP to upload an image

javascript guide to dynamically update the glyphicon based on value changes

Divide the promised variable into separate named variables

Using Next.js to implement a timeout feature that pauses using a React state

What could be causing the inconsistency in the success rate of my Get request, with it working occasionally but returning a

Launch in a new window using JavaScript