Add data to a table row using Ajax

Question

I need to add data to a table from a java script. Tha table is in the same .jsp file but no inside the script.

AJAX call

<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

             <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>

values passed to the data correctly. But I can;t seem to have getthe value outside from the script and use it.

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

this part get the value from controller correctly.

Please Help

NovGab · Accepted Answer · 2013-10-10 11:16:30Z

1

Add an ID for your table like:

    <table id="test_table">

Then call this:

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

Finally replace cellX.innerHtml = data.whatever_member_object;

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

        var table = document.getElementById(tableID);

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

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

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

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

Hope it works.

answered Oct 10, 2013 at 11:16

NovGab

1245 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add data to a table row using Ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related