When using inline editing with a select box can you submit onchange? Right now the user needs to hit enter to save the change.
/**
* Defaults
*/
$.extend(true, $.fn.dataTable.defaults, {
dom: "<'row'<'col-sm-6 text-left'B><'col-sm-6'fr>>tip",
columns: [
{ data: 'readingOrder', render: function ( data, type, row ) {
return '<a class="delete-row"><i color="#ff0000" class="fa fa-trash"></i></a>   <i color="#000000" class="fa fa-arrows-v"></i>';
}
},
{ data: "field_title", className: 'editable'},
{ data: "field_desc", className: 'editable' },
{ data: "field_type", className: 'editable', render: function (data, type, row) {
if ( selects[data] == null ){
return '';
} else {
return selects[data];
}
}
},
{ data: "field_options", className: 'editable' },
],
columnDefs: [
{orderable: false, targets: [ 0,1,2,3,4 ] },
],
});
/**
* Employee Table
*/
var employeeEditor = new $.fn.dataTable.Editor( {
ajax: datatablesVars.ajaxUrl + '&form=employee',
table: '#employeeCoTable',
display: 'envelope',
fields: [ {
label: "Title",
name: "field_title"
}, {
label: "Description",
name: "field_desc"
}, {
label: "Type",
name: "field_type",
type: "select",
options : [{
label: "Text Box", value: 'text'
},{
label: "Text Area", value: 'textarea'
},{
label: "Radio", value: 'radio'
},{
label: "Check Box", value: 'checkbox'
}]
}, {
label: "Options",
name: "field_options"
},
]
});
var employeeTable = $('#employeeCoTable').DataTable( {
ajax: datatablesVars.ajaxUrl + '&form=employee',
rowReorder: {
dataSrc: 'readingOrder',
editor: employeeEditor
},
buttons: [
{
text: 'New',
action: function ( e, dt, node, config ) {
employeeEditor.inlineCreate('end');
newRow = parseFloat($('#employeeCoTable').DataTable().row(':last').data().readingOrder + parseFloat(1));
$('#DTE_Field_readingOrder').val(newRow);
}
},
],
});
$('#employeeCoTable').on( 'click', 'tbody td.editable', function () {
employeeEditor.inline( this );
});
$('#employeeCoTable tbody').on( 'click', 'a.delete-row', function () {
rowId = this.closest("tr").id;
employeeEditor.remove( '#' + rowId , false )
.submit();
});
employeeEditor.add( {
type: "hidden",
name: "form",
default: "employee"
});
employeeEditor.on( 'preSubmit', function ( e, data, action ) {
$.each( data.data, function ( key, values ) {
newRow = parseFloat($('#employeeCoTable').DataTable().row(':last').data().readingOrder + parseFloat(1));
data.data[ key ][ 'readingOrder' ] = newRow;
});
});