0

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?

Praveenkumar
  • 921
  • 1
  • 9
  • 28

2 Answers2

0

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.

Denis Radinski
  • 100
  • 7
  • now you have declared var j = jQuery.noConflict(); in your app. If someone uses your app In thier code it will throw **$ is not a function** – Praveenkumar Feb 11 '16 at 07:15
0

encapsulate your functions. That way in the scope of your encapsulated function the $ object will always be the same version of jQuery, with the same plugins defined.

The moment you escape your scope(as I do in my example with doStuff things default to the global object, and for all intents and purposes you've lost the reference to the old jquery object.

If you want plugins on both jquery objects I advice to load the plugin scripts via $.getScript() anew when the second jquery has loaded. This should not cause extra overhead as the browser will have those files cached.

This way you can have multiple versions of jquery, angular, whatever together on one page, each in it's own scope where it's blissfully unaware of the state of $, jQuery or whatever variable :-)

The nice thing is about this is you can time the loading of the scripts. Compile together your specific set of libaries, since getScript has a callback that'll tell you when they are done. When all scripts are done, trigger a function to execute the rest of the code, pass along the relevant objects, etc..

That way you always know what 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>
Tschallacka
  • 27,901
  • 14
  • 88
  • 133