Ajax функция внутри второй функции успеха не вызывается - PullRequest
Новая
       69

Ajax функция внутри второй функции успеха не вызывается

0 голосов
/ 06 августа 2020

Я работаю с библиотекой DataTables, где мне нужно делать последовательные AJAX запросы. Проблема в том, что функция AJAX внутри второй функции Success не вызывается. Вот весь код 

$(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)
                                }
                            })
                        }
                    });
                });
            });
        }
    })
})

Теперь я проверил Network Профиль моего веб-приложения в браузере,

При загрузке страницы этот блок выполняется, таким образом предоставляя данные для DataTables Библиотека, которая затем отображает таблицу. 

$(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>`
                        }
                    }
                ]
            })

После этого, если form отправляется, оно запускает это событие, которое затем POST успешно сохраняет данные в БД. 

//------------------------------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
                        },

Что-то go неправильно, когда вторая функция success выполняется или, скорее, не выполняется, причина, по которой мне нужна эта вторая функция успеха, заключается в загрузке вновь отправленных данных в 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)
                                }
                            })
                        }

В чем может быть причина такого поведения? Спасибо.

1 Ответ

1 голос
/ 06 августа 2020

Сам исправил, теперь это функция add row 

$(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)

    })
});
...