jQuery.easing[jQuery.easing.def] is not a function

HTML5 approves bitcoin: protocol. Chromium ready to use it.
May 2, 2013
Show all

jQuery.easing[jQuery.easing.def] is not a function

This little conflict error drove me mad for quite a little bit.

I run several websites, some personal, some for clients, quite a few of them run on WordPress. Its quick, it’s easy, and its fairly secure if configured properly. Even better, its updated and patched often, and has a whole bunch of free plugins that allow you to extend functionality easily. With all this freedom often comes a price. I paid such a price recently when I ran into a problem post WordPress 3.5 to 3.6 upgrade on one of my client’s sites. I always test updates in development environment so the actual client’s website was not affected, however I did spend a considerable amount of time chasing this down. The error was with jQuery and its helper files. It prevented a lot of the nice flashy JavaScript functionality that most clients like. Namely the issue was with anything that involved easing.

Fire Bug and Chrome Consoles were reporting the following:

jQuery.easing[jQuery.easing.def] is not a function
I went searching for what could be causing this. After a little bit of digging I was able to determine that after the DOM is fully loaded there is a plugin that’s dynamically appending an older version of jQuery to the end of the head section of the site. This explains the jQuery.easing.def not being a function.

To fix this issue I had to dig deep into the bowels of WordPress and de-register old versions of jQquery and add the most current version. I created a quick and dirty plugin that allows me to easily update the version of jQuery being added in the future. Here’s what I did:

  1. Create the plugin directories:
    • /wp-content/plugins/latest_jquery
    • /wp-content/plugins/latest_jquery/js
  2. Create the main plugin php file:
    • /wp-content/plugins/latest_jquery.php
  3. Add the main plugin code into /wp-content/plugins/latest_jquery.php:
  4. /*
    Plugin Name: Latest jQuery
    Plugin URI: http://www.andretimokhin.com
    Description: This plugin updates jQuery to the latest version.
    Version: 1
    Author: Andre Timokhin
    Author URI: http://www.andretimokhin.com/
    License: GPL3
    */
    
    function latest_jquery_update() {
    		//Remove any already registered jquery libraries
    		wp_deregister_script('jquery'); 
    		//Enqueue our own version of jQuery located in /wp-content/plugins/latest_jquery/js/*
    		wp_enqueue_script('jquery', plugins_url('/js/jquery-2.0.3.min.js', __FILE__), false, '2.0.3');	
    		// Also load the migrate library plugin
    		wp_enqueue_script('jquery-migrate', plugins_url('/js/jquery-migrate-1.2.1.min.js', __FILE__), array('jquery'), '1.2.1'); // require jquery, as loaded above	
    }
    
    add_action('wp_enqueue_scripts', 'latest_jquery_update');
    
  5. Add latest jQuery to /wp-content/plugins/latest_jquery/js/ folder. In my case I’m currently using 2.0.3
  6. Add latest jQuery Migrate plugin to /wp-content/plugins/latest_jquery/js/ folder. In my case I’m currently using 1.2.1
  7. Activate the plugin and enjoy restored jQuery functionality.


Hope this helps someone save a bunch of diagnosing time.

Leave a Reply

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