reconstruct not working

I am trying to update a grouplist on success of ajax.

function update_grouplist_items(){
location.reload();
console.log("calling1");
window.setTimeout(function(){
    $$("cfg").reconstruct();
}, 3000);
}

//// config tab, to store in db
function add_submit(conf,selected_rows){
                console.log(selected_rows.length);
                if(conf == "") {alert("Please enter Config Name");}
                else if (selected_rows.length == 0) {
                        alert("Please select atleast two jobs");}
                else {
                        $$("win2").hide();
                        alert("Successfully Saved");
                        data = {conf:conf,sel:selected_rows};
                        $.ajax({ type: "POST",xhrFields:{withCredentials: true},
                                  beforeSend: function(request){request.setRequestHeader("Content-type", 'application/json');},
                                  url:savedataUrl,
                                  data : JSON.stringify(data, null, '\\t'),
                                  processData: false,
                                  success: update_grouplist_items,
                        });
                }
};

“cfg” is my grouplist. However reconstruct works if i have the console window open. Any help would be appreciated

Hi,

reconstruct is a method of layout-based components: layout, form, accordion, etc. Grouplist has refresh method. But if you call location.reload(), grouplist will be re-initialized, so can you please clarify, is there a reason for the delayed refresh?

I have added location.reload() because reconstruct was not working. And when i added refresh method, i get an error saying grouplist doesn’t have the method refresh().

Also i am trying to refresh on successful AJAX call. The component never gets repainted

Can you please provide a sample where the issue can be tested and specify the version of Webix?

Also, is there a chance that “cfg” is the ID of parent layout? All data components and controls (including ui.grouplist) have refresh, but the mentioned error will occur if this method is applied to the layout.

var grp_list = {view:"grouplist",id:"grouplist",select:true,
	   templateBack: "Back",
	   templateItem: "#selection#",
       scheme:{
             $group:{
             by:'config'
             },
       },
       url: retrive_config,
}



var cfg = { id:"cfg",
            rows:[
                {view:"toolbar",
                    elements:[
                        {view:"text", id:"grouplist_input",label:"Filter by my watch list",labelWidth:170}
                    ]
                },
                { view: "layout",
                    cols:[
                        { view:"button",value: 'ADD CONFIG',align:"center",inputWidth: 250,click:function(){ showForm("win2")}},
                        { view:"button",value: 'DELETE SELECTED',align:"center",inputWidth: 250,click:function(){ remove_data()}},
                        { view:"button",value: 'DELETE CONFIG',align:"center",inputWidth: 250,click:function(){ showForm("win1")}},
                    ]
                },
                {
                    body: grp_list
                }
            ]
    }

This is my grouplist and the cfg layout. refresh() methods doesn’t give error if i use it like $$("grouplist").refresh(). But it doesn’t repaint the grouplist on successfull ajax call

Using webix_4.3.js and Internet Explorer 7

Webix is compatible with IE8+

$$("grouplist").refresh() is the only correct usage of this method.
As far as I can see, it works correctly in the supported browsers.
What’s the desired result of the repainting? I don’t see any applied changes before calling refresh() in the provided code.

Got you. Will try with IE8 and above.

function add_submit(conf,selected_rows){
                console.log(selected_rows.length);
                if(conf == "") {alert("Please enter Config Name");}
                else if (selected_rows.length == 0) {
                        alert("Please select atleast two jobs");}
                else {
                        $$("win2").hide();
                        alert("Successfully Saved");
                        data = {conf:conf,sel:selected_rows};
                        $.ajax({ type: "POST",xhrFields:{withCredentials: true},
                                  beforeSend: function(request){request.setRequestHeader("Content-type", 'application/json');},
                                  url:savedataUrl,
                                  data : JSON.stringify(data, null, '\\t'),
                                  processData: false,
                                  success: update_grouplist_items,
                        });
                }
};


var form = {

            rows:[
                {view:"text", id:"config", label:'Enter CONFIG', labelWidth:100,name:"USER CONFIG" },
                {view:"datatable",borderless:false,id:"dtable_popup",
                    columns:[

                            { id:"state", header:["state",{content:"textFilter"}], sort:"string", fillspace:true},
                            { id:"name", header:["name", {content:"textFilter"}], sort:"string",fillspace:true},
                        ],
                    select:"row",
                    multiselect:true,

                    on:{
					onSelectChange:function(){
						text = $$("dtable_popup").getSelectedId();
					}
				},
                },
                { view : "layout",
                cols :[
                        {view:"button",value:"Submit",
                            click:function(){
                                var conf = $$("config").getValue();
                                console.log("test 1");
                                console.log(text);
                                for(var i =0; i<text.length; i++){
                                    selected_rows[i] = ($$("dtable_popup").getItem(text[i])).name;
                                }
                                console.log(selected_rows);
                                add_submit(conf,selected_rows);

                            }
                        },
                        {view:"button",value:"Cancel",
                            click:function(){
                            $$("win2").hide();
                            }
                        }
                ]},
            ]
}




var grp_list = {view:"grouplist",id:"grouplist",select:true,
	   templateBack: "Back",
	   templateItem: "#selection#",
       scheme:{
             $group:{
             by:'config'
             },
       },
       on:{
           onSelectChange: function() {
           obj = this.getSelectedItem();
           console.log(obj.selection);
           }

       },
       url: retrive_config,
}





    var win_window = webix.ui({
            view:"window",
            id:"win2",
            position:"center",
            width:1000,
            height:500,
            modal:true,
            head:"ADD USER CONFIG",
            body:webix.copy(form)
        });





     var cfg = { id:"cfg",
            rows:[
                {view:"toolbar",
                    elements:[
                        {view:"text", id:"grouplist_input",label:"Filter by my watch list",labelWidth:170}
                    ]
                },
                { view: "layout",
                    cols:[
                        { view:"button",value: 'ADD CONFIG',align:"center",inputWidth: 250,click:function(){ showForm("win2")}},
                        //{ view:"button",value: 'DELETE SELECTED',align:"center",inputWidth: 250,click:function(){ showForm("win3")}},
                        { view:"button",value: 'DELETE CONFIG',align:"center",inputWidth: 250,click:function(){ showForm("win1")}},
                    ]
                },
                {
                    body: grp_list
                }
            ]
    }

Above is my entire code, so cfg has a button ADD CONFIG and GROUPLIST, when clicked on it, a new window $$(“win2”) is opened, which has a form to submit. When submitted, the data from form is stored in db using AJAX and after 3 seconds i want to update the data from db in UI. So i want to repaint the entire $$(“cfg”) component. Everything works fine if i keep the developer console open.

function update_grouplist_items(){
window.setTimeout(function(){
//location.reload()
$$("cfg").reconstruct();
}, 3000);
}

This is the missing code