jQuery-EasyTabs Error: d.publicMethods is undefined

I recently re-uploaded the EasyTabs script to my website (v3.2.0) and must have undone an edit I made to it. The EasyTabs do not load the Ajax content and when clocking on a tab, it goes to a bad URL. On pages without any EasyTabs , I get no errors. However, on the page there is I get this:

Error: d.publicMethods is undefined

Recently, I noticed that it stopped doing this, but the other problems metioned still remain. Here is my code:

$("#navbuttons")
            .easytabs({
                animate: true,
                animationSpeed: 500,
                cache: false,
                collapsible: false,
                defaultTab: "li#usernav",
                panelContext: $jq('#content'),
                tabActiveClass: "navbuttons-active",
                tabsClass: "navbuttons-tabs-container",
                tabClass: "navbuttons-tab",
                transitionIn: "fadeIn",
                transitionInEasing: "swing",
                transitionOut: "fadeOut",
                transitionOutEasing: "swing",
                updateHash: true
            })

jQuery 2.0.2 Firefox 23

Aug 11 '13 20:08 DaAwesomeP

I'm not sure what this could be. Easytabs has a publicMethods attribute which holds the public methods, and the error seems to say that it isn't there. Try using the non-minified version to see if you can do any more debugging.

Aug 12 '13 13:08 JangoSteve

I tried enabling Strict Warnings in Firebug, but I still couldn't get the error. When I switched to the non-minfied version, I noticed I had commented out lines 700 through 702 because the error was breaking other scripts. The error console now says:

Error: TypeError: plugin.publicMethods is undefined
Source File: jquery.easytabs-3.2.0.js
Line: 700

Aug 12 '13 15:08 DaAwesomeP

I re-uploaded the easytabs library to my server and now I'm getting this:

Firefox:

Error: TypeError: plugin.publicMethods is undefined
Source File: jquery.easytabs-3.2.0.js
Line: 698

Chrome:

Uncaught TypeError: Cannot read property '#<Object>' of undefined [VM] jquery.easytabs-3.2.0.js (1116):698

Firebug:

TypeError: plugin.publicMethods is undefined
jquery.easytabs-3.2.0.js
Line 698

It's obviously line 698. What could be causing it not to recognize publicMethods? Could it be another jQuery plugin? Another script? There are no parse errors. What else can I try?

Sep 02 '13 02:09 DaAwesomeP

That is super weird. After the page loads, open the console and try something like

console.log($('#navbuttons').data('easytabs'));

and see what it says. I haven't done any testing yet with jQuery 2.0. I'm wondering if maybe it returns something other than undefined for data attributes that don't exist (like null or something like that). If that's the case, then the if (undefined === plugin) might be equating to false and thus easytabs is never being initialized and attached to the element.

Sep 05 '13 17:09 JangoSteve

I tried switching to jQuery 1.10.2, but that didn't change anything. However, I tried console.log($('#navbuttons').data('easytabs')); on both versions and I got: TypeError: $ is not a function. I think the error stops jQuery from working correctly, as no other scripts on the page work. Also, this error only appears on pages where Easytabs is called.

Sep 05 '13 20:09 DaAwesomeP

Instead of calling $('#navbuttons').easytabs(), try this:

var el = $('#navbuttons');
var plugin = new $.easytabs(el.get(0));
el.data('easytabs', plugin);

And then try:

console.log($('#navbuttons').data('easytabs'));

Sep 05 '13 20:09 JangoSteve

Oops! I forgot that I am using no conflict with jQuery! When I put in:

console.log($jq('#navbuttons').data('easytabs'));

I get:

undefined
true

I tried using jQuery("#navbuttons").easytabs but that didn't change anything. I wasn't able to try your most recent suggestion because not specifying the options and event hooks would cause errors on the page anyways. I also tried not loading Modernizr, jQuery Mask, and SWFObject, but that didn't change anything. jQuery UI and jQuery Hashchange are vital.

I could not test turning off the conflicts because it would break anything and everything jQuery on the page, but does the easytabs library use the $ function or jQuery? That would definitely be the problem. What's odd is that it was working fine for a while and then stopped.

Sep 05 '13 23:09 DaAwesomeP

No, the library uses jQuery, there's not problem using it with noconflict mode.

Can you explain what you mean by "not specifying the options and event hooks would cause errors on the page anyways"? The intention was to instantiate easytabs while bypassing the code that causes the errors so that you could see the value of data('easytabs'), since you said before that instantiating easytabs the normal way caused all the javascript to break.

Anyway, it looks like you got the console log to work. But that true isn't right. The value should be an object (the instance of easytabs to be exact). I have no idea how it'd be true. Line 694 is the line that sets the value.

Also, how exactly did you call the console.log? I see you have undefined and then true, but if you only called it once, you should only get one value back.

Sep 06 '13 00:09 JangoSteve

I have various scripts that run before, during, and after ajax load. I also have specific class names and I have once script relies on the hash-change of the tabs.

Here is what I have done in the Firefox Inspector: screenclip_easytabsconsole Note: div#navbuttons contains ul.tab-container.

Sep 06 '13 02:09 DaAwesomeP

Oh, I see, you're calling console.log in the inspector console, so that first value is just the return value of the console.log statement.

OK, so true is what it's returning, and that's definitely wrong. It should be an object. For instance, opening the easytabs docs page and calling that on the first example from the Firefox console looks like this:

screen shot 2013-09-06 at 1 00 48 pm

Of course, in the console, we don't need to call console.log, we could just directly type $jq('.tab-container').data('easytabs').

Though if you have multiple instances on the page with the same selector, maybe that's why it's returning true instead of the object. If that's the case, try this from the console instead:

$jq('.tab-container').first().data('easytabs')

And see what that returns.

Sep 06 '13 17:09 JangoSteve

No, that doesn't make any sense because I don't have multiple instances. Here it is anyways: screenclip_easytabs2

Sep 06 '13 22:09 DaAwesomeP

Oh okay, I thought you were saying you had multiple instances on the page.

I have to say, I'm totally stumped. I have no idea why it would have true stored on its easytabs data key instead of the easytabs instance object. That's just bizarre. Is your page using the HTML5 doctype? Though I wouldn't think that would matter since it's using jquery's data feature.

Sep 07 '13 15:09 JangoSteve

Actually, I am using the HTML5 Doctype. I really prefer HTNL5 over the old HTML4. What's odd is that this just randomly started happening.

Sep 07 '13 17:09 DaAwesomeP

Can you maybe list all the JS libraries that are being loaded on that page? All I can think is that some library is messing with jquery's data function or even patching JS Object's prototype (a big no-no).

Sep 07 '13 17:09 JangoSteve

It's a lot:

jQuery 2.0.3
jQuery Mask 0.9.0
jQuery Hashchange 1.3
jQuery Easytabs 3.2.0
jQuery UI 10.0.3
Modernizr 2.6.2
SWFObject 2.2

I just tried running it with only jQuery, Hashchange, Easytabs, and UI, but I still got this:

Sep 08 '13 04:09 DaAwesomeP

Same problem here, tested jQuery 1.7, 1.8 and 1.9 all same problem. Also using HTML5 doctype but that shouldn't be the problem as the demo website is also using it. Tried disabling other plugins but with no success. My hrefs are matching the ids of the panels, even when i just literally copy the demo HTML it is not working.

Oct 08 '13 09:10 boyke

I wonder if it's jQuery UI causing the issues. Can you try without that? Also, what browser(s) is this?

Oct 08 '13 15:10 JangoSteve

Same error here. I've tried disabling jQuery UI, bootstrap.js, and all other JS except jquery.js... no luck :( Using jQuery 1.10.2.

However, I found that the error disappeared if I removed data-easytabs="true" from the containing div. That was markup I had incorrectly copied over from the examples, and it was causing the error.