How to handle Uncaught TypeError: $ (& hellip;). Popover is not a function when two jquery files have been loaded?

advertisements

Generic Scenario

  <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>.

This will throw Uncaught TypeError: $(...).popover is not a function.

My Scenario

I have application which consumes other application and it is consumed bye somother application.

i.e) A = "my_app"

A consumes B(angular app) by adding the script file of app B in app A

A is consumed by C by making api call

  1. I have jquery and bootstrap in app A. The app C can make request with jquery and bootstrap as optional.
  2. app A consumes app B where app B is having another jquery which is not optional. The app B works well when I add the scripts in HTML.
  3. But when I lazyload app B script dynamically cause Uncaught TypeError: $(...).popover is not a function. Because the app B jquery Loaded after Bootstrap.

Solutions Tried:

  1. Used jquery.noConflict in app A. Works well when app B added using Lazy load also.
  2. The problem arises when app C consumes app A. it throws $ is not a function in thier app

Problem facing: I cant ask the app B and app C team to change code. How can i handle this?


I've had similar problem before and this was my solution:

var j = jQuery.noConflict();

// Do something with jQuery
j( "div p" ).hide();

// Do something with another library's $()
$( "content" ).style.display = "none";

It would help if you can post code though. I'm not sure I fully understand everything.