WordPress core jQuery messes UI tabs

  • bojancg

    (@bojancg)


    8 years, 8 months ago

    Hello!

    I’m developing a WordPress based page, running X-Theme. On my page I have jQuery-UI tabs that are misbehaving badly on mobile devices. On desktop browsers I’ve noticed only one problem. Selecting a tab would scroll the page to the tab content. This problem was solved by:

    $('#tabs').click('tabsselect', function (event, ui) {
	$('html, body').stop();
});

    However, on mobile devices problems were:
    – tapping on active tab would still scroll to content
    – almost impossible to select another tab (I had to tap more times in order to find where on tab it accepts a touch)
    – tapping on disabled tab would scroll the page a bit (more like stutter)

    I thought there was a problem in my code so I tried to test it on a clean page, tabs only. Everything worked fine. I’ve tested all the logic for disable/enable tabs also, everything I’ve used in original code. Then it hits me that this new page is not made in WordPress and that I’ve loaded jQuery from Google’s CDN (jQuery UI as well).

    Then I decided to test original site in WP, but this time with jQuery from Google CDN. In my child theme functions.php I’ve removed original jQuery (used someone’s suggestion form stackoverflow, can’t remember which post):

    function load_jquery() {
    if ( ! is_admin() ) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', '', FALSE, '1.11.3');
        wp_enqueue_script('jquery');
    }
}
add_action('template_redirect', 'load_jquery');

    and loaded CDN version in my template:

    wp_register_script(
    'jquery-custom-core',
    '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js',
    false
);
wp_enqueue_script( 'jquery-custom-core' );

    Also had to register jquery-migrate.min.js. I’ve tested this on mobile and it worked! Tabs are behaving as expected.

    Now, my questions are:
    1. Why this happens with WP core jQuery (I did read somewhere that WP-jQuery has some changes compared to source jQuery)?
    2. What impact will my solution have on whole page (plugins, theme, etc.)? I can see that X-theme is loading 2 scripts that are dependent on jQuery before jQuery loads, but I will deal with this further if there is no other workaround for this topics problem.
    3. Is there a better way to solve this problem?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 8 months ago

    The problem is still ambiguous;

    On my page I have jQuery-UI tabs that are misbehaving badly on mobile devices. On desktop browsers I’ve noticed only one problem.

    By switching jQuery libraries, you haven’t found out what the original issue was.

    If you would like help to debug the issue, can you link us a working (or broken) example of it? If it’s a commercial theme then you may have to contact your theme’s vendors/ authors.

    Thread Starter bojancg

    (@bojancg)

    8 years, 8 months ago

    Unfortunately, I can’t link the page yet as my superior doesn’t allow me to do that. Would it help if I put here all code relevant to tabs and order in which scripts are loaded in the <head>?

    I am aware that problem could be somewhere else, but why would it work OK with original jQuery library and doesn’t work with WP’s one.

    I’ll try to post this problem on X-Theme’s support and see what they have to say.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 8 months ago

    Would it help if I put here all code relevant to tabs and order in which scripts are loaded in the <head>?

    Yes that would be great for others. I personally cannot debug a JS issue without seeing that issue on a webpage.

    I am aware that problem could be somewhere else, but why would it work OK with original jQuery library and doesn’t work with WP’s one.

    That is the interesting question and it would be great to see if there was actually an incompatibility with WP core 🙂

    Thread Starter bojancg

    (@bojancg)

    8 years, 8 months ago

    Thanks for your reply Andrew 🙂

    Here is all UI-tabs related code. If I find time, I’ll recreate this anomalies with some generic page, but with same WP version and theme. I’m posting here a version that works on mobile devices. That is, version with jQuery from Google’s CDN.

    Order in which scripts are loaded (I’ve filtered this due to many other scripts and styles):

    <head>
<!-- ... many styles ... -->
<link rel="stylesheet" id="jquery-ui-style-css" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css?ver=4.2.4" type="text/css" media="all">
<link rel="stylesheet" id="jquery-ui-style-structure-css" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.structure.min.css?ver=4.2.4" type="text/css" media="all">
<link rel="stylesheet" id="jquery-ui-style-theme-css" href="http://localhost/kreditni-kalkulator.hr/wp-content/themes/x-child/kreditni_kalkulator/new_jQuery-ui/jquery-ui.theme.min.css?ver=4.2.4" type="text/css" media="all">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=4.2.4"></script>
<script type="text/javascript" src="http://localhost/kreditni-kalkulator.hr/wp-content/themes/x-child/kreditni_kalkulator/js/jquery-migrate.min.js?ver=4.2.4"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js?ver=4.2.4">
<!-- ...some more stuff from WP, plugins and X-Theme... -->
</head>

    Markup for tabs…

    Initialization of tabs and rest of code relevant to tabs…

    I think logic of enabling/disabling specific tab by it self shouldn’t make any difference. But than again, I don’t consider myself an expert.
    Process of de-registering and new registering of jQuery library is as in first post.

    Should I put some more info?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 8 months ago

    To clarify, what bit of JS didn’t work in WordPress? You were saying the tabs worked but there was some misbehaviour on mobile?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 8 months ago

    Are you saying it’s this JS:

    $('#tabs').click('tabsselect', function (event, ui) {
	$('html, body').stop();
});

    That doesn’t work on WordPress core jQuery library?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 8 months ago

    This bit of code alone won’t work in WordPress:

    $('#tabs').click('tabsselect', function (event, ui) {
	$('html, body').stop();
});

    You need to use jQuery in no-conflict mode with WordPress. If that is the issue then you need to write this bit of code just before yours:

    $ = jQuery;

    Otherwise $ will always be undefined.
    https://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

    Thread Starter bojancg

    (@bojancg)

    8 years, 8 months ago

    You were saying the tabs worked but there was some misbehaviour on mobile?

    Yes, that is true. Out of the box they would scroll to the content of the tab when selecting a tab. Then I added the JS block you are referring to. It stopped scrolling, but only on desktop browsers. Scrolling continued on mobile, plus being unable to select enabled tab.

    P.S.
    Sorry, forgot to mention, I did define

    $ = jQuery;

    at top of my script.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘WordPress core jQuery messes UI tabs’ is closed to new replies.