Question

I’ve got a file notifications.js containing one event bound to an element, and a function updateNotification(). This function uses jQuery to update certain elements on the page when a JSON object is passed as a parameter.

The problem:

I’m attempting to call this function within the page (via <script> tags), however rather than calling it, it breaks the page. I did some digging around within the Chrome Developer Console (not sure of the name), and an error is flagged:

/pleaseshare/views/install/:50 Uncaught ReferenceError:updateNotification is not defined

However, when I pan within the console, I can clearly see the file notifications.js listed under scripts, and the function is defined there. If I define the function within the current scope (e.g. the line above the call), it works fine.

What I’ve tried

The function contains some javascript that requires jQuery, so I’ve attempted both with and without encasing it in $(document).ready( function() {});, with neither seeming to have any affect.

I’m pretty stumped.

For good measure, here’s a link to show the structure of my javascript and html: http://snippi.com/s/znk6xe9

Any help in figuring out why this is happening, or explanations of why javascript functions cannot be called cross-file (although I’d hope this isn’t the case), would be greatly appreciated ;)!!

Answer 1

Got it working. The issue was definitely multi-faceted, but I figured it out.

First off the use of RequireJS had an impact on updateNotification(), in that it couldn’t be called cross-file, and was therefore considered undefined. I assume this because of how RequireJS loads files, and I’ll look into the documentation later (and post an edit if I find anything relevant).

Secondly, updateNotification() would again be considered undefined when encased within jQuery’s DOM ready loader $(document).ready(function(){}). However updateNotification() contains executions which require jQuery, so I had to encase the contents of the function in $(document).ready(function(){}).

This is an issue very unique to RequireJS/jQuery, hence why in most use cases this wouldn’t occur.

Side note: The tags are edited to reflect this.