Odd issue invoking custom API method - works via jQuery events, but not when ran via Browser Console

jLinux

Having an odd issue with a custom API method that just alerts a string when executed.

Heres the DT Instance to replicate it.

To Replicate: Just click the FooBar button to execute the API method via jQuery $().click() (which should result in a simple alert), then open your browser console, and execute these two lines:

var table = new $.fn.dataTable.Api( $('#example') );
table.testPlugin.fooBar();

And you'll notice that you don't get the same alert, despite executing the exact same API method. Only difference is you're accessing the API through a new instance when you do it via the console.

Note: If the error you receive is Cannot read property 'fooBar' of undefined, then run the first line again.

The above should essentially do the same thing as clicking on the FooBar button... but it seems like the iterate() method doesn't get called when the API method testPlugin.fooBar() is executed manually.

It seems like the this.iterate() isn't getting called at all.

The only thing I really have that might be of some significance - The original version of this was actually in ES6, and I would transpile it to ES5 via Gulp, and when the conversion was completed, the ES5 version had the this.iterator()'s converted to undefined.iterator(). Heres the exact result of that section of code after transpiling:

$.fn.dataTable.Api.register('copyCons.attachEvents()', function (conditions) {
    return undefined.iterator('table', function (dtSettings) {
        _initUpdates(dtSettings);
    });
});

$.fn.dataTable.Api.register('copyCons.detachEvents()', function (conditions) {
    return undefined.iterator('table', function (dtSettings) {
        return dtSettings.oKeepConditions.detachEvents();
    });
});

So maybe Gulp is seeing something I don't? Just seems odd that gulp wasn't able to see that this was defined, and thats the same line I suspect im having the issue on.

ANY advice would be helpful!

allan

var table = new $.fn.dataTable.Api( $('#example') );

I think you mean: #example-1 for your example :-).

If I execute:

var table = new $.fn.dataTable.Api( $('#example-1') );
table.testPlugin.fooBar();

then it will show the alert correctly.

It seems like the this.iterate() isn't getting called at all.

It was, but it just didn't have anything to iterate over.

Allan

jLinux

Damnit... i must have copy and pasted it over and over and over... i worked on this for a while! I reduced a 1500+ line script down to that example, just to exclude everything else.. lol

Thanks!

jLinux

@allan, while were on the subject of the fn.dataTable.Api() method...

I notice that sometimes (usually, I think always actually...), I have to execute new $.fn.dataTable.Api( $selector ) twice before it seems to work.. And I'm not sure why. This only happens when I execute it via the console. In scripts it seems to work perfectly fine, just never works in the console the first time.

Screenshot: http://d.pr/i/1fGuu

Any idea? Just seems odd. Not a huge deal tho

allan

I have a feeling this might be a limitation of the API. If you do (before you register the sub functions):

$.fn.dataTable.Api.register('keepConditions()', function () {} );

I think that will resolve it. Its nasty that it requires that at all - it is something I need meaning to look into!

Allan