Editor + selectize plugin - Error!!!
Editor + selectize plugin - Error!!!
almircampos
Posts: 13Questions: 5Answers: 0
in Editor
Dears,
The code below was created by copying the example codes from the Editor and the DataTables. It's throwing following error...
TypeError: this.s.type is undefined
var fn = this.s.type[ name ]
... which is in the line 434 of the dataTables.editor.js:
_typeFn: function ( name /*, ... */ ) {
// Remove the name from the arguments list, so the rest can be passed
// straight into the field type
var args = Array.prototype.slice.call( arguments );
args.shift();
// Insert the options as the first parameter - all field type methods
// take the field's configuration object as the first parameter
args.unshift( this.s.opts );
var fn = this.s.type[ name ]; // This is the line 434 that is throwing an error.
if ( fn ) {
return fn.apply( this.s.host, args );
}
}
};
The error disappear when I drop the following code from the program:
{
"label": "Priority:",
"name": "priority",
"type": "selectize",
"options": [
{"label": "1 (highest)", "value": "1"},
{"label": "2", "value": "2"},
{"label": "3", "value": "3"},
{"label": "4", "value": "4"},
{"label": "5 (lowest)", "value": "5"}
] }
Any help will be appreciated. Thank you!
Additional information:
a) I have a developer license of the Editor;
b) The loaded json data is the same found at https://editor.datatables.net/examples/simple/simple.html
c) All the scripts and css codes are loading correctly.
Here is the full code:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<!-- CSS !-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css" rel="stylesheet" type="text/css" />
<link href="/Editor-1.4.2/css/dataTables.editor.css" rel="stylesheet" type="text/css" />
<link href="../css/selectize.css" rel="stylesheet" type="text/css"/>
<!-- SCRIPTS !-->
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.js" ></script>
<script src="//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js" ></script>
<script src="/Editor-1.4.2/js/dataTables.editor.js" ></script>
<script src="../js/selectize.min.js" type="text/javascript"></script>
<title>JSP Page</title>
</head>
<body>
<div class="wrapperDiv">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
$(document).ready(function () {
editor = new $.fn.dataTable.Editor({
ajax: "",
table: "#example",
fields: [{
label: "First name:",
name: "first_name"
}, {
label: "Last name:",
name: "last_name"
}, {
label: "Position:",
name: "position"
}, {
label: "Office:",
name: "office"
}, {
label: "Extension:",
name: "extn"
}, {
label: "Start date:",
name: "start_date",
type: "date"
}, {
label: "Salary:",
name: "salary"
},
{
"label": "Priority:",
"name": "priority",
"type": "selectize",
"options": [
{"label": "1 (highest)", "value": "1"},
{"label": "2", "value": "2"},
{"label": "3", "value": "3"},
{"label": "4", "value": "4"},
{"label": "5 (lowest)", "value": "5"}
]
}
]
});
$('#example').DataTable({
dom: "Tfrtip",
ajax: "data.json",
columns: [
{data: null, render: function (data, type, row) {
// Combine the first and last names into a single table field
return data.first_name + ' ' + data.last_name;
}},
{data: "position"},
{data: "office"},
{data: "extn"},
{data: "start_date"},
{data: "salary", render: $.fn.dataTable.render.number(',', '.', 0, '$')}
],
tableTools: {
sRowSelect: "os",
aButtons: [
{sExtends: "editor_create", editor: editor},
{sExtends: "editor_edit", editor: editor},
{sExtends: "editor_remove", editor: editor}
]
}
});
});
</script>
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Hi,
I don't see where you are loading the Editor / Selectize plug-in from here. Is that being loaded?
Allan
Hi, Allan.
I took hours trying to solve the problem and just a couple of minutes after posting the question on the forum I found the solution.
The problem was very simple: the javascript code detailed here was missing (the same you're talking about).
Sorry for the big posting and the late comment.
I get the same error. What is the best order to include the scripts?
in my case, it looks like:
@leprimo - That looks correct. Could you give me a link to the page so I can take a look and see what is going wrong?
Thanks,
Allan
Thanks for your efforts,
I've send login-data with contact-form.
BR
Dirk
Fantastic - thanks. This is a versioning issue - I'll add a note to the Editor site about this for the plug-ins shortly, but what the issue is is that the plug-in code you are using is designed for Editor 1.5, but you have Editor 1.4.2.
To fix, it is actually quite easy. Change:
To:
Regards,
Allan