WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] WP 3.2 Thickbox & JQuery-UI-Tabs Conflict (35 posts)

  1. Max Chirkov
    Member
    Posted 2 years ago #

    Tabs powered by JQuery-UI-Tabs library stop working after an inline thickbox effect is initiated. I ran into this with a few plugins, but then I decided to test it on a completely clean install with default 2011 theme and no plugins.

    Here is how to reproduce the issue:

    1. Load JS libraries by placing the following code into the functions.php of the theme

    add_action('init', '_default_headScripts');
    function _default_headScripts(){
      wp_enqueue_script('jquery');
      wp_enqueue_script('jquery-ui-widget');
      wp_enqueue_script('jquery-ui-tabs');
      wp_enqueue_script('thickbox');
      wp_enqueue_style('thickbox');
      $jq_ui_css = "http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery.ui.all.css";
      wp_enqueue_style( 'jquery_ui', $jq_ui_css, FALSE, false, false );
    }

    2. Create a new page and paste this code within the HTML view & publish (permalinks need to be activated):

    <script>
      jQuery(function() {
      jQuery( "#tabs" ).tabs();
      });
    </script>
    </p>
    <p>
    <div class="demo">
      <div id="tabs">
        </p>
        <ul>
          <li><a href="#tabs-1">Nunc tincidunt</a></li>
          <li><a href="#tabs-2">Proin dolor</a></li>
          <li><a href="#tabs-3">Aenean lacinia</a></li>
        </ul>
        <p>
        <div id="tabs-1">
          <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
          <p><a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent">Show hidden modal content.</a></p>
          <div id="hiddenModalContent" style="display: none">
            <p>Hidden content</p>
          </div>
        </div>
        <div id="tabs-2">
          <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
        </div>
        <div id="tabs-3">
          <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
          <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
        </div>
      </div>
    </div>
    <!-- End demo -->

    The demo code is taken from the official jquery ui site: http://jqueryui.com/demos/tabs/

    3. Navigate to the page. Click on each tab to see if the functionality works. Then navigate back to the first tab and click on the link at the bottom of the content. A modal window should popup. Close the window and try clicking on the tabs again. At this point they shouldn't work any longer.

    I believe this is a bug and should be submitted to the core Trac issues.

  2. Zack Tollman
    Member
    Posted 2 years ago #

    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.

  3. Max Chirkov
    Member
    Posted 2 years ago #

    @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 http://screenr.com/Ns2s

  4. Zack Tollman
    Member
    Posted 2 years ago #

    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.

  5. Max Chirkov
    Member
    Posted 2 years ago #

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

  6. Max Chirkov
    Member
    Posted 2 years ago #

    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 = 'http://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.

  7. Zack Tollman
    Member
    Posted 2 years ago #

    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.

  8. Max Chirkov
    Member
    Posted 2 years ago #

    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.

  9. Scott Bolinger
    Member
    Posted 2 years ago #

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

  10. Max Chirkov
    Member
    Posted 2 years ago #

    @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 = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js";
      wp_register_script('jquery', $jquery, '1.4.4');
    }
  11. David Gwyer
    Member
    Posted 2 years ago #

    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?

  12. Max Chirkov
    Member
    Posted 2 years ago #

    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 = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js";
      wp_register_script('jquery', $jquery, '1.4.4');
      wp_enqueue_script('jquery');
    }
  13. David Gwyer
    Member
    Posted 2 years ago #

    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!

  14. Max Chirkov
    Member
    Posted 2 years ago #

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

  15. David Gwyer
    Member
    Posted 2 years ago #

    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!

  16. Max Chirkov
    Member
    Posted 2 years ago #

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

  17. David Gwyer
    Member
    Posted 2 years ago #

    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!

  18. Max Chirkov
    Member
    Posted 2 years ago #

    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 = "http://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");
    }
  19. Max Chirkov
    Member
    Posted 2 years ago #

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

  20. David Gwyer
    Member
    Posted 2 years ago #

    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.

  21. Max Chirkov
    Member
    Posted 2 years ago #

    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 :)

  22. Chip Bennett
    Theme Review Admin
    Posted 2 years ago #

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

  23. Max Chirkov
    Member
    Posted 2 years ago #

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

  24. Chip Bennett
    Theme Review Admin
    Posted 2 years ago #

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

  25. za_io
    Member
    Posted 2 years ago #

    @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 ?

  26. David Gwyer
    Member
    Posted 2 years ago #

    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', 'http://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: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

  27. za_io
    Member
    Posted 2 years ago #

    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

  28. Chip Bennett
    Theme Review Admin
    Posted 2 years ago #

    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.

  29. Max Chirkov
    Member
    Posted 2 years ago #

    @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?

  30. David Gwyer
    Member
    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic