Finding and Correcting jQuery Version Conflicts

I recently ran into an issue with some new client-side code I'd developed. While everything worked correctly in the dev environment, upon deployment to the test environment I found that some of the jQuery functions were no longer being recognized.

Going to the Console tab in Firebug, and entering "$().jquery" into the command prompt at the bottom, revealed the culprit: for some reason, despite my reference to jQuery 1.7.1, the page was now referencing version 1.4.2. The reason why was a part of the build process that occurs in our test environment and not our dev environment, which adds a reference to a minified 1.4.2 when built for the test environment (the pitfalls of differences between dev and test environments being a discussion for another time).

One possible solution to correct this was to simply update the version of jQuery being used to 1.7.1, but there was understandable concern that doing so would impact (read: break) things. So I needed a safer solution. The one I chose makes use of the jQuery noConflict() method:

            if ($().jquery != '1.7.1')
            {
                var $jQuery = jQuery.noConflict(true); 
                jQuery = $jQuery; 
            }

What this code is doing is first checking the jQuery version number. If it's not 1.7.1, I'm using the noConflict() method to remove the last loaded jQuery reference, leaving me with just the one I intended, 1.7.1.

You can read more about the noConflict() method here.

Comments

Popular posts from this blog

A Generic Method Using HttpClient to Make a Synchronous Get Request

The Cause and Solution for the "System.Runtime.Serialization.InvalidDataContractException: Type 'System.Threading.Tasks.Task`1[YourTypeHere]' cannot be serialized." Exception

How To Mock Out Child Components In Unit Tests of Angular 2 Code