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.
(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);
(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);
(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);
What does your index.html
look like?
I have not been able to post my HTML the Bot keeps removing it for spam I guess
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.
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);