Santiago Santiago - 1 year ago 149
Javascript Question

Document is not defined

I have been trying to implement a login functionality for this website that I am creating. I am able to check whether the user is in the database or not. However, if the user is not in the database I would like to display a message in the form that says; "user not found." I am trying to use jQuery, but I keep getting the "Document not defined" error.

Code in my js file looks like:'/login', function(req, res) {
passport.authenticate('local', function(err, user, info) {
if (err) { return next(err) }
if (!user) {
req.flash('error', info.message);
$(document).ready(function() {
$("#label1").text("Hello world!");
$("#label1").css('color', 'red');
return res.redirect('/nouser')//called when no user found. to implement
req.logIn(user, function(err) {
if (err) { return next(err); }
res.redirect(req.session.returnTo || '/');
})(req, res);

My form is:

<!-- Username & Password Login form -->
<div class="user_login">
<form id="login" action="/auth/login" method="post">
<label id="label1">Email</label>
<input name="email" type="email" />
<br />

<input name="password" type="password" />
<br />

<div class="action_btns">
<div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
<input type="submit" class="btn btn_red" value="login">

<a href="#" class="forgot_password">Forgot password?</a>

I am very new to web programming and any help would be very well appreciated.

Answer Source

“JavaScript Reference Error is Not Defined” As mentioned, there are times in which simply defining a variable will resolve the issue. For example, given the example with jQuery above, we can make a call to noConflict() to restore the variable.

Old references of $ are saved during jQuery initialization; noConflict() simply restores them.

But that’s getting beyond the point of this article.

The thing is, simply restoring a variable or giving it a definition especially when it’s related to a third-party dependency is not as easy.

Instead, the problem can usually be resolved in one of two ways.

  1. Load the Libraries in Proper Order Arguably, the most popular reason for seeing a ReferenceError has to do with the fact that our script is referencing a variable that has yet to be defined.

To fix this, it’s generally a problem of the files being loaded out of order and this is especially true if the error is being thrown in the context of a site or web application that has its own libraries, then the scripts are probably loading later than your own.

This means that either the scripts are placed after yours in the head element of the page or they are being loaded in the footer of the page. If that’s the case, most frameworks and applications provide an API for setting the order in which files are loaded, setting dependencies, and then defining where, in the page, they are loaded.

  1. Leverage Undefined Values Another more slightly involved example involves calling a function with an optional parameter and then checking to see if that argument is defined when the function is called.

For example, let’s say that we know that the function in question will be called at two points within the page lifecycle:

When the DOM is ready, and likely when a dependent variable is not defined When the page is loaded and ready, and likely when a dependent variable is already defined. To do this, we can take advantage of variable definitions in JavaScript by doing something like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 function acmeReferenceError( valueExists ) { 'use strict';

if ( undefined === valueExists ) {

/* If this is hit, then the function is being invoked
 * before the variable in question has been defined.

} else {

/* If this particular conditional is hit, then the function
 * is being invoked after the value in question has
 * been defined.


} view rawreference-error-not-defined.js hosted with ❤ by GitHub Note, however, that we are not checking for whether is the variable is true or false but if the variable is actually defined.

Given that, we can then setup a conditional to do whatever work needs to be done given the presence of the variable or not.

Finally, the way you go about invoking the following function would be like this:

Assuming that you’re calling the function before the value is defined acmeReferenceError();. If you’re calling the function after the value is defined, then you would call acmeReferenceError( foo ); where foo is the value that’s defined. Most likely, the first case will be called when the DOM has loaded, but the page isn’t ready, and the second case will be called when the page has fully loaded and is ready.

The First Is Optimal, the Second Less So When it comes to working with JavaScript, it’s always a better idea to load your scripts in dependent order. With that said, I always recommend the first option as being the proper, more optimal one.

Not only does it work the way ordering of scripts should work, but it requires less documentation and JavaScript-based code because the order of the scripts at the application layer shows – and controls – exactly how things are working.

However, there can be a few times where it’s not possible or something about the environment doesn’t give you the control that you need, and if that’s the case, then the second option is a workable solution.

If you end up going that route, though, I highly recommend including very clear code comments at the function level to explain that the optional parameter is used for, why it’s present, and what aspects of the application necessitate the need for doing something like that.