WP 3.2 Thickbox & JQuery-UI-Tabs Conflict

Thanks for the screen cast max. I just did a completely fresh local install of WP 3.2, with a clean db, and went straight into Twenty Eleven and added your code above just inside the opening php tag in functions.php.

The post editor still does not work on my clean install, and viewing source shows the jQuery 1.4.4 library. Removing the functions.php code everything reverts and works as it should.

Can you try it in Twenty Eleven (clean install if possible) to see if you get the same results? Just am curious now, as to why jQuery 1.4.4 won’t work on the posts editor page on my local test install!

David, I confirm the issue with the 2011 Theme. I messed with it for a bit and this solutions seem to be working:

add_action("init", "_dequeue_utils");
add_action("wp_head", "_rollback_jquery_1_4_4");
function _dequeue_utils(){
	wp_dequeue_script("utils");
}
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);
  wp_enqueue_script("jquery");
  wp_enqueue_script("utils");
}

@scott and @david – I think I found the fix for the Thickbox issue:

Edit the thickbox.js (/wp-includes/js/thickbox/)
Comment out the line #278, this way you’ll have the original code in case you need to rollback. Then paste this line just below it:

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

I substituted trigger(“unload”) method with unload(“#TB_ajaxContent”). Make sure you clear your browsers cache (I had a trouble doing that in Google Chrome) – I tried different browsers, different sessions and it works for me. Let me know if it works for you guys. Thanks!

P.S. Don’t forget to invoke the default jQuery libraries that come with WP 3.2) – meaning remove the rollback to jQ 1.4.4 code that I shared earlier if you still use it.

That works, thanks! Although it is no tangible use unless it can be used without touching core files as this needs to work in our themes. So here is what I did.

Method #1 (failed):
1. I copied the thickbox.js file into my theme and made the necessary changes to that file rather than the core file.
2. Tried to deregister the default thickbox script, and regsiter my custom version.
3. Although my custom version was loading when I viewed source, it was obvious that thickbox is not as easy to simple deregister/register (as ‘jquery’ is).

Method #2 (success):
1. Instead of copying the whole thickbox.js file, I just created a new .js file and overrode the tb_remove() function.
2. This wasn’t working either until I realised that I needed to add ‘thickbox’ as a dependency!
3. After that it worked fine. We can now use the jQuery UI tabs included in WordPress 3.2 on the “Post” editor. After a user has inserted an image into the post via the thickbox window the tabs still work. Yay!

Thanks again Max! ??

For anyone else running into this conflict with thickbox and the updated WordPress jQuery/jQuery UI you can implement Max’s solution without hacking the core, by just overriding the tb_remove() function.

Awesome! Thanks for testing it, David! I didn’t mean to overwrite the core, personally I would try any of the methods you described for production sites, but for a quick test and confirmation that it works I edited the core file ??

Is this issue (and fix) perhaps worth a bug report (and core-file patch) in Trac?

@chip – well, this was my initial question. I’m a noob when it comes to reporting WP bugs. Would be nice to get one of the devs over here and let him/her decide.

@maxchirkov: well, let’s ping the devs, and see what they think!

@david Gwyer: I tried modifying that line and it works. but i don’t know how to add ‘thickbox’ as a dependency. Could you please help me with some lines of code ?

Just add dependencies onto the end of the wp_enqueue_script() function as an array of handles.

So for instance my code looks similar to:

wp_register_script( 'custom_tb', 'https://mysite.com/custom_tb.js', array('thickbox') );
wp_enqueue_script( 'custom_tb' );

Just update with the correct path to your JS.

See here for more details: https://codex.www.ads-software.com/Function_Reference/wp_enqueue_script

and if I’d want to use it for example in a file where I’d just write the script by hand <script> … </script> and I’d just want to add it there, do you know a way I could do that? Thank you for your answer

and if I’d want to use it for example in a file where I’d just write the script by hand <script> … </script> and I’d just want to add it there, do you know a way I could do that? Thank you for your answer

Save your file as my-script-name.js, and then register and enqueue my-script-name.js.

@david Gwyer: for some reason I can’t get it to work again… I had the script patched and I tried it the next day it doesn’t work 100%. If I have an inline content that is hidden and only opens up in a thickbox, when I click on the link second time, the thickbox shows up blank. So it basically works only once. Not sure if I overlooked something in the initial testing or I’m missing something now… can you confirm this working on your end?

Hey Max,

The patch still works for me, but the usage is slightly different? In our case the image uploader on the Post editor wasn’t working as soon as we added jQuery tabs in a meta box.

The patch solves this, and still works.

Not sure why yours should suddenly stop working. If this is for a front end page, I will test my end if you like, to see if get the same behavior.

Also, was there a trac ticket submitted for this? It might be worth doing as I don’t think this post has been checked out by any core developers (I’m assuming that as there are no follow-up comments).

@david: Yes, I’m having an issue on the front-end. And no, I haven’t submitted the trac issue… that was my original reason for coming here – just didn’t want to submit a bogus issue to already busy wp devs. Let’s test the front-end and then well have a clearer picture if our patch works as intended or not. Then you or I can submit the issue to trac.