How to empty ajax data before sending it?

Question

I have a form, when I submit it it creates an ajax function and then creates a table out of the data in the success. But knowing that my page is dynamic (without reloading the page I call the ajax function many times), but each time the data in the success doesn't get removed before generating more data. Is that normal? How can I empty the success data variable before sending the ajax?

Function :

function submitForm() {

        if ($.fn.DataTable.isDataTable("#table")) {
            $('#table').DataTable().clear();
            $('#table').DataTable().destroy();
            $('#table').empty();
        }

        url = $("#form").serialize();
        console.log(url);
        $(document).ready(function() {
            $.ajax({
                type: "GET",
                dataType: "json",
                url: '/api/test?'+url,
                'beforeSend': function (request) {
                    data = {}; // like this maybe?
                },
                success: function (data) {
                    //Getting data variable containing
                    data = data.data;
                    //the second time I call the function, data contains the new and old stuff at the same time
                }
        });
}

Form :

<form method="GET" action="" class="form-horizontal" id="form" onsubmit="return false;">

    <button type="submit" onclick="submitForm();">Update table</button>

</form>

Table :

<table class="table table-striped display nowrap col-md-12" id="achats_table">
    <thead>
        <tr style="border-bottom:2px dashed #ccc"></tr>
    </thead>

    <tbody></tbody>

    <tfoot align="right">
        <tr></tr>
    </tfoot>
</table>

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Andreas, May 24 '18 at 10:40
@Andreas so you mean to say that each time (without reloading the page) the function is called, data is 100% new and does not contain values from a previous call? If that's the case, why when I add my table destroy inside the before send, in the next ajax call, there are still more data than needed in the table? — , May 24 '18 at 10:46
@Dewuly as you are useing `DataTable.js` i think this issue is related it as your not able to remove the old data please refer to this [link](https://stackoverflow.com/a/20270389/2417602) for that. — vikscool, May 24 '18 at 11:32

score 0 · Accepted Answer · answered May 24 '18 at 10:39

You have to empty the table in beforeSend,

function submitForm() {
        url = $("#form").serialize();
        console.log(url);
        $(document).ready(function() {
            $.ajax({
                type: "GET",
                dataType: "json",
                url: '/api/test?'+url,
                'beforeSend': function (request) {
                    if ($.fn.DataTable.isDataTable("#achats_table")) {
                       $('#table').DataTable().clear();
                       $('#table').DataTable().destroy();
                       $('#table').empty();
                    }
                },
                success: function (data) {
                    //Getting data variable containing
                    data = data.data;
                    //the second time I call the function, data contains the new and old stuff at the same time
                }
        });
}

Actually there's an idea behind what you said, it's to delete the table in the asynchronous ajax. But it still doesn't work, the table returns more results than needed. — , May 24 '18 at 10:49

How to empty ajax data before sending it?

1 Answers1