Reload the tab using jquery ajax response

Question

I'm using a jquery ajax to call a servlet. It gets called during the page load and populates the div using the ajax response(from the servlet).

I want to use this function again on a button click and reload the div. I'm having an issue here. Instead of reloading the div, all the values gets appended to the existing values in the table.

How can I reload this div by replacing the previous contents?

My code(HTML):

<div>
        <table id="table1">
            <thead>
                <tr>
                    <th>Col1</th>
                    <th>Col2</th>
                    <th>Col3</th>
                </tr>
            </thead>
            <tbody>
                <!-- Adds the rows dynamically from Jquery AJAX response -->
            </tbody>
        </table>
</div>

JQuery:

function loadMyTable() {
    $.get('CallServlet', {}, function (responseText) {
        var response = $.parseJSON(responseText);
        $.each(response, function (key, value) {
            var row = $("<tr/>")
            $('#table1').append(row);
            row.append($("<td>" + value.val1 + "</td>"));
            row.append($("<td>" + value.val2 + "</td>"));
            row.append($("<td>" + value.val3 + "</td>"));
        });
        $('#table1').dataTable();
    });
}

Answer 1

You probably need to empty your table before adding now rows. Use .empty(). Also append new rows to the tbody, not to the table.

function loadMyTable(){
         $.get('CallServlet', {
            }, function (responseText) {
                var response = $.parseJSON(responseText);
                $('#table1 tbody').empty();
                $.each(response, function (key, value) {
                    var row = $("<tr/>")
                    $('#table1 tbody').append(row);
                    row.append($("<td>" + value.val1 + "</td>"));
                    row.append($("<td>" + value.val2 + "</td>"));
                    row.append($("<td>" + value.val3 + "</td>"));
            });
            $('#table1').dataTable();
        });
}

Answer 2

you need to clear the table1 content before adding new content to it.

$("#table1").epmty();

or

$("#table1 tr").remove();

or

$("#table1").html('');

Answer 3

1) Give Id to your Tbody

 <tbody id='table1tbody'>

 </tbody>

2) change append

function loadMyTable() {
    $.get('CallServlet', {}, function (responseText) {
        var response = $.parseJSON(responseText);
        $("#table1tbody").html("");
        $.each(response, function (key, value) {
            var row="<tr>";
            row+="<td>" + value.val1 + "</td>";
            row+="<td>" + value.val2 + "</td>";
            row+="<td>" + value.val3 + "</td>";
            row+="</tr>";
            $("#table1tbody").append(row);
        });
        $('#table1').dataTable();
    });
}

Answer 4

I used

$('#table1).datatable().fnDestroy();

This resolved the issue I had during reloading the table. Updated the code below

function loadMyTable() {
    $.get('CallServlet', {}, function (responseText) {
       $('#table1).datatable().fnDestroy();
        var response = $.parseJSON(responseText);
        $.each(response, function (key, value) {
            var row = $("<tr/>")
            $('#table1').append(row);
            row.append($("<td>" + value.val1 + "</td>"));
            row.append($("<td>" + value.val2 + "</td>"));
            row.append($("<td>" + value.val3 + "</td>"));
        });
        $('#table1').dataTable();
    });
}

Thanks everyone!