Two version of JQuery not working in html page-CodePudding

I have Integrated E-signature in my project, Earlier I wasn't getting any error but now I getting this error Uncaught TypeError: $ is not a function, as I have added two different version of JQuery CDN. Please help me to fix this.

I have found this conflict method but not working.

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>var $jQuery1_12_4= $.noConflict();</script>
  <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

  <script type="text/javascript" src="../../assets/js/jquery.signature.min.js"></script>
  <script src="../../assets/js/jquery-3.6.1.min.js"></script>
  <script>var $jQuery3_6_1= $.noConflict();</script>

CodePudding user response：

As soon as you call $.noConflict(), $ reverts back to what it was before jquery was loaded - in most cases, that's undefined.

So you need the $.noConflict() after you load the library that needs it, eg: Load jquery 1.12.4, then jquery ui, then $.noConflict().

The final $.noConflict() is optional depending on what you need for the rest of the page.

Updated script order:

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script>var $jQuery1_12_4 = $.noConflict();</script>

  <script src="../../assets/js/jquery-3.6.1.min.js"></script>
  <script type="text/javascript" src="../../assets/js/jquery.signature.min.js"></script>
  <!--<script>var $jQuery3_6_1 = $.noConflict();</script>-->