0

Buenos días: Diseñé una interfaz para obtener los datos que luego se verán en un calendario FullCalendar.
La interfaz está hecha con una tabla dinámica que se va llenando de datos en la medida que selecciono ciertos items.
Utilizo el FormData() con append para reunir los datos (sólo de la tabla) y pasarlos via ajax al controlador, el problema que se me presenta es que sólo llegan los datos de la ultima insercción hecha.
He buscado en el foro y he conseguido varias preguntas parecidas o iguales pero algunas están sin respuesta y otras no se adaptan a lo que necesito.
Anexo código e imágenes de la interfaz

Imagen de la interfaz

En el formulario de la izquierda (Nuevo Calendario), selecciono los items que luego paso a la tabla de la derecha (Diseño del Calendario), la cual está dentro de un formulario, al terminar de seleccionar todos los items hago click en el botón guardar.
Código para el diseño de la tabla

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;
    }  

Con JQuery recibo y preparo los datos con FormData y con Ajax los paso al controlador:

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);

        }
    });  

Como indiqué al principio, el problema es que envía al controlador sólo el último item de la tabla, intenté colocando += a cada variable pero igual no funcionó.

Este es el objeto creado El objeto creado antes de enviar

Pero el POST llega vacío al controlador
POST vacío

4
  • Creo que tu error esta en el append guarda un valor.. por que en vez no usas datosCarreras.push({"idEvento":$newId}); y envias como array? de Igual manera estas creando array arriba Commented el 2 nov. 2021 a las 17:02
  • Hola Josue, no se pude utilizar push con FormData, ya lo intenté y me da error Commented el 2 nov. 2021 a las 19:26
  • No leíste mi comentario, pero igual verifica la respuesta que te dieron a ver si te funciona. Commented el 2 nov. 2021 a las 19:33
  • Uncaught TypeError: datosCarreras.push is not a function at HTMLTableRowElement.<anonymous> (functions.js:2976) at Function.each (jquery-3.0.0.min.js:2) at r.fn.init.each (jquery-3.0.0.min.js:2) at insertRuns (functions.js:2968) at HTMLFormElement.calendarProcess (functions.js:2775) at HTMLFormElement.dispatch (jquery-3.0.0.min.js:3) at HTMLFormElement.q.handle (jquery-3.0.0.min.js:3) Commented el 2 nov. 2021 a las 19:41

2 respuestas 2

1

Está tomando la última inserción porque cada vez que insertas un valor reemplazas el anterior.

    ArrayDatosCarrera = [];
$('#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 = {
       "idEvento": newId,
       "idCategoria": idCategoria,
       "horaIni": horaI,
       "horaFin": horaF,
       "color": color,
       "task": task,
       "action": action
   }
   ArrayDatosCarrera.push(datosCarreras)
});

    $.ajax({
        url: '../../../controllers/tasksCalendarController.php',
        type: "POST",
        data: {"datosCarreras": ArrayDatosCarrera},
        async: false,
        contentType: false,
        processData: false,
        success: function(response) {
            var newRun = JSON.parse(response);
            var procesado = newRun.procesado;

            console.log('¿Procesado? '+procesado);

        }
    });

Lo que hice en tu caso es crear un objeto donde tendrá todos los datos que capturas al momento de recorrer tu each() cada objeto recorrido es insertado en un arreglo al cual lo mandarás por tu data, de esta manera capturas todo sin estar reemplazando el valor, al final ya en php lo puedes recibir el array con el nombre de la key que está en la propiedad data del Ajax, en este caso yo le puse "datosCarreras"

4
  • Ese código está en una función y se ejecuta sólo una vez, cuando doy click al botón "Guardar", de hecho lo coloqué dentro de un foreach para que recorriera todos los elementos de la tabla y fuera añadiéndolos uno después de otro. Commented el 2 nov. 2021 a las 19:30
  • Sairento ya lo había intentado de esa misma forma y a pesar de que se envían los datos, cuando llega el POST al controlador lo hace vacío. Coloco las imagenes de ambos (el objeto creado y el error en el controlador) Commented el 2 nov. 2021 a las 20:22
  • @JoséAlbertoLira Si nos puedes compartir de que manera estás recibiendo los datos en tu PHP sería de mucha ayuda. Commented el 2 nov. 2021 a las 20:37
  • 1
    Sairento ya lo solucioné, acabo de publicarlo. Commented el 2 nov. 2021 a las 22:14
0

Ya pude resolver el inconveniente de la siguiente forma:
Creé un objeto, como me recomendó Sairento, y al enviar los datos por Ajax eliminé los valores "contentType" y "processData" (lo había olvidado por completo), ya que se deben utilizar sólo cuando se utiliza el objeto FormData, por eso llegaba el POST vacío al controlador. Muchas gracias por la ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.