Ajax is not working when using getContext on datatable in Webix

Question

I'm setting up a file manager, when right clicking on folder it will popup context menu, before popup am disabling some menu item using ajax. But ajax call is not working when I right clicked on folder which arranged in datatable.

This is my code for popup menu item. Getting error when right clicking on folder which arranged in datatable.

webix.js?1.0.0:22356 Uncaught TypeError: Cannot read property 'row' of undefined"

    actions: {
            config: function () {
            var t = this.config.templateName;
            return {
            view: "contextmenu",
                    width: 200,
                    padding: 0,
                    autofocus: !1,
                    css: "webix_fmanager_actions",
                    template: function (e, i) {
                    var s = t(e, i);
                    return "<span class='webix_icon fa-" + e.icon + "'></span>" + s
                    },
                    data: "actionsData"
            }
            },
                    oninit: function () {
this.getMenu().attachEvent("onBeforeShow", function (t) { 

                    var e = this.getContext();
                    var folderid = e.id;

                $.ajax({
                    url: "<?php echo base_url()?>/Directorylist/directory_activity",
                    type: "POST",
                    datatype: 'json',
                    async: false,
                    data: {'folderid':folderid},
                    success: function (data) { 
                     var json = JSON.parse(data);
                        permission = [];
                        permission = json;
                    },
                });

            if (permission[0] == 1 && permission[1] == 0 && permission[2] == 0) {
                    $$(this).disableItem('copy');  
                    $$(this).disableItem('cut');  
                    $$(this).disableItem('paste');  
                    $$(this).disableItem('create');  
                    $$(this).disableItem('remove');  
                    $$(this).disableItem('edit');  
                    $$(this).disableItem('upload');  
                 }  
                    })
                    }
            },
                    actionsData: {
                    config: function () {
                    return [{
                    id: "copy",
                            method: "markCopy",
                            icon: "copy",
                            value: copy
                    }, {
                    id: "cut",
                            method: "markCut",
                            icon: "cut",
                            value: cut
                    }, {
                    id: "paste",
                            method: "pasteFile",
                            icon: "paste",
                            value: paste
                    }, {
                    $template: "Separator"
                    }, {
                    id: "create",
                            method: "createFolder",
                            icon: "folder-o",
                            value: create
                    }, {
                    id: "remove",
                            method: "deleteFile",
                            icon: "times",
                            value: remove
                    }, {
                    id: "edit",
                            method: "editFile",
                            icon: "edit",
                            value: rename
                    }, {
                    id: "upload",
                            method: "uploadFile",
                            icon: "upload",
                            value: upload
                    }]

                    }
                    }

But when I removed these two lines and given direct value, it works fine.

var e = this.getContext();
var folderid = e.id;

above 2 lines removed and added

var folderid = '1';

Answer 1

You lost the scope of this after the second function. Here's a time proven fix:

oninit: function () {
    var self = this;
    this.getMenu().attachEvent("onBeforeShow", function (t) {
        var e = self.getContext();
        var folderid = e.id;

See also: Javascript "this" scope

Or if you are using ES6 then you could use an arrow function:

oninit: function () {
    this.getMenu().attachEvent("onBeforeShow", (t) => {
        var e = this.getContext();
        var folderid = e.id;

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions