jQuery tabs is loaded but not working in WordPress

Question

I am trying to work with jQuery UI tabs in WordPress but I keep getting the "jQuery("#").tabs is not a function" error.

I thought the tabs file might not be loading but looking in firebug it shows it is loading. I am also using modernizr so I thought there might be a conflict with that but using jQuery.noConflict(); did not solve the problem either. At first I used to load jQuery but for some reason it wouldn't work. Now I just linking directly to the files and they are loading.

If it helps, I am trying to get tabs working for this tutorial. The website I working on is lbk.newcoastmedia.com/wordpress

Thanks for any help!

brymck · Accepted Answer · 2011-06-08 17:02:35Z

1

I see the following scripts being loaded on your page:

modernizr-1.6.min.js
l10n.js
jquery.js
galleria.js

and

<script type="text/javascript"> 
jQuery(document).ready(function($){
    $("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);
});
</script>

$.tabs is an extension of jQuery UI, and I don't see jQuery UI or the tabs extension loaded on your page. Look at the very bottom of the source at your link and you'll see the following two scripts, which I believe are what you're missing.

ui.core.js
ui.tabs.js

Your debugger is alerting you that $.tabs is not a method because it really hasn't been defined yet.

answered Jun 8, 2011 at 17:02

brymck

7,66330 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user715564 Over a year ago

Are you sure they aren't loading? Here is a screenshot showing what I get when viewing firebug i.imgur.com/pzU7G.png

brymck Over a year ago

Oh, so they're being loaded dynamically then. You're right; I see them in Chrome Console, too. I'm going to see if everything's loading in the right order -- jQuery, jQuery UI, jQuery UI widgets, jQuery UI tabs, $(document).ready() -- so I'm thinking the issue is either there or the fact that jQuery's loading twice, once as v1.4.4 and once as v1.6.1.

brymck Over a year ago

Actually, I think you can just solve it by calling jQuery.noConflict() or using $.ui.tabs()

user715564 Over a year ago

Well I already tried noConflict and that didn't work. The thing is, the tutorial is set up as a wp theme. If I install that theme it works just fine but when I copy the code over to my theme it breaks.

Pete · Accepted Answer · 2011-07-24 05:35:02Z

1

Just had this problem on Drupal and resolved it by downloading a custom build of the jQuery UI library WITH Tabs selected. Apparently the default jQuery UI library that shipped with Drupal didn't have this module, so perhaps this is also the case with WP.

answered Jul 24, 2011 at 5:35

Pete

111 bronze badge

Collectives™ on Stack Overflow

jQuery tabs is loaded but not working in WordPress

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related