submit name of modified field

gaspare.licari · July 2019

I have an editor table with some editable fields. The submission is made to the modification of one of the editable fields.
At submit I want to send all the data plus the name of the modified field.

colin · July 2019

Hi @gaspare.licari ,

Is this with inline() editing? If so, the default is to only send the changed value to the server. To send them all, use the submit form-options, something like this:

editor.inline(this, { submit: 'all' })

Cheers,

Colin

gaspare.licari · July 2019

my code is

            $(document).ready(function () {
                editor = new $.fn.dataTable.Editor({
                    ajax: ajaxProcessData,
                    table: "#compensi",
                    idSrc: "DT_ROWID",
                    formOptions: {
                        inline: {
                            submit: 'all'
                        }
                    },

Ho change it?

colin · July 2019

Hi @gaspare.licari ,

You should add it to the line where you're calling inline(), as in my example above. Where do you call that in your code?

Cheers,

Colin

gaspare.licari · July 2019

<%@ Language=VBScript %>


<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<html>
<head>
<title></title>
<style type="text/css" class="init">
</style>
<link href="../Class/DataTables/DataTables-1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="../Class/Editor-1.5.6/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="../Class/DataTables/Select-1.1.2/css/select.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="../Class/DataTables/Buttons-1.1.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="../Class/DataTables/KeyTable-2.1.1/css/keyTable.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="../Class/DataTables/FixedColumns-3.2.2/css/fixedColumns.dataTables.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../CSS/Lista.css">
<script src="../Class/jquery-1.12.2.min.js" type="text/javascript"></script>
<script src="../Class/DataTables/datatables.min.js" type="text/javascript"></script>
<script src="../Class/Editor-1.5.6/js/dataTables.editor.min.js" type="text/javascript"></script>
<script src="../Class/DataTables/Buttons-1.1.2/js/dataTables.buttons.min.js" type="text/javascript"></script>
<script src="../Class/DataTables/Select-1.1.2/js/dataTables.select.min.js" type="text/javascript"></script>
<script src="../Class/DataTables/KeyTable-2.1.1/js/dataTables.keyTable.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../Class/DataTables/FixedColumns-3.2.2/js/dataTables.fixedColumns.min.js"></script>

<script type="text/javascript" language="javascript">
    var outputObj = null;

    var ajaxProcessData = function (method, url, d, successCallback, errorCallback) {
        try {
            var postData = JSON.stringify(d);
            obj1 = JSON.parse(postData);
            obj2 = obj1.data;
            var obj;
            for (var i in obj2) {
                if (obj2.hasOwnProperty(i) && typeof (i) !== 'function') {
                    obj = obj2[i];
                    break;
                }
            }
            $.ajax({
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                url: 'compensi.server.asp',
                data: JSON.stringify(obj),

                success: function (data) {
                    try {
                        var output = JSON.parse(data);
                        outputObj = output;
                        if (successCallback)
                        {
                            if (typeof output.fieldErrors === 'object')
                            {
                                alert(output.fieldErrors[0].status);
                            }                           
                            successCallback(output);
                        }
                        else
                        {                               
                            return output;
                        }
                    }
                    catch (e) {
                        alert('EX S: ' + e.message);
                    }
                },
                error: function (xhr, err) {
                    alert('err: ' + err + ' - Status: ' + xhr.statusText + ' - Response: ' + xhr.responseText);

                    if (errorCallback)
                        errorCallback();
                }
            });
        }
        catch (e) {
            alert('EX: ' + e.message);
        }
    }
    var editor;
    <% 
    TIPOCOMPENSO = request("TIPOCOMPENSO")
    set objTIPOCOMPENSO = CreateObject("CSPersNewBL.CTipoCompenso")
    objTIPOCOMPENSO.Load Session("Utente"), cstr(TIPOCOMPENSO)
    ANNO = request ("ANNO")
    MESE = request ("MESE")
    INIZIO_MESE = "01" & "/" & MESE & "/" & ANNO        
    GIORNI_DEL_MESE = GetLastDay(INIZIO_MESE, 1)
    %>
            $(document).ready(function () {
                editor = new $.fn.dataTable.Editor({
                    ajax: ajaxProcessData,
                    table: "#compensi",
                    idSrc: "DT_ROWID",
                    formOptions: {
                        inline: {
                            submit: 'all'
                        }
                    },
                    fields: [
                    {
                        label: "codicedipendente:",
                        name: "CODICEDIPENDENTE"
                    }, {
                        label: "tipo compenso:",
                        name: "TIPOCOMPENSO"
                    }, {
                        label: "azione:",
                        name: "ACTION"
                    }, {
                        label: "D1",
                        name: "D1"
                    }, {
                        label: "D2",
                        name: "D2"
                    }, 
                    {
                        label: "DT_RowId:",
                        name: "DT_ROWID"
                    }, {
                        label: "id:",
                        name: "ID_COMPENSI_TOT"
                    } 
                    ]
                });
                    var table = $('#compensi').DataTable({
                        dom: "Bfrtip",
                        ajax: {
                            url: 'compensi.server.asp?ANNO=<%=request("ANNO")%>&MESE=<%=request("MESE")%>&TIPOCOMPENSO=<%=request("TIPOCOMPENSO")%>',
                            type: "POST"
                        },
                        pageLength: 10,
                            //scrollY: 600,
                            scrollX: true,
                            scrollCollapse: true,
                            //paging: false,
                            fixedColumns:   {
                                leftColumns: 5,
                            },
                        "language": {
                            "paginate": {
                                "first": "Prima",
                                "last": "Ultima",
                                "previous": "Indietro",
                                "next": "Avanti",
                                "emptyTable": "Dati non disponibili."
                            },
                            "info": "Sto mostrando da _START_ a _END_ di _TOTAL_ records",
                            "search": "Cerca:"
                        },
                        columns: [
                    { data: "CODICEDIPENDENTE" },
                    { data: "TIPOCOMPENSO", "visible": false },
                    { data: "ACTION", "visible": false },
                    { data: "D1", render: function ( data, type, full, meta ) {return IntToHours(data);}},
                    { data: "D2", render: function ( data, type, full, meta ) {return IntToHours(data);}},
                    { data: "DT_ROWID", "visible": false },
                    { data: "ID_COMPENSI_TOT", "visible": false }
                    ],
                    "columnDefs": [ 
                    ],
                        order: [1, 'asc'],
                        keys: {
                            columns: ':not(:nth-child(35)):not(:nth-child(36)):not(:nth-child(37)):not(:nth-child(38)):not(:nth-child(39))',
                            editor: editor
                        },
                        select: false,
                        buttons: []//,
                        /*
                        "createdRow": function ( row, data, index ) {                            
                            alert(data[0]);
                            alert(data[1]);
                            alert(data[2]);
                            alert(data[3]);
                            if ( data[5] == 1 ) {
                                $('td', row).eq(5).addClass('highlight');
                            }
                        }
                        */
                    });
                editor
                    .on('open', function (e, mode, action) {
                        if (mode === 'main') {
                            table.keys.disable();
                        }
                    })
                    .on('close', function () {
                        table.keys.enable();
                    });
            });
</script>

</head>
<body class="dt-example">
<div class="container">
<table id="compensi" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th width="10%">Cod.Dip.</th>
<th width="10%">Tipo Compenso</th>
<th>Action</th>
<th width="2%"><%=GiornoDellaSettimana("01/" & MESE & "/" & ANNO, 2)%></th>
<th width="2%"><%=GiornoDellaSettimana("02/" & MESE & "/" & ANNO, 2)%></th>
<th>RowId</th>
<th>IdCompensi_Tot</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
<%
Function GiornoDellaSettimana(Data, Lunghezza)
GiornoDellaSettimana = Day(cdate(Data)) & "</br>" & Left(WeekdayName(Weekday(cdate(Data))), cint(Lunghezza))
End Function
%>

colin · July 2019

I can't see in that code where you're calling the inline() function. That would be the place to add it, as I showed in my example above.

gaspare.licari · July 2019

I do not call explicitly inline (), it is defined in

                formOptions: {
                    inline: {
                        submit: 'all'
                    }
                },

gaspare.licari · July 2019

My post data is as image

From this Json i don't understand which field is changed! (D1..D30)
I still have to submit all the fields

allan · July 2019

You are using keys.editor which will do the inline() call for you.

Editor doesn't have an API option that will let you do exactly what you are looking for I'm afraid - it will either give you the data that was changed, or all of the data, and doesn't provide information about which was the field that was changed.

That said, it is possible to get that information using the displayed(). You could then use preSubmit to send to the server what field(s) were shown:

editor.on('preSubmit', function (e, data) {
  data.edited = editor.displayed();
});

Then use edited at the server-side to tell what was edited.

The will work for user interaction, but it is technically possibly to use the API to mess with that - trigger inline editing on a specific cell, and then use the API to edit the value of a different cell!

Allan

submit name of modified field

submit name of modified field

Answers

Howdy, Stranger!

Categories

DataTables

submit name of modified field

submit name of modified field

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables