jQuery UI problems since 3.5.1

WordPress 3.5.1 landed about 3 weeks ago, since then I have had several emails, direct messages and contact requests for fixing different site-related issues, such as:

  • I cannot drag widgets on my Widgets page
  • My TinyMCE is not displaying on the Posts page
  • My theme/plugin dialogs are broken
  • My X functionality (say slider) behaves in a weird way

And so on. Usually, using a smart browser (such as Chrome or Firefox) you are able to open the JavaScript console and get a warning related to JavaScript – either a jquery-ui related file, or tinymce.php related one, or js.php and something leading to some inconvenience. My first report was related to:

….has no method ‘curCSS’ – jquery-ui.js

Running through the Google results, I hit the jQuery bug tracker and the red light directed me to the ‘version incompatibility’ direction. Browsing two broken sites at the same time and running through their code, they were both deregistering either jquery (ugh!) or jquery-ui (nevertheless ugh).

Now, one has no apology for deregister/dequeue jQuery. However, few major versions back (about a year ago) the wp-includes/js directory had a different structure, some new UI scripts have been added, not to mention that jQuery UI is really decomposed for performance reasons – however, nothing helpful for newbie JavaScript developers.

There is a jQuery UI version that includes all the fancy stuff in one script file – the core script, dialogs, numerous effects, pregressbar, datepicker, autocomplete, accordion, tabs… This is not the case in core, for performance reasons mostly:

jquery-ui-core

Theme developers and other innocent people are unaware of what is needed for them to run their proper say slider and try to deregister all the weird core stuff and include their own online/local jQuery UI version. However, version numbers are incrementing with time, so are the deprecated functions and the incompatibility between jQuery and jQuery UI. At the end you end up with a broken site (sometimes the entire frontend goes nuts, blank page only)  due to this.

In addition to that more articles on the proper jQuery UI usage in WordPress in both the WordPress.org forums and StackOverflow/StackExchange are related to including a remote version of the script from a CDN or a local copy of the full jQuery UI. I won’t even link to them as they are just not right.

The wp_enqueue_script function has a clear guide for including jquery-ui related scripts, this is:

[php]

wp_enqueue_script(‘jquery-ui-core’);

[/php]

for core, and additionally you might add extra components such as ‘jquery-ui-dialog’. This would keep it consistent for your core – the WordPress architecture is already relying on tons of UI JavaScript and playing with old versions is increasing the chance for a conflict.

Don’t dequeue or deregister jquery OR jquery-ui. It’s been pretty critical for the past 3 weeks for too many sites following directions online and it won’t get different with time.

2 thoughts on “jQuery UI problems since 3.5.1”

  1. Kaiser says: February 12, 2013 at 1:39 pm

    If you really encounter an answer on WordPress.StackExchange then it slipped under our radar. Please log in, downvote, flag, send me a mail. And we will immediately try to get rid of it, leave a note or edit the answer. Thanks.

  2. Mario Peshev says: February 12, 2013 at 1:44 pm

    Most responses such as this one come with a valid description and a good idea, but still a very bad practice (this one is even playing with the integrated jQuery).

Leave a Reply

Your email address will not be published. Required fields are marked *