0

let's assume I need to load multiple versions of jQuery in my Angular.js app.

After some test I understood that when I try to load a particular view with the 2nd version of jQuery inside it, my app uses only the first one, so I saw there is a sort of "hack" with $timeout, but I'm still not able to reproduce it.

My view code is basically this (consider that in index is previously loaded a 2.1.4 version of jQuery):

<script src="http://somepath/jquery-3.1.1.min.js"></script>
<script>
console.log( "2nd loaded jQuery version ($): " + $.fn.jquery );
jq311 = jQuery.noConflict( true );
console.log( "After $.noConflict(true)" );
console.log( "1st loaded jQuery version ($): " + $.fn.jquery);
console.log( "2nd loaded jQuery version (jq311): " + jq311.fn.jquery );
</script>

And my JavaScript is like that:

$scope.$on('$viewContentLoaded', function(event) {
                      $timeout(function() {
                          jQuery( document ).ready(function( $ ) {
                                alert("now loading jQuery");
                                console.log( " loaded jQuery version ($): " + $.fn.jquery );
                            });
                      },0);
                });

When alert comes, in the console the following code is shown:

loaded jQuery version ($): 2.1.4

I know I'm messing something in the JavaScript, but I can't figure out what. Any hint?

UPDATE: I now achieved the loading of the 2nd jQuery using [ocLazyLoad][1]

console.log( "1st loaded jQuery version ($): " + $.fn.jquery );
                $ocLazyLoad.load('somepath/jquery/jquery-3.1.1.min.js').then(function(response) {
                    $timeout(function() {
                        console.log( "2nd loaded jQuery version ($): " + $.fn.jquery );
                        var jq311 = jQuery.noConflict(true);
                        console.log( "After jQuery.noConflict(true)" );
                        console.log( "1st loaded jQuery version ($): " + $.fn.jquery);
                        console.log( "2nd loaded jQuery version (jq311): " + jq311.fn.jquery );
                     },0);
                });

but I'm still not able to use noConflict method

Here the console output:

1st loaded jQuery version ($): 2.1.4
2nd loaded jQuery version ($): 3.1.1
After jQuery.noConflict(true)
1st loaded jQuery version ($): 3.1.1
2nd loaded jQuery version (jq311): 3.1.1

Any hint why I'm not able to choose jQuery? [1]: https://oclazyload.readme.io/

Or Assayag
  • 5,662
  • 13
  • 57
  • 93
Anon
  • 502
  • 5
  • 19
  • 1
    Why would you load multiple versions of jQuery? – hallleron Aug 02 '17 at 09:11
  • i need to run multiple version cause i need to add some new functionality on a big project without touching previous code – Anon Aug 02 '17 at 09:12
  • Script loading is not handled by viewContentLoaded. It's not supported by Angular at all. Actually, – Estus Flask Aug 02 '17 at 10:28

0 Answers0