I have a dependant select to populate the select learning_event.week_fk
var editor = new $.fn.dataTable.Editor( {
ajax: "program_data/learning_event_data.php",
table: "#learning_event_table",
template: '#learning_event_form',
fields: [ {
label: "Learning Event:",
name: "learning_event.learning_event_name"
}, {
label: "Outline:",
name: "learning_event.outline",
type: "ckeditor"
}, {
label: "Program Outcome:",
name: "program_outcome[].program_outcome_pk",
type: "select",
placeholder: 'No selection',
placeholderDisabled: false,
placeholderValue: 0,
multiple: true
}, {
label: "Unit Group:",
name: "learning_event.unit_group_fk",
type: "select",
placeholder: "Select Unit Group..."
}, {
label: "Week:",
name: "learning_event.week_fk",
type: "select",
placeholder: "Select Week..."
}, {
label: "Presentations:",
name: "presentation[].presentation_pk",
type: "select",
placeholder: 'No selection',
placeholderDisabled: false,
placeholderValue: 0,
multiple: true
}, {
label: "Conditions:",
name: "mcondition[].mcondition_pk",
type: "select",
placeholder: 'No selection',
placeholderDisabled: false,
placeholderValue: 0,
multiple: true
}, {
label: "Type:",
name: "learning_event_type[].learning_event_type_pk",
type: "select",
placeholder: 'No selection',
placeholderDisabled: false,
placeholderValue: 0,
multiple: true,
attr: {
size: 1
}
} ]
} );
editor.dependent('learning_event.week_fk', function(val, data, callback) {
editor.field('learning_event.unit_group_fk').input().on('change', function(e, d) {
//check if user or editor initiated update
if (d && d.editorSet) return;
$.ajax({
url: 'program_data/get_weeks.php',
data: {
"unit": editor.get('learning_event.unit_group_fk')
},
type: 'POST',
dataType: 'JSON',
success: function(data) {
callback(data);
}
});
});
});
var table = $( '#learning_event_table' ).DataTable( {
responsive: true,
"autoWidth": false,
"lengthMenu": [
[ 5, 10, 25, 50, -1 ],
[ 5, 10, 25, 50, "All" ]
],
columnDefs: [ {
targets: 1,
render: $.fn.dataTable.render.ellipsis( 150, true )
} ],
ajax: "program_data/learning_event_data.php",
dom: "Blfrtip",
columns: [ {
data: "learning_event.learning_event_name",
}, {
data: "learning_event.outline",
}, {
data: "program_outcome",
render: "[, ].program_outcome"
}, {
data: "unit_group.unit_group"
}, {
data: "week.week"
}, {
data: "presentation",
render: "[, ].presentation_name"
}, {
data: "mcondition",
render: "[, ].mcondition_name"
}, {
data: "learning_event_type",
render: "[, ].learning_event_type_name"
}, {
data: "learning_event.modified"
}, {
data: "learning_event.modified_by"
}, {
data: null,
className: "center",
defaultContent: '<a href="" class="editor_edit">Edit</a>'
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: []
} );
more in next post...