Submit onBlur not working

dpanscik

There are 2 or 3 different techniques discussed to get a inline edit to submit onBlur. I might be using a incorrect combination of hooks and traps. At the moment, inline editing only submits when pressing "ENTER". Inline editing does not submit onBlur.

Wondering what I need to change to make onBlur submit work.

@{
    ViewBag.Title = "On Call";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>On Call</h2>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.3.5/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.6.1/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.3.1/css/dataTables.dateTime.min.css">
<link href="~/Content/style/editor.dataTables.css" rel="stylesheet" />
<link href="~/Views/OnCall/css/generator-base.css" rel="stylesheet" />

<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.13.3/af-2.5.2/b-2.3.5/b-html5-2.3.5/b-print-2.3.5/date-1.3.1/fh-3.3.1/kt-2.8.1/r-2.4.0/sl-1.6.1/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.13.3/af-2.5.2/b-2.3.5/b-html5-2.3.5/b-print-2.3.5/date-1.3.1/fh-3.3.1/kt-2.8.1/r-2.4.0/sl-1.6.1/datatables.min.css">

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.13.3/js/jquery.dataTables.min.js"></script>
<script src="~/scripts/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.5/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.6.1/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/datetime/1.3.1/js/dataTables.dateTime.min.js"></script>
<script type="text/javascript" src="~/scripts/dataTables.editor.min.js"></script>

<style>
    dt {
        margin-top: 1em;
    }

        dt:first-child {
            margin-top: 0;
        }

    dd {
        width: 25%
    }

    *[data-editor-field] {
        border: 1px dashed #ccc;
        padding: 0.5em;
        margin: 0.5em;
    }

        *[data-editor-field]:hover {
            background: #f3f3f3;
            border: 1px dashed #333;
        }
    .DTE_Form_Info{
        color: black;
    }
    div.dt-datetime {
        position: absolute;
        background-color: #f68d28;
        z-index: 2050;
        border: 1px solid #ccc;
        box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);
        padding: 0 20px 6px 20px;
        width: 275px;
    }
        div.dt-datetime table button {
            background-color: #fada06;

        }

    button.dt-button {
        color: white;
        
    }
</style>

<script>


    var editor;



    $(document).ready(function () {



        editor = new $.fn.dataTable.Editor({
            ajax: '/api/OnCallData',
            table: "#onCall",
            formOptions: {
                inline: {
                    submit: 'allIfChanged'
                }
            },
            fields: [
                {
                    label: "Shop",
                    name: "shop"
                },
                {
                label: "Day",
                name: "dayOC",
                type: "datetime",
                format: "ddd, DD MMM YYYY",


            }, {
                label: "Name",
                name: "name"
            }, {
                label: "Phone",
                name: "phone"
            }, {
                label: "Email",
                name: "email"
                }
            ]                  

        });
        $('#onCall').on('click', 'tbody td', function (e) {
            editor.inline(this, {
                submitOnBlur: true
            });

        });


        $("#onCall").DataTable({

            dom: "Bfrtip",
            order: [[0, 'asc']],
            "responsive": true,
            "processing": true, // for show progress bar
            "serverSide": true, // for process server side
            "filter": true, // this is for disable filter (search box)
            "orderMulti": false, // for disable multiple column at once
            "pageLength": 25,


            "ajax": {
                "url": "/api/OnCallData",
                "type": "POST",
                "datatype": "json",
                "data": function (d) {
                    return $.extend({}, d, {
                        "start_date": $('#datemin').val(),
                        "form_id": "OCgrid",
                    });
                }
            },


            "columnDefs":
                [
                    { "defaultContent": "-", "targets": "_all" },

                    {
                        "targets": [0],
                        "visible": true,
                        "searchable": true,
                        "orderable": true,
                        "type": "datetime",
                    },

                ],

            "columns": [


                { "data": "dayOC", "title": "Day", "name": "dayOC", "autoWidth": true },
                { "data": "shop", "title": "Shop", "name": "shop", "autoWidth": true },
                { "data": "name", "title": "Name", "name": "name", "autoWidth": true },
                { "data": "phone", "title": "Phone", "name": "phone", "autoWidth": true },
                { "data": "email", "title": "Email", "name": "email", "autoWidth": true },


            ],
            select: true,
            buttons: [
                {
                    extend: 'print',
                    title: "On Call",
                    messageTop: 'Weekend warriors'
                },
                { extend: "create", editor: editor },
                { extend: "edit", editor: editor },
                { extend: "remove", editor: editor }
            ],
            "fnRowCallback": function (nRow, aData) {

                const otherDate = new Date(aData["dayOC"]); // Some other date  aData["dayOC"]
                const todayDate = new Date(); // Current or today's date

           
                // Check if the other date matches today's date
                if (
                    otherDate.getDate() === todayDate.getDate() &&
                    otherDate.getMonth() === todayDate.getMonth() &&
                    otherDate.getYear() === todayDate.getYear()
                ) {
               
                    $('td', nRow).css('background-color', '#fada06');
                    $('td', nRow).css('color', 'black');
                    
                } else {

                }



            }
        });

    



    });


</script>

</head>
<body>
    <div class="container">
        <br />
        <div style="width:90%; margin:0 auto;">
            <table border="0" class="display nowrap" style="width:100%" cellspacing="5" cellpadding="5">
                <tbody>
                </tbody>
            </table>
            <table id="onCall" class="row-border table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
                <thead>
                    <tr>


                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
          

                    </tr>
                </thead>
            </table>
        </div>
    </div>
</body>
</html>  

kthorngren

Try using the current form of onBlur as described in the docs. Sounds like submitOnBlur is the old form.

Kevin

dpanscik

That was the magic! Thanks for the idea!