A couple of days ago, right after I made some important changes to a couple of blogs I managed, I stumbled upon a mysterious problem: my administration panel could no longer load some of the asynchronous dynamic content it had, such as the Jetpack's daily page visits & hits dashboard widget.
Instead of the expected bar chart, all I could see there was an endless loading wheel:
By looking at the console log I was immediately able to see the reason:
admin-script.js?ver=1.0.0:17
Uncaught TypeError: jQuery(...).typeWatch is not a function
The Issue
Apparently, among the many different tasks that I performed there was one that removed the reference to the jquery.typewatch plugin (which, for the record, monitors the user keyboard activity within text fields) despite it being still required by the WordPress admin panel. Unfortunately, even after a reasonable amount of time spent trying to understand the reasons for the problem, I could not get a clue about that.
The Workaround
Eventually, I'll be able to spend the required amount of time to restore a working backup of the site and backtrace the issue. Until then, I applied a workaround that allowed me to temporarily fix the problem. I just added a custom function to the functions.php file of my WordPress theme, which internally invokes the native wp_enqueue_script function to add a custom JavaScript resource to the requested page. In order to make this resource available throughout all the admin panel's pages, I linked it as an event handler of the admin_enqueue_scripts Wordpress hook in the following way:
|
1 2 3 4 5 6 7 |
/* 2017.10.25 - Added to fix the jquery.typeWatch bug in Admin pages */ function fix_typewatch_bug( $hook ) { wp_enqueue_script( 'jquery_typewatch', 'https://cdnjs.cloudflare.com/ajax/libs/TypeWatch/3.0.0/jquery.typewatch.min.js'); } add_action('admin_enqueue_scripts', 'fix_typewatch_bug'); |
By adding these code lines to the functions.php file, the jquery.typewatch plugin will be loaded within any admin panel's page: thanks to that, I managed to get rid of the problem. If you do not know how to edit the functions.php file, just go to Appearance> Editor from the WordPress Admin Panel: if you are using a child theme, what is highly recommended if you are making changes to your topic, I recommend you take a look at this other post for more useful instructions.
Adding CSS files
Although not strictly related to the above problem, it may be useful to know that the same technique as above can also be used to add CSS files. Just use the wp_enqueue_style function in addition to or in place of the wp_enqueue_script function, as follows:
|
1 2 3 4 5 6 7 |
/* 2017.10.25 - Added to fix the jquery.typeWatch bug in Admin pages */ function add_custom_css_file( $hook ) { wp_enqueue_style( 'your_custom_css_file', 'https://yoursite.com/your_custom_css_file.css'); } add_action('admin_enqueue_scripts', 'add_custom_css_file'); |
Adding JS and/or CSS file in all WordPress pages
For those who don't want to just add these resource files in the admin panel's pages, the admin_enqueue_scripts hook can be replaced with the generic wp_enqueue_scripts hook, which gets fired during the rendering of all WordPress pages:
|
1 2 3 4 5 6 7 |
/* 2017.10.25 - Added to fix the jquery.typeWatch bug in Admin pages */ function add_custom_css_file( $hook ) { wp_enqueue_style( 'your_custom_css_file', 'https://yoursite.com/your_custom_css_file.css'); } add_action('wp_enqueue_scripts', 'add_custom_css_file'); |
That's it for now: happy coding!
