Good morning: I designed an interface to obtain the data that will later be seen in a FullCalendar calendar.
The interface is made with a dynamic table that is filled with data as I select certain items.
I use the FormData() with append to gather the data (only from the table) and pass it via ajax to the controller, the problem that I have is that only the data of the last insertion made arrives.
I have searched the forum and I have found several similar or the same questions but some are unanswered and others do not suit what I need.
Annex code and images of the interface
In the form on the left (New Calendar), I select the items that I then pass to the table on the right (Calendar Design), which is inside a form, when I finish selecting all the items I click on the save button .
Code for table layout
switch (task) {
case 'carrera':
var fila = `<tr class="run" id="run`+$idRunnerCount+`">
<td width="100px" style="color:`+colorCarrera+`" class="text-center" id="dateRun">`+_hora+`</td>
<td width="50px" class="text-center" id="dateIRun" hidden>`+_dateIRun+`</td>
<td width="50px" class="text-center" id="dateFRun" hidden>`+_dateFRun+`</td>
<td width="50px" class="text-center" id="idRun" hidden>`+_idRun+`</td>
<td id="run" style="color:`+colorCarrera+`">`+_run+`</td>
<td id="colorRun" hidden>`+colorCarrera+`</td>
<td width="100px" class="text-center">
<i class="icons-buttons icon-delete fas fa-trash-alt" onclick="delete_run(`+$idRunnerCount+`);" style="cursor:pointer" title="Eliminar Carrera"></i>
</td>
</tr>`;
$('tbody#data_setup_calendar_table').append(fila);
$('#container_setup_calendar_table').css('display', 'block');
$idRunnerCount++;
break;
case 'timeout':
var fila = `<tr id="timeout`+$idTimeoutCount+`">
<td width="100px" style="color:`+colortimeout+`" class="text-center" id="setupTimeTimeout">`+_hora+`</td>
<td id="setupTimeout" style="color:`+colortimeout+`">`+_timeout+`</td>
<td width="100px" class="text-center">
<i class="icons-buttons icon-delete fas fa-trash-alt" onclick="delete_timeout(`+$idTimeoutCount+`);" style="cursor:pointer" title="Eliminar Time out"></i>
</td>
</tr>`;
$('tbody#data_setup_calendar_table').append(fila);
$('#container_setup_calendar_table').css('display', 'block');
$idTimeoutCount++;
break;
}
With JQuery I receive and prepare the data with FormData and with Ajax I pass it to the controller:
var datosCarreras = new FormData();
var idEvento = [];
var idCategoria = [];
var horaI = [];
var horaF = [];
var color = [];
var task = [];
var action = [];
$('#setup_calendar_table').find('tbody tr.run').each(function() {
idEvento = $newId;
idCategoria = $(this).find('td#idRun').text();
horaI = $(this).find('td#dateIRun').text();
horaF = $(this).find('td#dateFRun').text();
color = $(this).find('td#colorRun').text();
task = 'insert';
action = 'carrera';
datosCarreras.append('idEvento', $newId);
datosCarreras.append('idCategoria', idCategoria);
datosCarreras.append('horaIni', horaI);
datosCarreras.append('horaFin', horaF);
datosCarreras.append('color', color);
datosCarreras.append('task', task);
datosCarreras.append('action', action);
});
$.ajax({
url: '../../../controllers/tasksCalendarController.php',
type: "POST",
data: datosCarreras,
async: false,
contentType: false,
processData: false,
success: function(response) {
var newRun = JSON.parse(response);
var procesado = newRun.procesado;
console.log('¿Procesado? '+procesado);
}
});
As I indicated at the beginning, the problem is that it only sends the last item of the table to the controller, I tried placing += to each variable but it still didn't work.
It is taking the last insert because every time you insert a value you replace the previous one.
What I did in your case is to create an object where it will have all the data that you capture at the time of traversing your each() each object traversed is inserted in an array to which you will send it by your data, in this way you capture everything without replacing the value, at the end and in php you can receive the array with the name of the key that is in the Ajax data property, in this case I put "datosCarreras"
I was able to solve the problem in the following way:
I created an object, as Sairento recommended, and when sending the data through Ajax I eliminated the values "contentType" and "processData" (I had completely forgotten about it), since they should only be used when the FormData object is used, that's why the empty POST was coming to the controller. Thank you very much for the help.