javascript - Two jQuery versions on the same page - problem

Question

The reason for two jQuery versions on the same page is a little lengthy, but I find myself needing it as different sections of the site are controlled by different parties (it's complicated).

There are 2 script tags in the header:

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery-cookie.min.js"></script>

There is then another version of jQuery in the footer. The jQuery in the footer has this line of code running right after it's script tag:

window.$j = jQuery.noConflict();

The issue I'm having is, $.cookie or jQuery.cookie, when being used, returns the error: "jQuery.cookie is not a function"

Is there a way to preserve the jquery-cookie variables as they seem to be lost once the second version is added?

question from:https://stackoverflow.com/questions/65941643/two-jquery-versions-on-the-same-page-problem

Answer 1

If you are using no conflict correctly, it should be working. Example loading cookie and seeing it is still defined.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
  console.log("$ 1 cookie", typeof $.cookie);
</script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
var jQuery_2_0_2 = $.noConflict(true);
</script>
<script>
  console.log("$ 2 cookie", typeof $.cookie);
  console.log("jQ cookie", typeof jQuery_2_0_2.cookie);
  console.log($.fn.jquery, jQuery_2_0_2.fn.jquery);
</script>