WP 3.2 Thickbox & JQuery-UI-Tabs Conflict

Not a bug. Looks like you forgot to add the class="thickbox" to your modal window link. I just tested it on a WP 3.2 install and it works flawlessly.

The full line should be:
<p><a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent" class="thickbox">Show hidden modal content.</a></p>

EDIT: also, the thickbox document says the you should add the &modal=true argument to the call, but this doesn’t seem to have an effect on anything.

@tollmanz – I appreciate you looking into this. The class got stripped by the comment editor because when I originally posted this issue, the code formatting didn’t get triggered and everything got treated as HTML. So I had to resubmit it.

The &modal=true has no affect in this particular case, from my experience it removes the title of the box and the closing X in the upper right corner. I guess it assumes that there will be a different action trigger within the content of the modal window (like an Ok button).

I made a quick screencast to showcase the issue. Please take a look https://screenr.com/Ns2s

Ok…I get the same result now. I didn’t fully understand the issue before.

I wonder if this is more of a thickbox or jquery UI problem. Does this work fine on WP 3.1 or 3.0? One thought I had was that this is an issue due to the updated jQuery version. I’ve been debugging those issues since 3.2 came out. In fact, I just recently fixed a thickbox bug in WP E-Commerce; however, the thickbox version was 2.1 and the current version is 3.1. With that said, I did just visually check thickbox and it looks like it’s selector are outdated, i.e.:

TB_TempArray = jQuery("a[rel="+imageGroup+"]").get();

instead of:

TB_TempArray = jQuery('a[rel="'+imageGroup+"']').get();

Not sure if this has anything to do with your issue, but it’s a place to look.

My production site is on 3.1.1 and everything works there just fine. WP 3.1.1 uses the same Thickbox 3.1 – the only difference I spotted is that WP 3.1.1 runs jquery-ui-tabs 1.8.9 and WP 3.2 – 1.8.12.

I think this issue began with WP 3.1.3 (I might be wrong though, but there are only 2 versions between 3.1.1 and 3.2).

Ok. Here is what I dug up so far:

1. The issue is somewhere in jQuery itself. The WP 3.1.1 is using jQuery 1.4.4 (while WP 3.2 – 1.6.1) – if you add these lines to the beginning of the _default_headScripts() function – the tabs and the thickbox will work just fine:

$jq = 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js';
  wp_deregister_script( 'jquery' );
  wp_register_script( 'jquery', $jq );

2. The hiccup happens on the closing of modal window within the thickbox.js in tb_remove() function. The exact line:

jQuery("#TB_window").fadeOut("fast",function(){jQuery('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});

and I think it’s the trigger("unload") method. If you simply open the modal window and then execute that line within the browsers’ console (Firebug or Chrome) without that method – the window goes away and the tabs continue to work. Although if you click on the link again, the modal window comes up blank without the content… so, removing that method doesn’t exactly help, but I think it can point to the issue within the jquery.js.

The next thing I would try is getting the most updated jQuery UI files and most updated jQuery files and see if that fixes anything. If not, I would suspect that it’s a Thickbox issue. While jQuery has been updated recently, Thickbox has not. I still wouldn’t consider this a WordPress bug. Perhaps it’s more of a Thickbox issue.

I tend to lean toward “it’s more of a Thickbox issue” since it hasn’t been updated and is no longer being maintained. But it is a WordPress issue since it’s using a deprecated library that is based on jQuery, but is not up to date. WordPress has to make a decision here and move onto something else, like jquery-ui-dialog, which is included into the core and supplies similar (to Thickbox) functionality.

I’m getting this same issue, anybody found a solution yet?

@scott – rolling back to jQuery 1.4.4 seem to be working. Upgrading to the latest versions of jQuery and jQ UI didn’t help.

Adding this to your theme’s function.php file should do it:

add_action("init", "_rollback_jquery_1_4_4");
function _rollback_jquery_1_4_4(){
  wp_deregister_script('jquery');
  $jquery = "https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js";
  wp_register_script('jquery', $jquery, '1.4.4');
}

This was the first thing I tried. Roll it back! Should work right?

I just tried your code in Twenty Eleven functions.php and for some reason on the post editor screen jQuery doesn’t seem to work. You can’t insert images etc.

Strange because everything seems to work on the page editor just not for posts. Do you get the same thing?

I forgot to enqueue the jquery after registering it. DUH! ?? Sorry, wrote the function without testing it (I have very similar in my own code). Just add this after the wp_register_script: wp_enqueue_script(‘jquery’);

The whole code should look like this:

add_action("init", "_rollback_jquery_1_4_4");
function _rollback_jquery_1_4_4(){
  wp_deregister_script('jquery');
  $jquery = "https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js";
  wp_register_script('jquery', $jquery, '1.4.4');
  wp_enqueue_script('jquery');
}

The jQuery 1.4.4 library ‘was’ being enqueued, even without explicitly adding the wp_enqueue_script() function.

Perhaps this is because WordPress automatically enqueues registered script handles such as ‘jquery’, whether you are leaving it pointing it at the built-in WordPress jQuery version or an external CDN version?

Anyway, because of this, even using your full code, the post editor uploader still won’t work (page editor works!) with jQuery 1.4.4.

We came across the bug(?) related to this thread title when we added the WordPress 3.2 version of jQuery tabs into a meta box on the post editor page. The uploader didn’t work, but worked fine on the page editor screen!

David, I’m testing the image uploader right now and it works fine on the “Post” editor pages for me.

That’s weird. If I switch themes to Twenty Eleven and add your code to the top of the functions.php file the uploader on the “Post” editor doesn’t operate.

As I said, our original problem was when we stuck with the 1.6.1 jQuery library and just added the jQuery UI tabs (included with WP 3.2) on the “Post” editor page. When we clicked to insert an image, and when the thickbox window closed, the tabs stopped working!

David, here is a demonstration of the rollback https://screenr.com/M02s which is working in my case. See if there is something that I’m missing…