This will throw Uncaught TypeError: $(...).popover is not a function.
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
- I have jquery and bootstrap in app A. The app C can make request with jquery and bootstrap as optional.
- 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.
- But when I lazyload app B script dynamically cause Uncaught TypeError: $(...).popover is not a function. Because the app B jquery Loaded after Bootstrap.
- Used jquery.noConflict in app A. Works well when app B added using Lazy load also.
- 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.