Editor - select defaults to first option on edit
Editor - select defaults to first option on edit
maw
Posts: 2Questions: 1Answers: 0
I cannot figure out why that when I click to edit a select field the selected option always defaults to the first option. This only applies to the 'created by' field, and not the active field. I'm using php Laravel's blade template engine but this is the end result. Is there something I'm missing? Thank you,
var editor, table;
$(document).ready(function() {
// Editor
editor = new $.fn.dataTable.Editor( {
ajax: "/suppliers/data",
table: "#table",
fields: [
{ label: "Name:", name: "name" },
{ label: "Active:", name: "active", type: 'select',
options: ['Yes','No']
},
{ label: "Added by:", name: "created_by", type: 'select',
options: [
{ label: 'First Name', value: '1' },
{ label: 'Second Name', value: '2' },
{ label: 'Third Name', value: '3' },
{ label: 'Fourth Name', value: '4' },
]
}
],
i18n: {
create: {
title: "Add a new Supplier",
},
edit: {
title: "Edit Supplier",
}
}
} );
editor.on( 'preSubmit', function ( e, o, action ) {
if ( action !== 'remove' ) {
var name = this.field('name');
if (!name.isMultiValue()){
if (!name.val()) {
name.error('A name must be provided');
}
}
if ( this.inError() ) {
return false;
}
}
} );
// Inline edit functionality
$('#table').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this, {
onBlur: 'submit'
});
} );
//Datatable
table = $('#table').DataTable( {
dom: "Bfrtip",
ajax: "/suppliers/data",
order: [[ 1, 'asc' ]],
columns: [
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false,
width: '1%'
},
{ data: "name" },
{ data: "active" },
{ data: "created_by" }
],
select: {
style: 'single',
selector: 'td:first-child'
},
columnDefs: [
{visible: false, targets: 0},
],
buttons: [
{ extend: "create", editor: editor, text: "Add" },
{ extend: "edit", editor: editor},
{ extend: "remove", editor: editor}
]
} );
// add input for each column for Projects Table
$('#table tfoot td.searchable').each(function(){
$(this).html('<input class="filter-input" type="text"/>')
});
// add search function for Projects Table
table.columns().every(function(){
let that = this;
$('input', this.footer()).on('keyup change', function () {
if(that.search !== this.value){
that.search(this.value).draw();
}
})
});
editor.on( 'open', function ( e, mode, action ) {
$('#DTE_Field_created_by').select2({
selectOnClose: true,
dropdownAutoWidth : true
});
} );
} );
This discussion has been closed.
Answers
Solution was difficult to find, but obvious when I found it. My values from my ajax response (name strings) did not match the select option values (ids).