Submit onBlur not working
Submit onBlur not working
dpanscik
Posts: 202Questions: 47Answers: 0
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>
This question has an accepted answers - jump to answer
Answers
Try using the current form of onBlur as described in the docs. Sounds like
submitOnBluris the old form.Kevin
That was the magic! Thanks for the idea!