[wp-hackers] How do you get jQuery tabs working in Wordpress 2.8?

[Gaarai]

I haven't run into your specific problem, but I believe that I know the 
cause. 2.8 has split the scripts into two groups: those that are added 
in the header and those that are added in the footer. jquery-ui-tabs is 
one of the many scripts that now loads in the footer. View the source, 
scroll to the bottom, and you'll see what I am talking about.

If you have any js code that relies on scripts that are loaded in the 
footer, you need to ensure that you wrap that code and tell it to not 
run until the document has fully loaded. This is easily done by wrapping 
the code in a jQuery(document).ready function. For example:

    jQuery(document).ready( function() {
        // Code that relies on scripts loaded in the footer.
    } );

One problem that I've already come across while doing this is that 
wrapping functions in that segment of code causes those functions to not 
be accessible to other js code that originates from outside that ready 
function. The solution I've created to work around this is to use an 
initializing function and use the ready function inside it. For example:

    function init_my_script() {
        jQuery(document).ready( function() {
            create_ui_tabs();
            update_my_links();
            // etc
        } );
    }

    function create_ui_tabs() {
        // Do stuff
    }

    function update_my_links() {
        // Do stuff
    }

    init_my_script();
      

This way you make your code run after all the scripts are loaded while 
also allowing the key functions to be accessible from other code.

If you want to find out which scripts are loaded in the footer, check 
out the wp-includes/script-loader.php file of the latest trunk. There is 
a comment above the wp_default_scripts function that indicates which 
ones are loaded in the footer. You'll find that most of the scripts are 
now loaded in the footer. So, I recommend creating all future js code 
(and updating old js code) to have init functions with contents wrapped 
in the ready function. If you don't do this, you'll find a great amount 
of your js causing fatal errors and crashing the js execution.

I hope that this helps you out Mark.

Chris Jean
http://gaarai.com/
http://wp-roadmap.com/



Mark Cunningham wrote:
> I've been doing some testing of my plugin on Wordpress 2.8 beta 2. I
> am using the Wordpress built-in jQuery and jQuery tabs to generate
> tabbed interface to my plugins options. But on the upgrade to 2.8, the
> tabs no longer work any more. I've checked documentation for jQuery
> tabs, and I don't appear to be doing anything wrong. Has anyone else
> got jQuery tabs working on Wordpress 2.8?
>
> Thanks
> Mark
>