WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] WP 3.2 Thickbox & JQuery-UI-Tabs Conflict

[Resolved] WP 3.2 Thickbox & JQuery-UI-Tabs Conflict

  • Max Chirkov
    Participant

    @maxchirkov

    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.

Viewing 15 replies - 1 through 15 (of 34 total)
  • 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.

    Max Chirkov
    Participant

    @maxchirkov

    @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

    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.

    Max Chirkov
    Participant

    @maxchirkov

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

    Max Chirkov
    Participant

    @maxchirkov

    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.

    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.

    Max Chirkov
    Participant

    @maxchirkov

    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?

    Max Chirkov
    Participant

    @maxchirkov

    @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');
    }

    David Gwyer
    Participant

    @dgwyer

    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?

    Max Chirkov
    Participant

    @maxchirkov

    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');
    }

    David Gwyer
    Participant

    @dgwyer

    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!

    Max Chirkov
    Participant

    @maxchirkov

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

    David Gwyer
    Participant

    @dgwyer

    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!

    Max Chirkov
    Participant

    @maxchirkov

    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…

Viewing 15 replies - 1 through 15 (of 34 total)
  • The topic ‘[Resolved] WP 3.2 Thickbox & JQuery-UI-Tabs Conflict’ is closed to new replies.