Webix Jet Asynchronous UI loading problem

Webix JS
1

Hi,

Could anyone please help with this issue? I’m using Webix Jet. I’m trying to build a form based on JSON data retrieved from Ajax call. The idea is to only return the $ui layout after receiving the data and building the form.

I’m getting an error “core.js:185 Uncaught RangeError: Maximum call stack size exceeded”

My code is as follows:

define([], function() {
    return webix.ajax("core.php/permissions/get").then(function(data) {
        //initialize variables
        var layout, permission, permissions;
        
        //get JSON data
        permissions = data.json(); //
        /*[{"id":"66","name":"Accounts - Live","description":"Create a live client account","key":"accounts_live"}]*/
        
        //form elements
        var elements = [
            {view: "text", name: "name", label: "Name"},
            {view: "label", label: "Description", height:30},
            {view: "textarea", name: "description", height: 70},
            {view: "label", label: "Role permissions", height:30},
            //{view:"checkbox", label:"First check", value: 1, name: "chk_a"},
            //{view:"checkbox", label:"Second check", value: 1, name: "chk_b"},
            //{}
        ];
        
        //console.log(permissions);
        //add checkboxes to the form elements
        for (i = 0; i < permissions.length; i++) {
            permission = permissions[i];
            console.log(permission);
            elements.push({
                view: "checkbox",
                label: permission.name,
                value: 1,
                name: "check_" + permission.id
            });
        }
        //add space at the bottom of the form
        elements.push({});

        //build the form and add the dynamically built elements
        layout = {
            view: "form",
            id: "role:edit",
            elementsConfig: {
                labelWidth: 130
            },
            scroll: true,
            elements: elements,
            rules:{
                "name":         webix.rules.isNotEmpty,
                "description":  webix.rules.isNotEmpty
            }
        };

        return {
            $ui: layout
        };
    });
});
2

I eventually resorted to using a synchronous Ajax call and that solved the issue, but it feels wrong to use that workaround since my original code should work according to the Webix Jet docs unless I missed something

3

Hi, check please the following branch of the Webix Jet demos on Github : GitHub - webix-hub/jet-demos at 13_async_ui_config.

The view/data.js file demonstrates they way you can build ui asynchronously.

4

I’m getting an error “core.js:185 Uncaught RangeError: Maximum call stack size exceeded”

The error can be related to circular references in the data which view returns. ( the core.js will try to make a copy of the provided data, and will fail if view config has circular self-references)
The above code looks valid, though.

5

Thank you. Yes I am aware that the error I mentioned is typically found when functions recursively calls itself. I could just not find where it happened in my code so I suspected a flaw with core.js.

I will investigate the code example mentioned by Helga (thanks for that) and see if I can get my original code to work as expected. What I find interesting is that my current code (which now works but not the way I would prefer) basically now uses an ajax call in sync mode:

define(["views/webix/tinymce"], function() {
    data = webix.ajax().sync().get("core.php/permissions/get");
    permissions = JSON.parse(data.responseText);
    //loop through permissions to build the form elements
    //add newly built elements to form view
    //return the form layout
    return { 
        $ui: form 
    };
});

This hints to me that the issue has something to do with normal asynchronous Ajax calls. I suspect a problem in core.js regarding the promise principle in my original code example I listed in my original post.

6

I will double check the logic of core.js, but the similar code ( returning promise from the view handler ) work in many places on our side.

7

Is there a way for me to create a snippet of an example of the above situation but using Webix Jet?

8

For is best used in the controller ， return JsonResult