inline javascript works but external file does not

Question

The problem is pretty straight forward. The following code works perfectly when included inside script tags in my HTML document:

$(document).ready(function ($) {
    'use strict';
    $('#contact-form').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        submitButtons: $('#contact-form-submit-button')
    });
}(window.jQuery));

However, once I try to load the script externally like this, it completely fails to do anything (I can confirm that the resource is getting properly served by the server.):

<script type="text/javascript" src="/Users/nick/Documents/coding/sparestub/static_root/contact/js/contact.js"></script>

Does anyone have a clue what's going on here? I'm think I'm going crazy.

EDIT: I figured it out. It turns out the element containing the #contact-form was being loaded asynchronously :(

Answer 1

Put the file on your project file and you could do something like this,

~/Js/contact.js