CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Sunil
Sunil

Reputation: 21406

$.ui is undefined even when jquery ui library is loaded

I have a page with JavaScript in it that has a self-invoked function which executes when page loads. This page also includes jquery and jquery ui libraries ( first jquery is included and after that jquery ui is included).

The following JavaScript is included at end of page just before closing body tag.

In code below, even though the variables x and y correctly indicate that jquery ui exists, but within global.method1 function the variable z is always undefined, when it should have been defined since jquery ui is loaded.

Question

Why is $.ui defined outside the self-invoked function as well as within the document ready event in the same self-invoked function but not within global.method1 method?

I have a demo at following link, in which I do not see this behavior i.e. within method1 $.ui is defined: sample runnable code. So, its really confusing.

var x = $.ui;//defined

(function (global) {

     var dialogOptions;

    $(
        function () {
            var y = $.ui;//defined

            //some more code here

        }
    );

    global.method1 = function () {
        var z = $.ui; //not defined

       //some more code here
    }

    //some more code here

})(window);

Upvotes: 0

Views: 720

Answers (1)

Steve0
Steve0

Reputation: 2253

I have attempted to create a minimal example for you;

  • created a snippet with the links to jQuery in a snippet.
  • added some logs to the console
  • added a call to the global method

All appears to be defined. Your issue must be in code not linked in your example.

var x = $.ui; //defined
console.log(`first: ${x}`);
(function(global) {

  var dialogOptions;

  $(
    function() {
      var y = $.ui; //defined
      console.log(`second: ${y}`);
      //some more code here

    }
  );

  global.method1 = function() {
    var z = $.ui; //not defined
    console.log(`third: ${z}`);
    //some more code here
  }

  //some more code here
  global.method1(); //added this call

})(window);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

Upvotes: 2

Related Questions