Error: d.publicMethods is undefined

[DaAwesomeP]

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

[JangoSteve]

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.

[DaAwesomeP]

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

[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?

[JangoSteve]

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.

[DaAwesomeP]

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.

[JangoSteve]

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

[DaAwesomeP]

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.

[JangoSteve]

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.

[DaAwesomeP]

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:

Note: div#navbuttons contains ul.tab-container.

[JangoSteve]

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:

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.

[DaAwesomeP]

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

[JangoSteve]

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.

[DaAwesomeP]

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.

[JangoSteve]

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

[DaAwesomeP]

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:

[boyke]

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.

[JangoSteve]

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

[nicolasconnault]

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.

[ecjaffe]

nicolasconnault's solution worked for me. Just remove data-easytabs="true"

[smarek]

@nicolasconnault I can confirm, this gets rid of error in console

[andrewvergel]

@nicolasconnault works!!

[aguerre]

@nicolasconnault you're my savior !

[PurohitAkki123]

@nicolasconnault solution worked for me. Just remove data-easytabs="true"
Thanks @nicolasconnault and ecjaffe