Allow multiple jquery import statement

Question

Jquery Import statement in parent page

  <script src="js/jquery-ui-1.10.4/jquery-1.11.1.min.js"></script>
  <script src="js/DynamicTable/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="js/DynamicTable/jquery.dataTables.css"/>
  <jsp:include page="DynamicHelpContent"/>

Here in dynamichelp content page (child page) i have imported below scripts

<script src="js/jquery-ui-1.10.4/jquery-1.11.1.min.js"></script>
<script src="js/jquery-ui-1.10.4/ui/minified/jquery-ui.min.js"></script>
<script src="js/jquery-ui-1.10.4/ui/jquery.ui.widget.js"></script>
<script src="js/jquery-ui-1.10.4/ui/jquery.ui.position.js"></script>
<script src="js/jquery-ui-1.10.4/ui/jquery.ui.tooltip.js"></script>

Due to import in dynamic help content I cant see the functionality of my child page because of jquery-1.11.1.min.js import statement.

Can you please provide me the way so that I can allow mulitple Jquery scripts ..

possible duplicate of [Simulate an "include\_once" for jQuery](http://stackoverflow.com/questions/7887735/simulate-an-include-once-for-jquery) — Roy Dictus, Nov 14 '14 at 10:50

score 1 · Answer 1 · answered Nov 14 '14 at 10:52

You can use this code to load jQuery, it appends the script to the head-tag if it's not.

<script type="text/javascript">
if (!window.jQuery) {
  var jq = document.createElement('script'); jq.type = 'text/javascript';
  // Path to jquery.js file, eg. Google hosted version
  jq.src = '/path-to-your/jquery.min.js';
  document.getElementsByTagName('head')[0].appendChild(jq);
}
</script>

Taken from http://jquery-howto.blogspot.se/2009/03/check-if-jqueryjs-is-loaded.html

score 1 · Accepted Answer · edited May 23 '17 at 11:57

Can you please provide me the way so that I can allow mulitple Jquery scripts ..

Yes, but you shouldn't do that. Instead, find a set of plugins that will work with just one copy of jQuery. If you have to leave both script tags in place but you only want one of them to load, ZarX's answer (+1) shows one way to do that.

If you really want to have both v1.11.1 and v1.10.4 on the page, you'd do this:

<script src="js/jquery-ui-1.10.4/jquery-1.11.1.min.js"></script>
<script src="js/DynamicTable/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="js/DynamicTable/jquery.dataTables.css"/>

Then:

<script src="js/jquery-ui-1.10.4/jquery-1.11.1.min.js"></script>
<script src="js/jquery-ui-1.10.4/ui/minified/jquery-ui.min.js"></script>
<script src="js/jquery-ui-1.10.4/ui/jquery.ui.widget.js"></script>
<script src="js/jquery-ui-1.10.4/ui/jquery.ui.position.js"></script>
<script src="js/jquery-ui-1.10.4/ui/jquery.ui.tooltip.js"></script> 
<script>
var $10 = jQuery.noConflict(true);
</script>

What happens is:

jQuery 1.11.1 is loaded
DataTables attaches itself to the then-current copy of jQuery (v1.11.1)
jQuery 1.10.4 is loaded, taking over the $ and jQuery symbols
jQuery UI attaches itself to the then-current copy of jQuery (v1.10.4)
The line var $10 = jQuery.noConflict(true); tells v1.10.4 to release the $ and jQuery symbols, restoring their previous value (v1.11.1) (more: noConflict)

At this point:

$ = the jQuery function for v1.11.1, with the DataTables plugin attached to it
jQuery = the jQuery function for v1.11.1 too
$10 = the jQuery function for v1.10.4, with the jQuery UI plugins attached to it

This is a bad idea for a couple of reasons:

You're loading two copies of jQuery, which isn't exactly a lightweight script to download
Now you have to remember whether to use $ (for the mostly up-to-date version and DataTables) or $10 (for the out-of-date version and jQuery UI).

So again: Best not to.

Allow multiple jquery import statement

2 Answers2