Including JavaScript file in another JavaScript file

Question

I have two JavaScript files I am using and I'd like to include one in another.

validate.js:

function validateEmail(userEmail) {
    var email = userEmail;
    var emailFilter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

    if (emailFilter.test(email)) {
    //alert('Please provide a valid email address');
        email.focus;
        return true;
    }
    else {
        return false;
    }
}

navigation.js

$(document).ready(function() {
    var imported = document.createElement('script');
    imported.src = 'lib/validation.js';
    document.head.appendChild(imported);

    console.log("DOCUMENT IS READY!");

    var viewsWrapper = $("#views-wrapper");
    var loginButton = $("#login-button");
    var registerButton = $("#register-button");

    // Login Link
    // TODO: Unclear if needed
    $("ul li.login").click(function() {
        $.get('/login', function(data) {
            viewsWrapper.html(data);
        });
    });

    $('#usernamefield').blur(function() {
        var sEmail = $('#usernamefield').val();
        if ($.trim(sEmail).length == 0) {
            alert('Please enter valid email address');
            e.preventDefault();
        }
        if (validateEmail(sEmail)) {
            alert('Email is valid');
        }
        else {
            alert('Invalid Email Address');
            e.preventDefault();
        }
    });
});

(There is more code which is not relevant)

I've tried using solutions described on this page here

As shown above in navigate.js (commented area), but that is not working.
I am trying to call the validateEmail function which is located in validate.js from within navigation.js, but I can't seem to do that. None of the solutions I've seen have helped.

Any help is appreciated.

Your problem is, that at the time you do `appendChild` - it **will be** appended but it is **not yet** appended and not ready. that's why the duplicate question, that you linked by yourself is using `imported.onload = callback; imported.onreadystatechange = callback;` where callback is a function, where you should move your code — metadings, Jan 17 '14 at 15:52
btw. use jQuery's [getScript](http://api.jquery.com/jquery.getscript/) that does basically the same as the loadScript example in the linked question — metadings, Jan 17 '14 at 15:54

score 1 · Accepted Answer · edited May 23 '17 at 11:49

You can't include one JS file from another in any simple manner. But you can include both from the page that uses them. Since your validateEmail function looks to be global, the other function will simply reference it.

Alternately you can use one of the many module loaders that exist. I would suggest that you save that for later, until you can do this simpler problem. But tools like Require.js and its kin will allow one module to specify its dependencies upon another and handle the loading of the dependencies.

Or as @Jason suggested, you can also use a script combiner, which is commonly used to speed up sites by allowing you to develop with multiple files but deploy with single ones.

But really, first you need to work on the basics, and that involves learning how scripts are used on web pages and how they talk to one another.

score 0 · Answer 2 · answered Jan 17 '14 at 15:47

0

What I would recommend is using one of the many JavaScript libraries such as YUI Compressor or Google Closure Compiler to combine all your javascript files into a single file. These libraries will also take care of minifying/compressing them as well.

Don't roll your own...

answered Jan 17 '14 at 15:47

xspydr

3,030
3
31
49

But I do not want to have them all on one file – Jan 17 '14 at 15:48
You cannot include a JS file within another. What you can do is have multiple script tags in your page with validate.js listed before navigation.js. Both files will load in sequential order and navigation.js will be able to take advantage of the methods in validate.js. – xspydr Jan 17 '14 at 15:51

Including JavaScript file in another JavaScript file

2 Answers2