How to handle Uncaught TypeError: $ (...). Popover is not a function when two jquery files are loaded?
General 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 script
I have an application that is consuming another application and it is being consumed by another application.
ie) 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 invoking api call
- I have a jquery and bootstrap in Appendix A . Application C can execute the request with jquery and bootstrap as optional.
- app A consumes app B where app B has other jquery which is not optional. app B works great when I add scripts to HTML.
- But when I lazyload the app the B script dynamically raises an Unprepared TypeError: $ (...). Popover is not a function . Because app B is loaded with jquery after loading.
Solutions:
- Jquery.noConflict used in Appendix A . Works well when adding app B using Lazy load.
- The problem arises when the C application consumes application A . he throws $ is not a function in his application
Problem: I can't ask the App B and App C command to change the code. How can I handle this?
source to share
I had a similar problem and this was my solution:
var j = jQuery.noConflict();
// Do something with jQuery
j( "div p" ).hide();
// Do something with another library $()
$( "content" ).style.display = "none";
It will help if you can post the code. I'm not sure I fully understand everything.
source to share
encapsulate your functions. This way, within the scope of your encapsulated function, the $ object will always be the same jQuery version, with the same plugins defined.
The moment you go out of scope (as in my example with the default doStuff function for the global object, and for all intents and purposes, you lost the reference to the old jquery object.
If you need plugins for both jquery objects, I suggest reloading the plugin scripts via $ .getScript () after loading the second jquery. This shouldn't cause any additional overhead as the browser will store these files in the cache.
This way you can have multiple versions of jquery, angular, independently of each other on the same page, each in its own scope where it is blissfully unaware of the state of $, jQuery or any other variable :-)
The best part about this is the script load times. Compile your set of libaries as getScript has a callback that will tell you when it's done. When all scripts are done, run the function to execute the rest of the code, walk through the appropriate objects, etc.
This way you always know which object has and can do what :-)
(function($) {
$(document.body).append('<img src="http://weknowyourdreamz.com/images/happy/happy-03.jpg">');
$.getScript("https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js",function() {
doStuff();
});
console.log("JQuery version encapsulated",$.fn.jquery);
})(jQuery)
function doStuff() {
console.log("JQuery version global",$.fn.jquery);
}
img {width:100%;height:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
source to share