Uncaught TypeError: undefined is not a function - I am becoming crazy!
Uncaught TypeError: undefined is not a function - I am becoming crazy!
fabianopall
Posts: 7Questions: 1Answers: 0
Hi everybody,
I am becoming a bit crazy try to understand why the following code doesn't work. I have a DataTable that works fine, now I would like to add a selection from a field as inthe example (https://datatables.net/examples/api/multi_filter_select.html) but when I am going to fill the selection with the data it gives me the error. The only difference with the example on the API in the website is that I dynamically fill the datatable with the data.
For now I give up, I hope someone can give mi an hint! thanks! - http://debug.datatables.net/odenaj
the problem seems to be here var table = $("#address").DataTable(); and so it doesn't work here table.column( i ).data().unique().sort().each( function ( d, j )
Any suggestions?? thanks a lot!
/*
* Editor client script for DB table address
* Automatically generated by http://editor.datatables.net/generator
*/
(function($){
$(document).ready(function() {
/* Create an array with the values of all the checkboxes in a column */
$.fn.dataTableExt.afnSortData['dom-checkbox'] = function ( oSettings, iColumn )
{
return $.map( oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
return $('td:eq('+iColumn+') input', tr).prop('checked') ? '1' : '0';
} );
};
var editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/table.address.php",
"domTable": "#address",
"fields": [
{
"label": "Latitude",
"name": "latitude",
"type": "text"
},
{
"label": "Longitude",
"name": "longitude",
"type": "text"
},
{
"label": "Source",
"name": "geocode_process",
"type": "hidden"
},
{
"label": "gdate",
"name": "geocode_date",
"type": "hidden"
}
],
"events": {
"onPreSubmit": function ( o ) {
o.data.geocode_process = 6;
o.data.geocode_date = new Date().toISOString().slice(0, 19).replace('T', ' ');
var str = o.data.latitude;
var res = str.split(",");
var res1 = !isNaN(parseFloat(res[0])) && isFinite(res[0]);
var res2 = !isNaN(parseFloat(res[1])) && isFinite(res[1]);
if(res1 && res2){
o.data.latitude = res[0];
o.data.longitude= res[1]; };
}},
} );
// Edit record
$('#address').on('click', 'a.editor_edit', function (e) {
e.preventDefault();
editor.edit(
$(this).parents('tr')[0],
'Edit record',
{ "label": "Update", "fn": function () { editor.submit() } }
);
} );
$("#address").on('click','tr',function(event) {
$('ed').click();
});
// Create an array with the values of all the checkboxes in a column
$.fn.dataTableExt.afnSortData['dom-checkbox'] = function ( oSettings, iColumn )
{
return $.map( oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
return $('td:eq('+iColumn+') input', tr).prop('checked') ? '1' : '0';
} );
};
$('#address').dataTable( {
"sDom": 'T<"clear">lfrtip',
"iDisplayLength": 15,
"sDom": "Tfrtip",
"bServerSide": false,
"sAjaxSource": "php/table.address.php",
"aoColumns": [
{
"mData": "id","sName": "id" , "sClass": "center","sWidth": "2%"
},
{
"mData": "driver_id","sName": "Driver" , "sClass": "center","sWidth": "3%"
},
{
"mData": "address_full","sName": "City" , "sClass": "center","sWidth": "60%"
},
{
"mData": "city","sName": "City" , "sClass": "center","sWidth": "5%"
},
{
"mData": "postcode","sName": "Code" , "sClass": "center","sWidth": "1%"
},
{
"mData": "recipient","sName": "Name" , "sClass": "center","sWidth": "30%"
},
{
"mData": "latitude","sName": "Latitude" , "sClass": "center","sWidth": "6%"
},
{
"mData": "longitude","sName": "Longitude" , "sClass": "center","sWidth": "6%"
},
{ "sName": "Process",
"mData": "geocode_process",
"sClass": "center",
"sWidth": "1%"
},
{
"mData": null,
"sClass": "center",
"bSortable": false,
"sDefaultContent": '<a href="" id="ed" class="editor_edit">Edit</a>',
"sWidth": "3%"
}
],
"oTableTools": {
"sRowSelect": "single",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor },
{ "sExtends": "copy",
"bSelectedOnly": true,
"bHeader": false,
"mColumns": [1, 2, 3]
}
],
"sSwfPath": "js/copy_csv_xls_pdf.swf"
}
} );
var table = $("#address").DataTable();
$("#address tfoot th").each( function ( i ) {
var select = $('<select><option value=""></option></select>')
.appendTo( $(this).empty() )
.on( 'change', function () {
table.column( i )
.search( $(this).val() )
.draw();
} );
table.column( i ).data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
} );
}(jQuery));
This discussion has been closed.
Answers
Could be possible that the API need to be installed?
The Debug says:
No API methods installed
what does it mean?
See the second top FAQ :-)
Allan
Thanks Allan, I have seen it and I made some test changing the row 88 with
var table = $('#address').DataTable( ...
but still Uncaught Type Error, if I go in the Javascript console and type:
but if I ask for a API method like column
why it seems it doesn't give me an instance of the API?
I would need a link to a page showing the problem to be able to know why and offer any help.
Allan
Sorry for late reply but I found something really interesting after a bit of going up and down and make some tests.
I still have the same problem but I used the java console and I run the following code again:
and was fine.. then I run in the console the function:
and it worked perfectly showing me the select.. while
var table = $("#address").DataTable();is ignored when I load the script.. do you think is possible?it is strange. I tried to insert the
var table =at line 88 but still.. it ignore it!any suggestions? I think is part of the variable assignment/scope.. but I am not familiar with this Javascript so much..
thanks
Shouldn't be! There must be something else going on I think. Possibly something else is assigning to
tableor there is a scoping issue as you suggest.Allan
I thin I understood what is going on. I fill the datatable through the editor and ajax php that retrieve the data. Unfortunately I think the function to fill the select is called before the data is loaded and so the selects are empty.
Any idea how can I fix it?
thanks
F
Sounds like you want to use the
initCompletecallback, which is executed once the table has loaded the Ajax data and you can operate on it then.Regards,
Allan
Hi.
I have the same problem and i'm stuck, debbugin with google chrome browser, in watch expressions window, i saw that "table" object has functions like "ajax", "cell", "column", "columns", etc after initialized on example page but in my website the table object has functions like "_fnAddColumn", "_fnAddData", etc. that's the reason why i got the error message and i don't know why both object have different fuctions.
Regards
Update: My mistake i didn't realize about "dataTable" and "DataTable".
Thanks