Posted on

WordPress 4.5 Breaking JavaScript (aka Where Is My Map?)

Ever since WordPress 4.5 rolled off the press there have been numerous complaints about websites breaking.   Numerous reports are coming into our Store Locator Plus forums and support email telling us “our map broke when they updated our website”.  The problem?  jQuery. To be more specific the problem is not jQuery but  how some plugins and themes implement jQuery in WordPress.

WordPress 4.5 started shipping jQuery version 1.12.3 as the “official” version of jQuery being used  with WordPress core. jQuery 1.12 has more stringent controls than previous versions.   The most obvious, jQuery 1.12 no longer “hides” some of the syntax errors that lay dormant in plugin code.   If there is malformed  or incorrect syntax, jQuery 1.12 will complain.  Your browser will most likely stop executing ALL scripts from that point forward.  As you can imagine, this causes things, like themes and plugins  to break.

Another frequent issue  that complicates matters ;  some plugins  and/or themes force load older versions of jQuery.    This can cause plugins that utilize newer feature of jQuery to break which, as noted above, stops all scripts from executing at that point. That includes your map.

Store Locator Plus  follows WordPress best practices and uses the version of jQuery bundled with the current WordPress.   Whenever WordPress announces a beta releas and major version changes, we develop and test and update to the newer version. Responsible developers keep current and operate with the platform provided.   You can read Pippin’s article about why  updating to the most  current version is a good idea or, to be more accurate, why “Loading Your Own Version Of jQuery Is Irresponsible“.

jQuery Problem Manifestation

The problem with WordPress 4.5 isn’t that it uses jQuery 1.12.3.  The problem is that older versions of jQuery allowed poorly written, malformed, or just plain broken JavaScript to “hide”.   In the ever-increasing effort to close security holes and tighten up the running environment of JavaScript,  version 1.12.3 is more apt to stop running ALL scripts and report an error if something is wrong.    One manifestation is the oft-cited a[href*=#] error message; you can learn more about the jQuery issue and this error on the WordPress 4.5 jQuery support thread.

In cases where a plugin is forcing a specific version of jQuery, some plugins will expect to see jQuery version 1.12 and utilize newer API calls that did not exist in the older release.    Store Locator Plus, for example, prefers to have at least version 1.7 of jQuery so it can utilize the Callback method to extend functionality of the base plugin.   Store Locator Plus 4.4 does check that the Callback method exists.  If not , it still runs but you won’t get the extra features of some add ons.    However , many plugins are not written that way and DO NOT check that a newer jQuery API function exists before it can be used .   When you have any other installed  plugin “downgrade” to a lower version of  jQuery those “other” plugins break  and the domino effect continues.

When plugins break Store Locator Plus can appear to be  the culprit.  Store Locator Plus uses the  display engine for retrieving your list of locations and  rendering those locations on a map.  The entire process, like Google Maps itself, is VERY JavaScript dependent.   Since most web browsers will, by default, stop running all scripts on a page when one script crashes, the problem becomes visible to you immediately since  your Map can’t load without running JavasScripts.   To add a bit more complexity  to the mix, many JavaScript apps are running in asynchronous mode which means they can execute and return results in any order.   That means when ANY script breaks, even if it is not the locator script, you SEE it on the map page because locations don’t show up or the map doesn’t render at all.

Checking JavaScript Errors

The fastest way to check your site for JavaScript errors is to use your web browser developer tools.  All modern browsers have this feature including Firefox, Safari, Chrome, and IE.    It is usually in a pull down or sidebar in the browser menu.  Just right click on the developer tool and check the console tab.   The “web console” in Firefox is where you will see any JavaScript errors that are happening on your web page.  Ditto with Google Chrome.  Often you will need to have the developer console open and reload the page to see any errors.

Sometimes the errors will not be directly in the page-loaded scripts but in the data coming back from an AJAX call or remote server.   If your console logs are clean you may want to check the network tab and see if any of the external resources are not loading.  In most browsers any page elements that have issues will be shown in red text.     You may also want to check the web console to ensure that console logging is not being disabled.  Many JavaScript apps turn off console logging to hide their internal debug tracing, (no idea why, perhaps they are trying to bury poorly written scripts)  but this can also hide errors in all of the other scripts that are running.

You can see some Firefox debugging sessions on my Troubleshooting playlist:

 

Checking jQuery Versions

WordPress can load a different version of jQuery on the user interface and admin panels.   This can, and usually does, break core components of the WordPress admin interface if you try to  rollback  jQuery to versions from  3 or 4 years. ago.   As a result, WordPress 4.5 specifically tries to prevent any plugin from de-registering jQuery and loading their own version in the admin interface.    The user interface is a different story and many plugins run hog-wild just changing the jQuery version on a whim.   What is running on your UI may be very outdated.

You can find what version of  jQuery is loading on your site by going to a page that you know is loading jQuery,  for example, the page where your Store Locator Plus map resides, and using your browser’s developer tools to view the header of jquery.js or jquery.min.js that is loaded.   In Firefox you can find this in the Developer / Debugger console where you should find one of those two scripts listed in the side panel.  Clicking on the jQuery script file should show a header that displays the version even if minimized.   As of WordPress 4.5 is should read version 1.12.3.   Anything less, such as 1.2 or 1.8 is going to be trouble.

Firefox Developer Debbugging jQuery version 1.12.3. This is what the header should look like for a normal WP 4.5 jQuery install.
Firefox Developer Debbugging jQuery version 1.12.3. This is what the header should look like for a normal WP 4.5 jQuery install.

 

Firefox Dev jQuery 1_8
This is what the debugger shows when an installed plugin is not playing nice with others. In this case forcing an outdated version 1.8 of jQuery.

Resolving The Issue

Find the plugin or theme component that is forcing a non-standard version of jQuery or that has malformed syntax that crashes with jQuery 1.12.

Store Locator Plus 4.5 will be shipping with a tool that records the loaded version of jQuery on the user interface.   After visiting the page that is rendering your locations map you will be able to go to the SLP General / User Interface tab and get a report of which version of jQuery is loading on the UI.   You can also find this information by using the browser developer tools and looking at the slplus JavaScript variable under the environment section.  If the version is NOT the one that ships with WordPress Core, and ESPECIALLY if it is an older version, you should fix it.

If a plugin is loading an outdated version of jQuery, ask the author to follow WordPress best practices and load the version of jQuery that ships with the plugin.    In 99.9% of these cases it is not because they actually NEED a feature built into that version of jQuery but it is a matter of time and effort to update their code to run in the newer version.    Personally,  I’ve yet to find something that could be done in an older version of ANY language or API library that couldn’t be done in the newer version.    jQuery included.

If the script from a plugin is crashing due to bad syntax or other errors that jQuery is no longer catching or hiding , check with the plugin or theme author and see if they have a WordPress 4.5 compatible version available.  Check the list in the next section and get an updated version.  If it is a premium plugin or theme you may need to pay the authors for the 4.5 compatible update.

Plugins And Themes With Issues

From: https://wordpress.org/support/topic/read-this-first-wordpress-45-master-list?replies=7

Issues with Plugins

  • Visual Composer – Please upgrade to 4.11.2+. The compatibility issue was fixed in Version 4.11 on March 10th: https://wpbakery.atlassian.net/wiki/display/VC/Release+Notes
  • Custom Facebook Feeds – Breaks JavaScript rendering. Fixed in 2.4.1.1
  • Jetpack – Please make sure you’re connected to Jetpack if you use Photon. Not being connected will cause your images to not display. (nb – this is not a Jetpack or 4.5 bug, just something people are noticing right now)
  • XpertAccordian – A premium plugin. It’s not working with the editor due to Javascript updates.
  • a3-lazy-load – Causing images not to show
  • HeadSpace2 – jQuery 1.12 problems as outlined below
  • Beaver Builder – Some reports of CSS issues causing media libraries to not work. More info here: https://wordpress.org/support/topic/wp45-jquery-update-and-table-styles-issue
  • Video List Manager – enqueues version 1.8 of jQuery

Issues with Themes

  • Divi
    Divi Version 2.7.3 ( updated 04-13-2016 ) fixes the jQuery issue outlined below. Update your theme.Exhibits the jQuery problem as described below. The file js/custom.js has the issue on line 706. Adding double quote marks around the hash symbols (#) will fix it.
    Change this:
    $( 'a[href*=#]:not([href=#])' ).click( function() {
    To this:
    $( 'a[href*="#"]:not([href="#"])' ).click( function() {
    Alternatively, check with your theme vendor for an update.
  • Other Themes on Themeforest – Lots of themes from Themeforest are exhibiting this issue. If you have a theme from there, please contact your theme author for an update to fix any instances of the jQuery problem as listed below.
    • List of known Themeforest themes with the problem:
    • Exhibit
    • TheFox