Constructors are in App name space, issue in main.js?


#1

Seems as though all of the code written in the main does not work such as instantiations from the constructors. I can’t seem to get the check boxes to appear even after re-writing everything in the console.


#2

//main.js

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

var formHandler = new FormHandler(FORM_SELECTOR);
var checkList = new CheckList(CHECKLIST_SELECTOR);

formHandler.addSubmitHandler(function(data) {
myTruck.createOrder.call(myTruck, data);
checkList.addRow.call(checkList, data);
});

})(window);


#3

//formhandler.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 for form’);
this.$formElement.on(‘submit’, function (event) {
event.preventDefault();

  var data = {};
  $(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.elements[0].focus();
});

};

App.FormHandler = FormHandler;
window.App = App;
})(window);


#4

//checklist.js

(function (window) {
‘use strict’;

var App = window.App || {};
var $ = window.jQuery;

function CheckList(selector) {
if (!selector) {
throw new Error(‘no selector provided’);
}
this.element = (selector);
if (this.$element.length === 0) {
throw new Error('Could not find element with selector: ’ + selector);
}
}

function Row(coffeeOrder) {
var div = (’

’, {
‘data-coffee-order’: ‘checkbox’,
‘class’: ‘checkbox’
});
var $label = $('<label></label>');

var $checkbox = $('<input></input>', {
  type: 'checkbox',
  value: coffeeOrder.emailAddress
});

var description = coffeeOrder.size + ' ';
if (coffeeOrder.flavor) {
  description += coffeeOrder.flavor + ' ';
}

description += coffeeOrder.coffee + ', ';
description += ' (' + coffeeOrder.emailAddress + ')';
description += ' [' + coffeeOrder.strength + ']';

$label.append($checkbox);
$label.append(description);
$label.append($label);

this.$element = $div;

}

CheckList.prototype.addRow = function(coffeeOrder) {
var rowElement = new Row(coffeeOrder);

this.$element.append(rowElement.$element);

};

App.CheckList = CheckList;
window.App = App;
})(window);


#5

Chapter%2011


#6

What does your index.html look like?


#11

I have not been able to post my HTML the Bot keeps removing it for spam I guess


#12

!


#13

Coffee%20Run%20HTML(4)|690x198

!


#14


#15


#16

updates i’ve made that have shown progress towards a solution, was assigning window.checkList = checkList and window.formHandler = formHandler. I found since the myTruck instance was working and this was the only difference I found I should make the other modules do this as well. I still don’t get the checklist to appear after submitting a form, but the checkList object is present now in the console.


#17

Ok, I’ve found the solution. In my CheckList Module I put $label.append($label) instead of appending the label to the div like: $div.append($label);