0

I am using ES6 because of its syntactical class features whose are similar to Java.

I want to use functions passed in the object constructor.

class DialogOkCancel extends Dialog {

    constructor(title, okEvent, cancelEvent) {
        super(title);
        this._okEvent = okEvent;
        this._cancelEvent = cancelEvent;
    }

    buildDialog() {
        super.buildDialog();

        $("#" + this._id).dialog({
            buttons: [
                {
                    text: "Ok",
                    click: this._okEvent
                },
                {
                    text: "Abbrechen",
                    click: this._cancelEvent
                }
            ]
        });
    }
}

And this is my object code.

var dialog = new DialogOkCancel("test", function () {
        alert("Ok");
    },
    function () {
        alert("Cancel");
    });

I can use the variables okEvent and cancelEvent and their member vars. But when I leave the scope the script engine says undefined or not a function.

I also tried:

buildDialog() {
    super.buildDialog();

    var that = this;
    $("#" + this._id).dialog({
        buttons: [
            {
                text: "Ok",
                click: that._okEvent
            },
            {
                text: "Cancel",
                click: that._cancelEvent
            }
        ]
    });
}

Dialog class: class Dialog {

    constructor(title) {
        this._id = IdGenerator.generate();
        this._title  = title;
        this._dialog = document.createElement("div");
        this._dialog.setAttribute("id", this._id);
        document.body.appendChild(this._dialog);
        this.buildDialog();
    }

    getId() {
        return this._id;
    }

    getTitle() {
        return this._title;
    }

    getDialog() {
        return this._dialog;
    }

    buildDialog() {
        $("#" + this._id).dialog({
            autoOpen: false,
            //width: 400,
            hide: { effect: "scale", duration: 200 },
            modal: true,
            show: { effect: "blind", duration: 200 },
            title: this._title
        });
    }
}
user7351112
  • 1
  • 1
  • 1
    I think you need to bind this ```this._okEvent = okEvent.bind(this);``` ```this._cancelEvent = cancelEvent.bind(this);```, because in dialog({}) `this` is the jquery element. – Lyubomir Dec 28 '16 at 18:50
  • 1
    Your callback logic seems okay with the snippet we are given, but your code seems like it has some unknowns. How are you calling `buildDialog` and where is `this._id` coming from? – loganfsmyth Dec 28 '16 at 18:56
  • these unknowns are defined in the parent class. I ve checked the codes. all correct. I am searching for a solution to call the functions defined in variables also in another functions. It seems that the variable content goes off when leaving the scope. – user7351112 Dec 28 '16 at 19:15
  • @leo No, none of these functions are using `this`, so it's irrelevant. – Bergi Dec 28 '16 at 19:33
  • What exactly do you mean by "*But when I leave the scope the script engine says undefined or not a function.*"? Where does it throw (what line, in which exact code)? What is the exact error message you are getting? Please provide the whole code that is necessary to reproduce the problem. – Bergi Dec 28 '16 at 19:35
  • Are you confusing variables with properties? – Bergi Dec 28 '16 at 19:35
  • @Bergi When I leave the constructor scope and use typeof on that property. – user7351112 Dec 28 '16 at 19:56
  • Are you sure that the constructor ran before the method where it doesn't work, and are you sure that they were applied to the same instance? Please show us your `Dialog` class and the call to `buildDialog` – Bergi Dec 28 '16 at 20:01
  • I located the problem to exactly _okEvent and _cancelEvent. base class is now added to question post – user7351112 Dec 28 '16 at 20:19
  • Can you post the exact error text including the name of the variable & showing which line of code is throwing the error. – PMV Dec 28 '16 at 22:53
  • And, for the reference, your use of `that` in your third code snippet is meaningless. The pattern you are emulating does that in order to capture the new `that` variable in a closure, but in your code, your closures are created in the context where you are calling `new DialogOkCancel`. Those may need to be bound, if there is a more complex OK or Cancel handler that you're not showing us. – PMV Dec 28 '16 at 23:39
  • When I click to a dialog button it says: Uncaught TypeError: Cannot read property 'apply' of undefined at HTMLButtonElement. (jquery-ui.min.js:11) at HTMLButtonElement.dispatch (jquery.min.js:3) at HTMLButtonElement.q.handle (jquery.min.js:3) – user7351112 Dec 29 '16 at 11:35
  • When I take the `code`(buildDialog) content and put it to constructor and use okEvent, cancelEvent instead of this._okEvent, this._cancelEvent it works. – user7351112 Dec 29 '16 at 11:37
  • Hmm if it's saying that it can't find a property `apply` of undefined, the actual function isn't making it all the way to the handler. How are you invoking the buildDialog method? – PMV Dec 29 '16 at 15:19

0 Answers0