jQuery is not a function in anonymous function

Question

I am trying to write an anonymous javascript function that dynamically loads jquery and angular. However, when I run the function I keep getting 'jQuery is not a function'. Can someone help? Here is my code:

(function() {

  var jQuery;
  var jquery_tag = document.createElement('script');
  var angular_tag = document.createElement('script');

  jquery_tag.setAttribute("type", "text/javascript");
  jquery_tag.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js");

  angular_tag.setAttribute("type", "text/javascript");
  angular_tag.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js");

  jquery_tag.onload = scriptLoadHandler;
  angular_tag.onload = scriptLoadHandler;

  (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(jquery_tag);
  (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(angular_tag);


  function scriptLoadHandler() {
    jQuery = window.jQuery
    main();
  }

  function main() {
    jQuery(document).ready(function($) {
      alert('yo'); //this runs
    });
  }

})();

Here is my fiddle:

https://jsfiddle.net/p7jcofx1/4/

Thanks in advance!

Can you update your jsfiddle to reflect your recent code changes? — Matt
– Matt, Commented May 18, 2016 at 15:03
Also, where exactly are you getting the error 'jQuery is not a function'? — nem035
– nem035, Commented May 18, 2016 at 15:06

Rick Hitchcock · Accepted Answer · 2016-05-18 15:12:17Z

3

scriptLoadHandler() will run two times based on this code:

jquery_tag.onload = scriptLoadHandler;
angular_tag.onload = scriptLoadHandler;

Even though the Angular code is listed after the jQuery code, it could load first, making window.jQuery undefined in scriptLoadHandler, and causing jQuery(document) to fail in main().

You can prevent this by updating scriptLoadHandler as follows:

function scriptLoadHandler() {
  if(window.jQuery) {
    jQuery = window.jQuery
    main();
  }
}

answered May 18, 2016 at 15:12

Rick Hitchcock

35.7k5 gold badges51 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Trung Tran Over a year ago

this solved it! also, if you don't mind, could you confirm that i'm loading the jquery and angular correctly / via best practices?

Rick Hitchcock Over a year ago

I honestly don't know what best practices are for loading scripts dynamically, but I don't see anything wrong with your code other than the risk that Angular could load first.

apokryfos · Accepted Answer · 2016-05-18 15:14:42Z

From the angular documentation here

To use jQuery, simply ensure it is loaded before the angular.js file. You can also use the ngJq directive to specify that jqlite should be used over jQuery, or to use a specific version of jQuery if multiple versions exist on the page.

You can achieve this using the following:

  var jquery_tag = document.createElement('script');          

  jquery_tag.setAttribute("type", "text/javascript");
  jquery_tag.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js");          

  jquery_tag.onload = jQueryLoadedHandler;    

  (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(jquery_tag);      


  function jQueryLoadedHandler() {
    //Load angular after jQuery 
    var angular_tag = document.createElement('script');
    angular_tag.setAttribute("type", "text/javascript");
    angular_tag.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js");
    angular_tag.onload = angularLoadedHandler;
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(angular_tag);
  }

  function angularLoadedHandler() {         
      main(); //Both jQuery and angular should be loaded
  }

  function main() {
    jQuery(document).ready(function($) {
      alert('yo'); //this runs
    });
  }

Updated fiddle

Note: This is a suggestion in the case you want angular.js to use jQuery. If you don't mind it using jqLite then this is not necessary and the accepted answer should work just fine.

Collectives™ on Stack Overflow

jQuery is not a function in anonymous function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related