Issue with fnFilter [solved]

ck80

I'm using the example here:

http://datatables.net/examples/api/multi_filter.html

to use the fnFilter, however when I call it in my browser (Chrome) I'm getting the following:

Uncaught TypeError: Object [object Object] has no method 'fnFilter'

Here's my code, any help would be GREATLY appreciated.

[code]





var asInitVals = new Array();

$(window).load(function() {

var oTable = $('#table-example').dataTable();

//$(window).resize();

$("tfoot input").keyup( function () {
// Filter on the column (the index) of this element
oTable.fnFilter( this.value, $("tfoot input").index(this) );
});


/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
});

$("tfoot input").focus( function () {

if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
});

$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
});


});

[/code]

Edit:

Also, I should note that the table is being "datatable-ified" fine, and the global search is working correctly, it's just the column filters that are causing issues.

Solved:

I'm not 100% sure what the problem is, I had the way up in the header, and I moved it to right above the code I was trying to execute, and all started to work.

allan

Hi,

I presume it was line 15 that was throwing the error? Looking at the code, everything looks like it should be correct there - oTable is defined before being used, so I'm surprised that would be causing an issue. If it was that line, then it only happened when you actually tried to filter a column - is that correct?

However, I am wondering what effect the 'defer' attribute on your script tag will have. That will bump the request of the get of the DataTables script to the point of window.load - the tag that contains the DataTables initialisation also has the defer attribute, so I presume (although I'm not certain) the browser will still load and execute the scripts in sequence. Otherwise it might be that the initialisation runs before the DataTables script has been fully loaded. But that would give you a script error when calling the $().dataTable() method...!

Good to hear you have a workaround now, but if you have a link you can give me showing the issue, I'll take a look to see if I can figure out what was going wrong.

Regards,
Allan

seraphimpunk

very similar problem. and getting the same error. It works fine on firefox. but on Chrome and Safari, there's an error "Uncaught TypeError: Object [object Object] has no method 'fnFilter' "

I tried taking out defer statements in the script tags, and re-ordering the javascript includes to happen right before the script containing the fnFilter, but that doesn't seem to help in this case. Everything else is extremely close to the example code presented on datatables.net, so i'm at a loss for why its having an error on two browsers, but working on firefox. I've tried declaring oTable before the document.ready function, using keydown, keypress. its detecing the keystroke, and then breaking on the otable.fnFilter. I know via debug alerts i was using that its getting this.value and the index(this) properly.

edit: using datatables 1.9.4, tabletools 2.1.4

[code]




var asInitVals = new Array();
$(document).ready(function() {
var oTable = $( '#example' ).dataTable( {
"oLanguage" : {
"sSearch" : "Search all columns:"
},
"sAjaxSource" : "/index.php/wizard",
"sDom" : 'T<"clear">lfrtip',
"oTableTools" : {
"sSwfPath" : "/swf/copy_csv_xls_pdf.swf",
"aButtons" : [
"copy",
"csv"
]
}
} );
$(window).resize();

$( "thead input" ).keyup( function () {
/* filter on the coumn (the index) of this element */
oTable. fnFilter ( this.value, $( "thead input" ).index( this ) );
} );

$( "thead input" ).each( function (i) {
asInitVals[i] = this.value;
} );

$( "thead input" ).focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

$( "thead input" ).blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[ $( "thead input" ).index( this )];
}
} );
});
'



[/code]

allan

Can you link us to the page please? That looks like it should work.

Allan

seraphimpunk

its internal / has some sensitive data. can't link to it. i can see if i can set up a public facing one w/ dummy data tonight.

seraphimpunk

in chrome the error does get listed fully as:

Uncaught TypeError: Object [object Object] has no method 'fnFilter' index.php:181
$.each.asInitVals.(anonymous function) index.php:181
jQuery.event.dispatch jquery-1.7.1.js:3256
jQuery.event.add.elemData.handle.eventHandle

if that provides any insight.