Multiple Ajax calls to perform edit

Multiple Ajax calls to perform edit

ChuckTChuckT Posts: 8Questions: 4Answers: 1

Is there a way to make multiple Ajax calls with one click of the edit button? I have 3 tasks to complete synchronously to update my table. First, I need to make an Ajax call to un-join the id from the current table in my database. Second, I need to rejoin to the new table with the selection that the user selects. Third, should just redraw the table on "submit success" which I understand. I have looked at pre-submit and post-submit options and all the documentation I can find suggests (strongly in some cases) that I should not make an Ajax call in pre- or post-submit. Is there a way to make these calls using the Editor?

Here is my initialization of the table and Editor if need :

 // Forms table
        var table = $('#the-table').DataTable({
            dom: "Bfrtip",
            'ajax': {
                'url': apiPathProtected,
                'type': 'GET',
                "cache": true,
                "dataSrc": "data.forms",
                'beforeSend': function (request) {
                    request.setRequestHeader("X-Access-Token", user.token);
                    request.setRequestHeader("Content-Type", "application/json");
                },
                data: function ( d ) {
                    delete d.action;
                    delete d.data;
                }            
            },
            select: true,
            "columnDefs": [
                { "render": function ( data, type, row ) {
                    return dateAsString(data);
                },
                "targets": 0
                }, 
                { "targets": 2, "visible": false, "searchable": false },
                { "render": function ( data, type, row ) {
                    return data + ' ' + row.last_name;
                },
                "targets": 3
                },
                { "targets": 4, "visible": false, "searchable": false }, 
                { "targets": 7, "searchable": false, "data": null, "defaultContent": "<button id='view'>view pdf</button>"},
                { "targets": 8, "searchable": false, "data": null, "defaultContent": "<button id='email'>email pdf</button>"}
                ],
            "order": [[ 0, "desc" ]], 
            "columns": [
                { "data": "date_created" },
                { "data": "company_name" },
                { "data": "id_company" },
                { "data": "first_name" },
                { "data": "last_name" },
                { "data": "form_type" },
                { "data": "key_field_values" },
                { "searchable": false, "data": null, "defaultContent": "<button id='view'>view pdf</button>"},
                { "searchable": false, "data": null, "defaultContent": "<button id='email'>email pdf</button>"}
            ],
            "fnInitComplete": function(oSettings, json) {
                   console.log( 'DataTables has finished its initialisation.' );
            }            
        }); 

editor = new $.fn.dataTable.Editor( {
            edit: {
                type: 'PUT',
                dataSrc: "data.forms",
                url:  apiPathProtected,
                beforeSend: function (request) {
                    request.setRequestHeader("X-Access-Token", user.token);
                    request.setRequestHeader("Content-Type", "application/json");                    
                },
                contentType: 'application/json',
                data: function ( d ) {
                    var formData = d.data[Object.keys(d.data)[0]];
                    var customBody = {
                        "data":{ 
                            "id_address": formId,
                            "foreign_id": currentCompanyId
                    }
                    }
                    return JSON.stringify(customBody);
                }
            },
            table: "#the-table",
            idSrc:  'id',
            fields: [
                {   type:  "select",
                    label: "Company:",
                    name: "forms.company_name",                    
                    placeholder: "Select a Company"                    
                }
            ]            
        });

As always thanks for the great support.

Answers

  • allanallan Posts: 63,480Questions: 1Answers: 10,467 Site admin

    Hi,

    Is it possible to combine the actions into a single call? If not, then you could perhaps use submitComplete or postEdit to trigger the additional requests - but I'd suggest trying to combine them at the server-side, or perhaps using a proxy script that would combine them.

    Allan

This discussion has been closed.