7.5. JQuery versions and plugins

Warning

You are looking at documentation for an older release. Not what you want? See the current release documentation.

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-1.7.1.js</include>
            return jQuery.noConflict(true);
            })();
        </adapter>
    </script>
</module>

So the version is 1.7.1 at the time this document is written. It is not likely to change over Platform 4.x versions. To check it in your eXo instance (replace "4.3.0" with your Platform version):

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

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.

Copyright ©. All rights reserved. eXo Platform SAS
blog comments powered byDisqus