jQuery UI Tabs not working in Wordpress 4.4 and la

Question

In my Wordpress theme, I have a Theme Options page which is using jQuery UI tabs. These tabs perfectly works in Wordpress versions below 4.4. But they don't seem to work in the versions later than 4.4

It just don't give any error or anything. The other jQuery functions (such as jQuery color-picker, slider..etc.) in the options page are working fine. It's just the tabs which are broken.

In the console I get this message

Uncaught Error: jQuery UI Tabs: Mismatching fragment identifier.

It's from the jQuery.js file which is included in wp-include/js/jQuery folder

This is my code...

<div class="ui-tabs">
      <ul class="ui-tabs-nav">

       foreach ( $this->sections as $section_slug => $section )
         echo '<li><a href="#' . $section_slug . '">' . $section . '</a></li>';

      </ul>
</div>

<script type="text/javascript">
    jQuery(document).ready(function(jQuery) {
            var sections = [];';

            foreach ( $this->sections as $section_slug => $section )
                    echo "sections['$section'] = '$section_slug';";

            echo 'var wrapped = jQuery(".wrap h3").wrap("<div class=\"ui-tabs-panel\">");
            wrapped.each(function() {
                    jQuery(this).parent().append(jQuery(this).parent().nextUntil("div.ui-tabs-panel"));
            });
            jQuery(".ui-tabs-panel").each(function(index) {
                    jQuery(this).attr("id", sections[jQuery(this).children("h3").text()]);
                    if (index > 0)
                            jQuery(this).addClass("ui-tabs-hide");
            });
            jQuery(".ui-tabs").tabs({
                    fx: { opacity: "toggle", duration: "fast" }
            });

            jQuery("input[type=text], textarea").each(function() {
                    if (jQuery(this).val() == jQuery(this).attr("placeholder") || jQuery(this).val() == "")
                            jQuery(this).css("color", "#999");
            });

            jQuery("input[type=text], textarea").focus(function() {
                    if (jQuery(this).val() == jQuery(this).attr("placeholder") || jQuery(this).val() == "") {
                            jQuery(this).val("");
                            jQuery(this).css("color", "#000");
                    }
            }).blur(function() {
                    if (jQuery(this).val() == "" || jQuery(this).val() == jQuery(this).attr("placeholder")) {
                            jQuery(this).val(jQuery(this).attr("placeholder"));
                            jQuery(this).css("color", "#999");
                    }
            });

            jQuery(".wrap h3, .wrap table").show();

            // This will make the "warning" checkbox class really stand out when checked.
            // I use it here for the Reset checkbox.
            jQuery(".warning").change(function() {
                    if (jQuery(this).is(":checked"))
                            jQuery(this).parent().css("background", "#c00").css("color", "#fff").css("fontWeight", "bold");
                    else
                            jQuery(this).parent().css("background", "none").css("color", "inherit").css("fontWeight", "normal");
            });

            // Browser compatibility
            if (jQuery.browser.mozilla) 
                     jQuery("form").attr("autocomplete", "off");
    });
</script>

What's the reason for this odd behavior ? Is it something in my code ? But it works fine in older versions of WP. Any clue ?

Answer 1

Finally I figured the answer for my own question...

Actually, this error was because of WP's some core changes in the backend interface. They've changed the Backend headings structure So, your <h3> tag in WordPress 4.3, is no longer <h3> anymore in 4.4 and higher.

So, in the custom options page, in WP 4.3, the titles were rendered as <h2> tags. And, that titles were binded to my javascript code as .h2. So, that's where the error occurred.

That small error caused the entire JavaScript block to malfunction. So, jQuery tabs didn't work.

You can explore this with inspector. See the image below.

As you can see the Titles in Wordpress 4.3 were rendered as <h3> but in Wordpress 4.4, they're <h2>

So, what I did was just adjusting my JavaScript code to bind the Title as both .h2 and .h3

From this...

jQuery(this).children("h2").text();

To like this...

jQuery(this).children("h2, h3").text();

This did work for me. Your code may be different than mine. But, the cause for the problem can be it...

Hope this helps!