I create a new table row, data are shown on the screen but nothing is saved on Data Base!

AlexDTables

I want to add a new row in table 2 by selecting a row in table 1 (Because I need to use the table 1 row- id in table 2), I read the id of the selected row and want to create the record in table 2 by means an event with buttons.

so far so good...

I call draw() for refreshing of table 2, the record is shown with all the data ok, but missing the own row-id and in de DB is nothing saved!

I'm using .row.add() for adding the new row.

What I'm doing wrong?

Here me code:

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.levantamientos.php',
        table: '#levantamientos',
        fields: [

            {
                "label": "Contacto:",
                "name": "levantamientos.contacto_id",
                "def" : "0000", 
                type:   "select"
            },
            {
                "label": "Estatus:",
                "name": "levantamientos.estatus",
                "def": "REC",
                "type" : "readonly"
            },
            {
                "label": "Tipo Servicio:",
                "name": "levantamientos.tipo_servicio",
                "type": "select",
                "options": [
                    "Diseño y Construccion",
                    "Acabado y Remodelaciones",
                    "Mtto. Correctivo",
                    "Limpieza",
                    "Mtto. Preventivo",
                    "Facility Management"
                ]
            },
            {
                "label": "Descripcion:",
                "name": "levantamientos.descripcion"
            },
            {
                "label": "¿Urgente?:",
                "name": "levantamientos.urgente",
                "type": "select",
                "options": [
                    "Si",
                    "No"
                ]
            },
            {
                "label": "Comentarios:",
                "name": "levantamientos.comentarios_sol"
            },
            {
                "label": "Contacto en Stio:",
                "name": "levantamientos.contacto_sitio"
            },
            {
                "label": "Ubicacion:",
                "name": "levantamientos.ubicacion"
            },
            {
                "label": "Referencia:",
                "name": "levantamientos.referencia"
            },
            {
                "label": "Condiciones Cot.:",
                "name": "levantamientos.condiciones"
            },
            {
                "label": "Fecha Levantamiento:",
                "name": "levantamientos.lev_fecha",
                "type": "datetime",
                "format": "ddd, D MMM YY"
            },
            {
                "label": "Hora Levantamiento:",
                "name": "levantamientos.lev_hora",
                "type": "datetime",
                "format": "h:mm a"
            },
            {
                "label": "Fecha Cotizacion:",
                "name": "levantamientos.cot_fecha",
                "type": "datetime",
                "format": "ddd, D MMM YY"
            },
            {
                "label": "Notas Cotizacion:",
                "name": "levantamientos.notas_cot"
            },
            {
                "label": "Comentarios:",
                "name": "levantamientos.comentarios_lev"
            },
            {
                "label": "Archivo:",
                "name": "levantamientos.archivo",
                type: "upload",
                display: function ( file_id ) {
                    return '<img src="'+table.file( 'files', file_id ).web_path+'"/>';
                },
                clearText: "Clear",
                noImageText: 'No image'
            }
        ]
    } );

                var rowId = "99"; // Declarando la Variable

                // Obteniendo el id de la linea para pasarlo por id
                $('#levantamientos').on( 'click', 'tr', function () {
                rowId = table.row( this ).id();
                console.log( 'Clicked row id ' + rowId );
                } );

 

    var table = $('#levantamientos').DataTable( {
        dom: 'Bfrtip',
        ajax: 'php/table.levantamientos.php',
        columns: [
            {
                "data": "levantamientos.id"
            },
            {
                "data": "contactos.nombre"
            },
            {
                "data": "levantamientos.estatus"
            },
            {
                "data": "levantamientos.tipo_servicio"
            },
            {
                "data": "levantamientos.descripcion"
            },
            {
                "data": "levantamientos.urgente"
            },
            {
                "data": "levantamientos.comentarios_sol"
            },
            {
                "data": "levantamientos.contacto_sitio"
            },
            {
                "data": "levantamientos.ubicacion"
            },
            {
                "data": "levantamientos.referencia"
            },
            {
                "data": "levantamientos.condiciones"
            },
            {
                "data": "levantamientos.lev_fecha"
            },
            {
                "data": "levantamientos.lev_hora"
            },
            {
                "data": "levantamientos.cot_fecha"
            },
            {
                "data": "levantamientos.notas_cot"
            },
            {
                "data": "levantamientos.comentarios_lev"
            },
            {
                "data": "levantamientos.archivo",
                
                render: function ( file_id ) {return file_id ?
                    '<a href="'+table.file( 'files', file_id ).web_path+'" target="_blank" ><img src="'+table.file( 'files', file_id ).web_path+'" width="100" /></a>' :
                        null;
                },
                defaultContent: "No image",
                title: "Image"
            }
        ],
        select: true,
        lengthChange: false,
        buttons: [
            { extend: 'create', text: "Nuevo", editor: editor },
            { extend: 'edit', text:"Editar", editor: editor },
            { extend: 'remove', text:"Eliminar", editor: editor },

// Boton adicional
            {
                extend: "selectedSingle",
                text: "-> Cotizar",
                action: function ( e, dt, node, config ) {
                    // Alex
                    editor.edit(
                            table.row( { selected: true } ).index(),
                            false
                        )
                    editor.set(
                            'levantamientos.estatus','COT') // el campo debe estar editable arriba
                    editor.submit();
                }
            },

// Boton adicional
            {
                extend: "selectedSingle",
                text: "-> Añadir Item",
                action: function ( e, dt, node, config ) {
                
                var largo = rowId.length;
                console.log(largo);
                var solId = rowId.slice(4,largo);
                console.log( 'Añadiendo Item de: '  + solId );

                var table = $('#mtto_correctivo_data').DataTable();

                table.row.add( {
                        "id": "",
                        "solicitud_id": solId,
                        "unidad": "Pza",
                        "cantidad":"1",
                        "archivo":"1",
                        "trabajo": "Sin definir",
                        "descripcion":  "Nuevo Item",
                        "inst_previa":"No",
                        "equipo_cliente" : "No",
                        "desc_equipo_cliente": "Sin descripcion",
                        "material_cliente":"No",
                        "desc_material_cliente":"Sin asignar",
                        "fecha_propuesta":"2020-01-01",
                        "hora_propuesta":"01:00:00",
                        "costo_mencionado":"1.00",
                        "costo_proveedor":"1.00",
                        "herramienta":"Por definir",
                        "lista_materiales":"Sin asignar"
                    } ).draw();
                }
            }
        ]
    } );
} );

}(jQuery));

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

You need to use the Editor API methods to manipulate the data on the database - e.g. create() to create a new row, edit() to edit an existing row. The row.add() method is client-side, so nothing it submitted to the database.

Regards,
Allan

AlexDTables

Thanks for the info Allan, I did it with the Editor-API create() as you told me, it works fine!