Uncaught Error adding field - unknown field type select2
Uncaught Error adding field - unknown field type select2
teditor
Posts: 6Questions: 2Answers: 0
Hi all,
I'm testing Editor with node.js and trying to get select2 to work without success. I've created a new controller based on the provided controllers which seemed to be working fine before including select2.
One of my columns contains several lines which I have formatted according to the Select2 data format:
https://select2.org/data-sources/formats
except with "value" and "label" instead of "id" and "text" and I can see all the data when I do a GET Request with Postman.
When I start the server there is nothing from the table on my test page except of the headers and I see this error in the console for select2 as well as selectize:
Uncaught Error adding field - unknown field type select2 jquery-3.3.1.js:3827
When I change the type from "select2" to "select" the table appears but in the corresponding column there is only "[Object Object]".
This is the content of my HTML file:
(I've used the "options" from the example here for testing:
https://editor.datatables.net/plug-ins/field-type/editor.select2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
<title>TEST 1</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.17/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.6/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.17/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.6/js/dataTables.select.min.js"></script>
<script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" src="../resources/editor-demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function () {
editor = new $.fn.dataTable.Editor({
ajax: "/api/test1",
table: "#example",
fields: [{
label: "Name:",
name: "name"
}, {
label: "Lines:",
name: "lines",
type: "select2",
"options": {
"FOO": [{
"label": "(This text does not matter. It is never displayed by Select2.)",
"value": ""
}],
//other joined fields...
}
}]
});
$('#example').DataTable({
dom: "Bfrtip",
ajax: "/api/test1",
columns: [{
data: "name"
},
{
data: "lines"
}
],
//select: true,
buttons: [{
extend: "create",
editor: editor
},
{
extend: "edit",
editor: editor
},
{
extend: "remove",
editor: editor
}
]
});
});
</script>
</head>
<body class="dt-example node">
<div class="container">
<section>
<h1>TEST 1<span></span></h1>
<div class="info">
<p></p>
</div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Lines</th>
</tr>
</thead>
</table>
</section>
</div>
</body>
</html>
Any idea what is wrong?
This question has an accepted answers - jump to answer
Answers
I might be missing it but I don't see that you loaded the actual plugin code as noted here:
https://editor.datatables.net/plug-ins/field-type/editor.select2#Plug-in-code
I see you loaded
select2.min.jsbut you also need the field type plugin code.Kevin
@kthorngren : Thanks for the quick response!
I thought I mentioned that I'm using the trial version but I didn't...
It seems that the code for the plugins is not included in the trial version as mentioned here:
https://datatables.net/forums/discussion/40596/probem-integrating-field-type-plugins-with-datatable-editor
This is correct - the plug-ins are made available to license holders. The Select2 plug-in page should actually say that.
Allan