$$("id") not working outside the scope of webix.ui() function

Webix JS
1

Hello everyone, I am kinda new to webix, I’ve been following the interactive tutorials, I am stuck now on how to get an element by id using $$(“id”) function, but it seems only works inside the webix.ui function, if I try to get an element outside the function call it gives me an Uncaught TypeError: Cannot read properties of undefined (reading ‘getChildViews’).

HTML file looks like this:

Testing Webix 
    <!--Include Webix styles and Javascript library-->
    <link rel="stylesheet" type="text/css" href="./Webix/webix/codebase/webix.css" media="screen">
    <script type="text/javascript" src="./Webix/webix/codebase/webix.js"></script>

    <!--Application goes here-->
    <script type="text/javascript" src="./ui.js"></script>
    <script defer type="text/javascript" src="./test.js"></script>

</head>
<body>
</body>

ui.js file looks like this:
let ui = {
id: “root_view”,
rows:[
{
view:“toolbar”,
name: “my_toolbar”,
id:“top_toolbar”,
elements:[
{ view:“button”, id:“btn_save”, minWidth:65, value:“Save”},
{ view:“button”, id:“btn_del”, minWidth:65, value:“Delete”},
{ view:“button”, id:“btn_clear”, minWidth:65, value:“Clear”},
{ gravity:3 }
]
},
{ cols:[
{
view:“form”,
id:“film_form”,
gravity:0.5,
minWidth:200,
// elements == rows, cols can be declared instead
elements:[
{ view:“text”, name:“title”, id:“inp_title”, label:“Film Title” },
{ view:“text”, name:“year”, id:“inp_year”, label:“Release” },
{}
]
},
{view:“resizer”},
{ minWidth:200 }
]}
]
}

let views = {};
webix.ready(function (){
webix.ui(ui);

views = webix.$$("root_view").getChildViews();
console.log(views);

});

console.log(views);
console.log(webix.$$(“root_view”).getChildViews());

test.js file looks like this:

console.log(views);

the console log is like this:
ui.js:42 {}
ui.js:43 Uncaught TypeError: Cannot read properties of undefined (reading ‘getChildViews’)
at ui.js:43:34
(anonymous) @ ui.js:43
test.js:1 {}
ui.js:39 (2) [e, e]

It looks to me as if all the call to webix.ready function is executed the last thing. how can I fix this? any help is appreciated, thanks in advance :slight_smile:

2

Hello kafi1986

The $$ function is used to access Webix components by their ID. However, it only works correctly after the UI has been initialized. When you try to access components outside the webix.ready() function or before the UI is fully rendered, it may return undefined , leading to the error you’re seeing.

Make sure that all your access to Webix components is done within the webix.ready() function or after the UI has been created:

webix.ready(function () {
    webix.ui(ui);
    
    views = webix.$$("root_view").getChildViews();
    console.log(views); // This should work
});