Cannot read property 'use' of undefined

[vladciulley]

I'm working on a Bootstrap 4 project. Since FooTable 3.1.6 Bootstrap version is not BS 4 compatible yet, I'm using the FooTable standalone version, the one compatible with BS 3, lacks a lot of functionalities in BS 4.

The generated filtering controls (search field, search button, columns dropdown button) use some Bootstrap classes that makes them to wrongfully display in page (for example, the dropdown button has two carets). Also, I'm going to need to add some extra filters. So, I've tried to replace the default UI (search field, button and dropdown) with a custom one, built on BS 3, using the documentation example.

$keywordFilter.on('input', function (e) {

        e.preventDefault();

        var filtering = FooTable.get('#my_footable_id').use(FooTable.Filtering);
        let keywords = $(this).val();                           

        if (!keywords.length) {                                
            filtering.removeFilter('keyword');
        } 
        else {
            filtering.addFilter('keyword', keywords, ["id","title","created_at"]);
        }

        filtering.filter();

    });

The problem is that FooTable.get() is not always working, sometimes resulting in being undefined. The only hints I have gathered so far are:

• Typing the search keyword fast triggers this error:

  Uncaught TypeError: Cannot read property 'use' of undefined

• If I type it slowly, the error does not trigger.

• If I use the original generated controls, the error never displays, regardless typing speed.

Am I doing something wrong? Is there a more detailed documentation about how you can replace the filters UI with a custom one that uses the default JS functionalities instead of writing my own JS?

[Carstairs]

I'm having the same error, but it occurs after unchecking and re-checking a checkbox that triggers a filter to run. If I click the checkbox repeatedly, and fast, then I get the error as well. If I click slowly, no error but nothing happens.

[vladciulley]

I ended up in changing the library (with DataTables) since I was in a very early stage with my project. But from what I recall, after more digging, I found that the default generated controls used a small delay in the JS code, which was missing in my custom implementation. That's why the error appeared only when using custom controls and not with the default ones. Hope it helps!

[jahrralf]

Also have this error since upgrading to jQuery3 from jQuery2

[stevengore]

I just updated to the latest version of jquery and I am also getting the error:

Uncaught TypeError: table.use is not a function at (index):484 at Function.each (jquery-3.3.1.js:354) at jQuery.fn.init.each (jquery-3.3.1.js:189) at handleSearch ((index):482) at (index):547

Has this been resolved or has anyone found a solution?

[stevengore]

I am still having this same issue. Has anyone found a solution???

[dwaybill]

I'm also running into the same issue with upgrading to JQuery 3 from 2. @stevengore were you ever able to figure out a solution?