jQuery is a Javascript library which purpose is to make it much easier to use JavaScript on your website, OutSystems platform by default is using this library although it only supports officially two specific version (1.4.2 or 1.8.3). During the years jQuery launched new versions and these introduced some break and changes, or some functions were deprecated or renamed.

Although the majority of the plugins work with version 1.8.3 sometimes you may want to integrate a plugin which is only supported by a newer version (e.g. version 3.2.1)

The problem is when importing a recent jQuery version, this will compromise the OutSystems internal functionality (e.g: ajax refresh, UI Patterns) as the newer version has break and changes, so we can't simply overwrite the jQuery

How can I integrate a jQuery plugin for a recent jQuery version? 

Using jQuery function NoConflict() you can load the newer version and then restore the previous version of the jQuery. 

However, we can't simply add the library script using the action AddJavaScriptTag, we will need to import by appending to the body using the HTML <script>, once the recent library is loaded we can run the specific code which is depended on this new version and last we run the function NoConflict() to revert to OutSystems jQuery version 1.8.3.

1. Load recent jQuery library (e.g: version 3.2.1);
2. Run the code specific for this library;
3. Revert the global var $ to point out to platform jQuery version 1.8.3;

A quick test and you can check the library being swapped between both versions, before and after running the specific code for version 3.2.1

Attached you can find a code sample with a ready to use Webblock load the version 3.2.1 and run the specific code, or you can quickly check here.

If you have any question or other suggestion please fill free to share

Awesome!

Great Scott! Awesome!

Great explanation!

Great post, thanks for the share!

I used it for an inputmask using version 2.2.4 of JQuery. The thing I came across that after doing an ajax refresh the page would lose its JQuery reference. The noconflict reverts it back from version 1.8.3. Adding an input parameter that indicates if it is a ajax refresh or not, and depending on that parameter executing the noconflict solved the problem. 

I added the code.

Thanks again for this!