Because of JQuery's popularity, it is necessary to have this guideline that helps you use JQuery safely, especially if its versions and extensions matter to your application.

The built-in SHARED module jquery

As in the counter portlet example, you can use the default "jquery" shared module. It is packaged and declared in eXoResources.war.

<module>

    <name>jquery</name>

    <as>$</as>

    <script>

        <adapter>

            (function() {

            <include>/javascript/jquery-3.2.1.js</include>

            return jQuery.noConflict(true);

            })();

        </adapter>

    </script>

</module>

So the version is 3.2.1 at the time this document is written. To check it in your eXo instance, use this URL when eXo Platform 5.0 is starting locally:

http://localhost:8080/portal/scripts/5.0.0/SHARED/jquery.js

N.B: The URL cited above is for a 5.0.0 eXo Platform instance, you should replace it by the correct version of your server.

Using a different version of JQuery

In case you want to use a different version of JQuery, for example 1.8.3, declare it as a GMD module with another name than "jquery".

<module>
	<name>jquery-1.8.3</name>
	<script>
		<adapter>
			(function() {
			<include>/js/jquery-1.8.3.js</include>
			return jQuery.noConflict(true);
			})();
		</adapter>
	</script>
</module>

Using JQuery plugins

Using JQuery plugins/extensions probably causes conflict over global variables. The problems vary, but usually you can deal with it by using GMD adapter pattern. A simple and useful method is to save the current global one at first and restore it at last. Here is an example:

<module>

    <name>bootstrap_tooltip</name>

    <script>

        <adapter>

            (function() {

            var oldJQuery = window.jQuery;

            window.jQuery = $;

            <include>/WEB-INF/classes/org/exoplatform/task/management/assets/javascripts/bootstrap/bootstrap-tooltip.js</include>

            window.jQuery = oldJQuery;

            return $;

            })();

        </adapter>

    </script>

    <depends>

        <module>jquery</module>

    </depends>

</module>

See some other examples in Task Management Addon project.