The following doesn't work. I am trying to call the callPageHandler method from the constructor. Everything I read says it should work. But it fails with callPageHandler is not a function. And yes I tried calling it as this.callPageHandler, that doesn't work either. The class in question requires Bootstrap 3 and jQuery to work. It uses a Bootstrap modal to create a wizard with prev, next, cancel buttons at the bottom.
"use strict";
class MMWizard {
constructor(name, title, pageHandlers) {
this.popupName = name;
this.popupTitle = title;
this.bodyElementID = name + "Body";
this.cancelButtonID = "btn" + name + "Cancel";
this.prevButtonID = "btn" + name + "Prev";
this.nextButtonID = "btn" + name + "Next";
this.wizardPageClassName = name + "WizardPage";
this.currentPageIndex = 0;
this.pages = new Array();
this.popupElement = $(`<div id="${name}" class="modal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" style="display: none;"/>`);
let popupDocument = $(`<div class="modal-dialog modal-sm" role="document" />`);
let popupContent = $(`<div class="modal-content" />`);
let popupHeader = $(`<div class="modal-header" />`);
let popupBody = $(`<div class="modal-body" id="${this.bodyElementID}" />`);
let popupFooter = $(`<div class="modal-footer" />`);
let popupTitle = $(`<h5 class="modal-title">${title}</h5>`);
let btnCancel = $(`<button id="${this.cancelButtonID}" type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Close">Cancel</button>`);
let btnPrev = $(`<button id="${this.prevButtonID}" type="button" class="btn btn-secondary">Previous</button>`);
let btnNext = $(`<button id="${this.nextButtonID}" type="button" class="btn btn-secondary">Next</button>`);
popupTitle.appendTo(popupHeader);
btnCancel.appendTo(popupFooter);
btnPrev.appendTo(popupFooter);
btnNext.appendTo(popupFooter);
popupHeader.appendTo(popupContent);
popupBody.appendTo(popupContent);
popupFooter.appendTo(popupContent);
popupContent.appendTo(popupDocument);
popupDocument.appendTo(this.popupElement);
for (let i = 0; i < pageHandlers.length; i++) {
let newPageElement = $("<div/>").prop("id", `${name}Page${i}`).addClass(this.wizardPageClassName);
this.pages.push({
pageElement: newPageElement,
pageHandler: pageHandlers[i]
});
}
this.pages.forEach(function (page) {
page.pageElement.appendTo(popupBody);
});
$(`.${this.wizardPageClassName}`).hide();
btnPrev.prop("disabled", "disabled");
btnNext.prop("disabled", "disabled");
btnPrev.unbind().click(function () {
if (--this.currentPageIndex == 0)
btnPrev.prop("disabled", "disabled");
this.callPageHandler(this.currentPageIndex); // This line fails, whether "this." is there or not
});
btnNext.unbind().click(function () {
this.currentPageIndex++;
btnPrev.removeAttr("disabled");
btnNext.prop("disabled", "disabled");
this.callPageHandler(this.currentPageIndex); // This line fails, whether "this." is there or not
});
}
callPageHandler(index) {
let CurrentPage = this.pages[index];
let prevBtn = $(`#${this.prevButtonID}`);
let nextBtn = $(`#${this.nextButtonID}`);
let cancelBtn = $(`#${this.cancelButtonID}`);
$(`.${this.wizardPageClassName}`).hide();
this.pages[this.currentPageIndex].pageElement.show();
CurrentPage.pageHandler(CurrentPage.pageElement, prevBtn, nextBtn, cancelBtn);
}
RunWizard() {
this.popupElement.modal('show');
this.callPageHandler(0);
this.pages[0].pageElement.show();
}
}