Ajax function inside a second Success function is not being called

Question

I am working with DataTables library where i need to make consecutive AJAX requests. Problem is that the AJAX function inside the second Success function is not being called. Here is the whole code

$(document).ready(()=>{
    $.ajax({
        url: 'http://localhost:3000/api/post/getUserData',
        method: 'post',
        dataType: 'json',
        data: {
            "email": window.email,
            "token": window.token
        },
        success: function(data){ // <-----------------------FIRST SUCCESS FUNCTION
            let table = $('#datatable').dataTable({
                data: data,
                "autoWidth": true,
                columns: [
                    {'data': 'id'},
                    {'data': 'main'},
                    {'data': 'shrinked'},
                    {'data': 'clicks'},
                    {"data": "id",
                        "render": function ( data, type, row, meta ) {
                            return `<button data-id=${data} onclick="disableThis(event)" class="btn btn-warning">Disable</button>`
                        }
                    },
                    {"data": "id",
                        "render": function ( data, type, row, meta ) {
                            return `<button data-id=${data} onclick="deleteThis(event)" class="btn btn-danger">Delete</button>`
                        }
                    }
                ]
            })
//------------------------------Function to add new Row inside Datatable when Form is submmitted
            $(function () {
                $('#form').bind('submit', function (event) {
                    event.preventDefault();
                    $.ajax({
                        url: 'http://localhost:3000/userShrink',
                        type: 'post',
                        datatype: 'json',
                        data: {
                            fullUrl: $('#Url').val(),
                            email: window.email,
                            token: window.token
                        },
                        success: function () { // <-----------------SECOND SUCCESS FUNCTION (THIS ONE IS NOT EXECUTING)
                            $.ajax({
                                url: 'http://localhost:3000/api/post/getUserData',
                                method: 'post',
                                dataType: 'json',
                                data: {
                                    "email": window.email,
                                    "token": window.token
                                },
                                success: function(data2){
                                    console.log(data2)
                                }
                            })
                        }
                    });
                });
            });
        }
    })
})

Now i checked the Network Profile of my web app in the browser,

On page load, this block is executing thus providing the data to DataTables Library, which then renders the table.

$(document).ready(()=>{
    $.ajax({
        url: 'http://localhost:3000/api/post/getUserData',
        method: 'post',
        dataType: 'json',
        data: {
            "email": window.email,
            "token": window.token
        },
        success: function(data){ // <-----------------------FIRST SUCCESS FUNCTION
            let table = $('#datatable').dataTable({
                data: data,
                "autoWidth": true,
                columns: [
                    {'data': 'id'},
                    {'data': 'main'},
                    {'data': 'shrinked'},
                    {'data': 'clicks'},
                    {"data": "id",
                        "render": function ( data, type, row, meta ) {
                            return `<button data-id=${data} onclick="disableThis(event)" class="btn btn-warning">Disable</button>`
                        }
                    },
                    {"data": "id",
                        "render": function ( data, type, row, meta ) {
                            return `<button data-id=${data} onclick="deleteThis(event)" class="btn btn-danger">Delete</button>`
                        }
                    }
                ]
            })

After that, if the form's getting submitted, it triggers this event which then POST's the data in the DB successfully.

//------------------------------Function to add new Row inside Datatable when Form is submmitted
            $(function () {
                $('#form').bind('submit', function (event) {
                    event.preventDefault();
                    $.ajax({
                        url: 'http://localhost:3000/userShrink',
                        type: 'post',
                        datatype: 'json',
                        data: {
                            fullUrl: $('#Url').val(),
                            email: window.email,
                            token: window.token
                        },

Things go wrong when the second success function is executed or rather not executed, the reason i need that second success function is to load newly submitted data into the DataTables.

success: function () { // <-----------------SECOND SUCCESS FUNCTION (THIS ONE IS NOT EXECUTING)
                            $.ajax({
                                url: 'http://localhost:3000/api/post/getUserData',
                                method: 'post',
                                dataType: 'json',
                                data: {
                                    "email": window.email,
                                    "token": window.token
                                },
                                success: function(data2){
                                    console.log(data2)
                                }
                            })
                        }

What could be the reason for this behavior? Thank you.

Have you tired moving out your add row function outside your first ajax call ? — Sven.hig, Aug 05 '20 at 21:13
Hope this helps https://stackoverflow.com/questions/10089447/jquery-ajax-request-inside-ajax-request — wiseone, Aug 05 '20 at 21:15
@wiseone i tried that already before posting my question, didn't work either. — Zulfiqar Ali, Aug 05 '20 at 21:16
I tried that @Sven.hig , but still the success function of `add row` function is not being called. and i need that `table` variable which i create while initialising `DataTable` to add new `row` in the table with the data that should be returned by the second `success` function. — Zulfiqar Ali, Aug 05 '20 at 21:21
make one event for form submission and also for your second ajax call and then use this to draw the raw `table.clear().rows.add(newData).draw();` — Sven.hig, Aug 05 '20 at 21:22

score 1 · Accepted Answer · answered Aug 05 '20 at 22:33

Fixed it myself, this is the add row function now

$(function () {
    $('#form').bind('submit', async function (event) {
        // using this page stop being refreshing
        event.preventDefault();
        let data = {
            'fullUrl': $('#Url').val(),
            'email': window.email,
            'token': window.token
        }
        let data2 = {
            'email': window.email,
            'token': window.token
        }
        $.post('http://localhost:3000/userShrink', data);
        setTimeout(()=>{
            $.post('http://localhost:3000/api/post/getUserData', data2).done(function (res){
                $('#datatable').DataTable().row.add(res[res.length-1]).draw();
            });
        }, 1000)

    })
});

Ajax function inside a second Success function is not being called

1 Answers1