javascriptjquerykendo-uireadystate

DOMReady: 'kendo' is undefined

I am receiving an intermittent error from JavaScript in my production environment and was hoping to learn more about the loading process.

The error is simple enough to understand:

'kendo' is undefined.

It states that the kendo variable is undefined at a time that I try to use it. However, I have all of my JavaScript code wrapped inside a jQuery ready event, like so...

<head>
   <script src="path/to/jQuery.js"></script>
</head>
<body>
   <!-- ... -->

   <script>
     jQuery(function ($) {
       var test = new kendo.data.DataSource({
         // datasource options
       });
     });
   </script>

   <!-- ... -->

   <script src="path/to/kendo.js"></script>
</body>

I was under the impression that doing jQuery(function() { ... }); would cause the inner code to run after the DOM is ready and that it would run only after all of the <script> tags have been parsed and processed.

Is this not the case? Should I be adding my code to the loaded event instead of the ready event?

FWIW, we are using Cloudflare to handle minifying and caching, and the intermittent behavior seems to only be related to IE. I can't replicate the problem, though, I just get notified when one of our pages fails to finish loading and I see the console has this undefined error. Navigating to the page again yields no problem, so I'm a little baffled. Any ideas?

Also, I don't see any duplicate references to the jQuery or kendo libraries in my code.

Solution

  • Use it this way ...

    <head>
   <script src="path/to/jQuery.js"></script>
</head>
<body>
   <!-- ... -->

   <script src="path/to/kendo.js"></script>
   <script>
     jQuery(function() {
       var test = new kendo.data.DataSource({
         // datasource options
       });
     });
   </script>

   <!-- ... -->

</body>