Autofill is not working with Editor
Autofill is not working with Editor
kartikeyas00
Posts: 16Questions: 4Answers: 0
in AutoFill
Debug Code
awupid
Description of problem:
I am trying to submit the data to the database with autoFill extensions. Whenever I try to autofill, the editor doesn't get triggered at all. Like nothing happens at all. Maybe I am using the wrong configuration or there is a callback method, I need to use.
My javascript code:
<script>
var editor;
$(document).ready(function () {
editor = new $.fn.dataTable.Editor({
ajax: {
edit: {
type: 'PUT',
data: function (data) {
data = JSON.stringify(data.data)
return data
},
url: '{{url_for("veada_pattern_labels.already_created_labels_data_edit")}}'
},
remove: {
type: 'DELETE',
data: function (data) {
id = Object.keys(data.data);
return { 'id': JSON.stringify(id) }
},
url: '{{url_for("veada_pattern_labels.already_created_labels_data_remove")}}',
error: function (jqXHR, error, errorThrown) {
accessError(jqXHR.status);
},
}
},
table: "#myTable",
idSrc: 'id',
fields: [
{
label: "Year:",
name: "year"
},
{
label: "PID:",
name: "pid"
},
{
label: "PieceDescription:",
name: "piece_description"
},
{
label: "PieceQty:",
name: "piece_qty"
},
{
label: "File Name:",
name: "file_name"
},
{
label: "Company:",
name: "company"
},
{
label: "Series:",
name: "series"
},
{
label: "Seat Description:",
name: "seat_description"
},
{
label: "Seat LongDescription:",
name: "seat_longdescription"
},
{
label: "Side:",
name: "side"
},
{
label: "Piece Number:",
name: "piece_number"
},
{
label: "Total Pieces:",
name: "total_pieces"
},
{
label: "Extension1:",
name: "extension_1"
},
{
label: "ColorID1:",
name: "colorid_1"
},
{
label: "Extension2:",
name: "extension_2"
},
{
label: "ColorID2:",
name: "colorid_2"
},
{
label: "Extension3:",
name: "extension_3"
},
{
label: "ColorID3:",
name: "colorid_3"
},
{
label: "Extension4:",
name: "extension_4"
},
{
label: "ColorID4:",
name: "colorid_4"
},
{
label: "Extension5:",
name: "extension_5"
},
{
label: "ColorID5:",
name: "colorid_5"
},
{
label: "Piece Or Pair:",
name: "piece_or_pair",
type: "select",
options: ['Pc', 'Pair']
},
{
label: "Initials:",
name: "initials"
},
{
label: "User:",
name: "user"
}
]
});
table = $('#myTable').DataTable({
processing: true,
serverSide: true,
deferRender: true,
pageLength: -1,
ajax: "{{ url_for('veada_pattern_labels.already_created_labels_data')}}",
dom: "Blfrtip",
autoFill: {
//alwaysAsk: false,
horizontal: false,
editor: editor
},
keys: {
columns: ':not(:first-child)',
editor: editor,
blurable: true,
},
stateSave: true,
select: {
style: 'os',
selector: 'td:first-child',
},
//columns
columns: [
{ data: "id", "visible": false, },
{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false,
width: "12px"
},
{ data: "year" },
{ data: "pid" },
{ data: "piece_description" },
{ data: "piece_qty" },
{ data: "file_name" },
{ data: "company" },
{ data: "series" },
{ data: "seat_description" },
{ data: "seat_longdescription" },
{ data: "side" },
{ data: "piece_number" },
{ data: "total_pieces" },
{ data: "extension_1" },
{ data: "colorid_1" },
{ data: "extension_2" },
{ data: "colorid_2" },
{ data: "extension_3" },
{ data: "colorid_3" },
{ data: "extension_4" },
{ data: "colorid_4" },
{ data: "extension_5" },
{ data: "colorid_5" },
{ data: "piece_or_pair" },
{ data: "initials" },
{ data: "user" },
{ data: "session_id" },
{ data: "timestamp" }
],
buttons: [
"colvis",
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor },
],
})
yadcf.init(table, [
{
column_number: 2,
data: [{ label: '2015', value: '2015' }, { label: '2016', value: '2016' },
{ label: '2017', value: '2017' }, { label: '2018', value: '2018' },
{ label: '2019', value: '2019' }, { label: '2020', value: '2020' },
{ label: '2021', value: '2021' }, { label: '2022', value: '2022' },],
filter_type: "multi_select",
select_type: 'select2',
select_type_options: {
width: '50px',
dropdownAutoWidth: true,
}
},
{
column_number: 3,
filter_type: "multi_select",
select_type: 'select2',
select_type_options: {
width: '50px',
dropdownAutoWidth: true,
}
},
{
column_number: 7,
filter_type: "multi_select",
select_type: 'select2',
select_type_options: {
width: '75px',
dropdownAutoWidth: true,
}
},
{
column_number: 8,
filter_type: "multi_select",
select_type: 'select2',
select_type_options: {
width: '75px',
dropdownAutoWidth: true,
}
},
{
column_number: 9,
filter_type: "multi_select",
select_type: 'select2',
select_type_options: {
width: '75px',
dropdownAutoWidth: true,
}
},
{
column_number: 25,
filter_type: "multi_select",
select_type: 'select2',
select_type_options: {
width: '75px',
dropdownAutoWidth: true,
}
},
{
column_number: 26,
filter_type: "multi_select",
select_type: 'select2',
select_type_options: {
width: '75px',
dropdownAutoWidth: true,
}
},
{
column_number: 27,
filter_type: "multi_select",
select_type: 'select2',
select_type_options: {
width: '75px',
dropdownAutoWidth: true,
}
},
{
column_number: 28,
filter_type: "range_date",
date_format: "mm/dd/yyyy",
filter_delay: 500,
datepicker_type: 'jquery-ui'
},
])
});
</script>
{% endblock %}
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Also just to point out that it works fine when the data is not being submitted to the server. For example, where an editor has no ajax specified, just editing in the frontend, that's all. Looks very weird to me....
It works OK here - could you take a look and see if that helps, please.
Also, I see you're using YADCF, it would be worth trying with just vanilla DataTables to see if that's interfering in anyway. If it isn't, could you check the console for errors, please.
Colin
It is not working when taking YADCF out. Also, I have looked at the example and didn't help at all. There are no errors in the console. Maybe the way I am importing the libraries are the problem: Here they are-
Without a test case, it's difficult to say I'm afraid. My guess is that you might have another variable called
editorsomewhere on your page, since you are using a global value there, but if not that, we would need a test case.Thanks,
Allan
@allan Ok after a little debugging. I found out that the private method _editor has a bug which was returning undefined values for the id field of a certain row. I have documented my changes in the code below. This code is the part of dataTables.autoFill.js and it worked for me. Please review it and let me know if this is the correct way.
Please see my comments on 58-59. Thanks
Thanks for the patch. That suggests to me that the
rowIdparameter might need to be set toid- have you tried that?rowId: 'id'?Thanks,
Allan
Yes that worked. Also maybe it is a good idea to have both ways to get the ids? If one gives you undefined or someone didn't set the
rowIdparamYes, possibly. I should probably have gone with a default of
idfor the row id, rather thanDT_RowId... I'll keep this in mind for when we go major changes in future (due to concerns about backwards compatibility).Allan