Using jQuery Migrate plugin
By Marina Lohova
September 26, 2014
We all know these tricky situations, like introducing a new feature on top of old code, when it seems we’re about to step into a tedious swamp of workarounds and dirty hacks. Fortunately, jQuery Migrate plugin is here to make these situations easier, at least in JavaScript. So for any of you who wondered about a real-life example of using jQuery Migrate plugin I have one!
My task was to add an editable combomonster, oh sorry, combobox (even though editable comboboxes remind me of UX Frankenstein’s Monster, they are still requested a lot) to a rather old website built on jQuery v1.4.2.
I downloaded the most recent jQuery UI (at that time it was v1.10.4) and a very neat editable combobox component to go with it. It was expected that it wouldn’t work out of box with the rather outdated jQuery we had. It didn’t work and the page produced the following JavaScript error:
TypeError: t.cssHooks is undefined
...t(" ");f(i,function(e,i){t.cssHooks[i]={set:function(e,n){var a,o,r="";if("trans...
No problem, I grab the newer compatible jQuery v1.10.2 from the website and yield it into head in that particular page.
<% content_for :head do %>
javascript_include_tag "jquery-1.10.2.min.js"
javascript_include_tag "jquery-ui-1.10.4.min.js"
javascript_include_tag "jquery.editableselect.js"
<% end %>
There’s good news and bad news. Good - the old error is gone. Bad - there’s a new one:
TypeError: jQuery.browser is undefined
if (jQuery.browser.safari && document.readyState != "complete”)
function stretchbar(){
/* the if block is for safari 4, it was disrupting the display on refresh. */
if (jQuery.browser.safari && document.readyState != "complete")
{
setTimeout( arguments.callee, 100 );
return;
}
We have a lot of old components on that page and they fail to work with the new jQuery. Why? All versions of jQuery after v.1.9 are stripped of certain components that are not ‘core’ ones. jQuery offers a migration technique to restore deprecated and removed functionality using jQuery Migrate plugin so the older code could work. The plugin can be included with versions of jQuery as old as 1.6.4. However, the plugin is only required for version 1.9.0 or higher.
The section “Changes of Note in jQuery 1.9” explains the particular error I got. Finally, I downloaded jQuery Migrate plugin v1.2.1 (the most recent at the time) and put it after the script for jQuery:
<% content_for :head do %>
javascript_include_tag "jquery-1.10.2.min.js"
javascript_include_tag "jquery-ui-1.10.4.min.js"
javascript_include_tag "jquery.editableselect.js"
javascript_include_tag "jquery-migrate-1.2.1.min.js"
<% end %>
Voila! The website gets an instant design boost with this brand new, sleek grey editable combobox:
Comments