Getting Error - FormHandler is not a constructor

Frontend Web Development: The Big Nerd Ranch Guide Chapter 10: Processing Forms with JavaScript
1

After completing coding of chapter 10, i am getting an error which i am not able to resolve.

Uncaught TypeError: FormHandler is not a constructor
at main.js:11
at main.js:15

anyhelp would be highly appreciated.

main.js:

(function (window) {
‘use strict’;
var FORM_SELECTOR = ‘[data-coffee-order=“form”]’;
var App = window.App;
var Truck = App.Truck;
var DataStore = App.DataStore;
var FormHandler = App.FormHandler;
var myTruck = new Truck(‘ncc-1701’, new DataStore());
window.myTruck = myTruck;

var formHandler = new FormHandler(FORM_SELECTOR);
formHandler.addSubmitHandler(myTruck.createOrder.bind(myTruck));

console.log(formHandler);
})(window);

formHander.js:

(function (window){
‘use strict’;
var App = window.App || {};
var $ = window.jQuery;

function FormHandler(selector){
  if (!selector){
    throw new Error('No selector provided');
  }
  this.$formElement = $(selector);
  if (this.$formElement.length === 0 ){
    throw new Error('Could not find element with selector: '+ selector);
  }
}

FormHandler.prototype.addSubmitHandler = function (fn){
  console.log('Setting submit handler to form');
  this.$formElement.on('submit', function(event){
    event.preventDefault();

    var data = {};//$(this).serializeArray();
    $(this).serializeArray().forEach(function (item){
      data[item.name] = item.value;
      console.log(item.name + ' is '+ item.value);
    })
    console.log(data);
    fn(data);
    this.reset();
    this.element[0].focus();
  });
}

App.FormHandler = FormHandler;
window.App = App;

})(window);

2

Just a thought… make sure in your index.html the line:

comes before

I had the same error before I tried this.

3

I think what @davedauenhauer means is that your index.html file should look like this

</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script src='scripts/formhandler.js' charset='utf-8'></script>
<script src='scripts/datastore.js' charset='utf-8'></script>
<script src='scripts/truck.js' charset='utf-8'></script>
<script src='scripts/main.js' charset='utf-8'></script>

You must load all the modules before loading main.js

4

hello @davedauenhauer and @sho … it worked many thanks… now able to move forward with further chapters :slight_smile:

5

Hello @shashibond, @davedauenhauer, and @sho! I am having the same problem, i.e. I am getting the error “App.FormHandler is not a constructor.” My javascript files are loaded in the order indicated in the “solution.”

Screen Shot 2017-04-24 at 4.26.01 PM.png855×168 28.3 KB

6

Meant to add that I have checked my FormHandler module code several times. It is identical to the book code.

7

Hi @dartagnan, to debug this issue, try running console.log(App.FormHandler) in the developer console. Most likely, it’ll say “undefined”, which means you probably aren’t assigning to App.FormHandler. That could happen in formhandler.js, you might have a simple typo when setting App.FormHandler = ... or you might not be setting window.App = App to export App as a global variable.

If that doesn’t help, feel free to paste the contents of formhandler.js and main.js here!

10

Hi @nybblr, @brianball, sorry for my delay in responding. I have been sick with a viral infection. Didn’t feel up to coding.

@brianball, I changed the order of the script files as you suggested. Still getting the “…is not a constructor” error.

Per @nybblr, I am posting formhandler.js and main.js.

(function (window) {
‘use strict’;
var App = window.App || {};
var $ = window.jQuery;

function FormHandler(selector) {
if (!selector) {
throw new Error(‘No selector provided’);
}

this.$formElement = $(selector);

};

App.FormHandler = FormHandler;
window.App = App;

})(window);

Here is main.js…

(function (windows) {
‘use strict’;
var App = window.App;
var Truck = App.Truck;
var DataStore = App.DataStore;
var myTruck = new Truck(‘ncc-1701’, new DataStore());
window.myTruck = myTruck;
})(window);

11

Typo. I changed

(function (windows) {…

in main.js to

(function (window) {…

Didn’t help.

12

Hi @dartagnan, just got back in town myself. Hope you’re feeling better! Did you figure out what was going on?

Could you post a screenshot of the console when you load the page? Make sure you aren’t filtering console messages (that way we can make sure all your tags are loading). You might also stick a console.log inside formhandler to confirm that the code inside the IIFE is/isn’t executing.

13

having same problem and I ordered the js files. Now its saying in console :

main.js:23 Uncaught TypeError: Cannot read property ‘bind’ of undefined

14

Hi @Naomi, what is line 23 in your code? That’ll help pinpoint which App.X isn’t being correctly exported or <script> tag that has a typo.

15

I found I typing "Window.App ",so it throws this error.when I use “window.App”(window is lower case),the error is gone.