Uncaught TypeError: undefined is not a function - I am becoming crazy!

fabianopall

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));

fabianopall

Could be possible that the API need to be installed?
The Debug says:

No API methods installed

what does it mean?

allan

See the second top FAQ :-)

Allan

fabianopall

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:

table
function table(data, [columns]) { [Command Line API] }

but if I ask for a API method like column

table.column(1)
TypeError: undefined is not a function

why it seems it doesn't give me an instance of the API?

allan

I would need a link to a page showing the problem to be able to know why and offer any help.

Allan

fabianopall

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:

var table = $("#address").DataTable();

and was fine.. then I run in the console the function:

$("#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>' )
        } );
    } );

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

allan

do you think is possible?

Shouldn't be! There must be something else going on I think. Possibly something else is assigning to table or there is a scoping issue as you suggest.

Allan

fabianopall

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

allan

Sounds like you want to use the initComplete callback, which is executed once the table has loaded the Ajax data and you can operate on it then.

Regards,
Allan

elchente23

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