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!

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