Multiple Ajax calls to perform edit
Multiple Ajax calls to perform edit
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
Hi,
Is it possible to combine the actions into a single call? If not, then you could perhaps use
submitComplete
orpostEdit
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