Importing Functions from Different “Modules”

Question

I'm new to jQuery, coming from a Python and Java background, so I'm having trouble getting used to how working across different .js files works. I have an HTML file that imports the following scripts:

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script
        src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>
    <script src="{{ STATIC_URL }}/forms.js"></script>
    <script src="{{ STATIC_URL }}/workout1Alt.js"></script>

The last two are mine. In forms.js, I have a general function, validateNumberForm , that I want to be able to use in my more specific workout1Alt.js form. The form's signature looks like this:

var validateNumberForm = function(id)

I invoke the validateNumberForm in workout1Alt.js like this:

validateNumberForm('#squatsForm');

But I get this error:

Reference Issue: Cannot find variable validateNumberForm. 

Can someone show me the best practices of how to do something like this?

Answer 1

I'm guessing you're wrapping the definition inside of a jQuery ready handler, like this:

$(function() {
    var validateNumberForm = function(id) { /* ... */ };
    // ...
});

That makes validateNumberForm only available in there. If you want it to be available to other files, you can move it out of the ready handler:

var validateNumberForm = function(id) { /* ... */ };
$(function() {
    // ...
});

Or you can explicitly export it:

$(function() {
    var validateNumberForm = function(id) { /* ... */ };
    window.validateNumberForm = validateNumberForm;
    // ...
});