0

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();

    }
}

0 Answers0