Sidebar issue

Webix JS
#1

Hi support,

my website is http://dynamixed.net/ I am using php for saving, updating, deleting records and the issue for sidebar dose not refreshing automatically,i have to refresh page after edit some value for database.
is there any class in webix that can refresh particular div?
I want sidebar content change without refreshing page or can it be possible for menu sidebar, so it does not close after selecting an item?

Please help me with this.
Looking forward to your quick response.
Thanks

#2

Hello!
Could you, please, send a snippet of your implementation? Cause the website requests a registration.

#3

Hi,

yes I am not able to attachment here, could you please provide me email where I can send you. the issue when page reload it closes and I want this toggle open even if page load.

Thanks

#4

I just need to see the place in code where the problem is.
Maybe, you could show it here?

#5

Hi,
https://webix.com/snippet/f90dd3cf

I have called side menu dynamically using php.

#6

Hello,
Sidebar has similar functionality with tree, so you can turn to tree API

is there any class in webix that can refresh particular div?
You can use clearAll() to solve it

$$("someid").clearAll();

can it be possible for menu sidebar, so it does not close after selecting an item?
Please, use onBeforeClose event
someid.attachEvent("onBeforeClose", function(){ //... some code here ... });

#7

Thanks so much for help.
I have another question, how can I add active class in dynamic div.

Thanks

#8

is there any class in webix that can refresh particular div?

You can use clearAll() to solve it

$$(“someid”).clearAll();

above solution not work in my case.
I wants to refresh sidebar menu when edit a window value in database using php.

can you please explain more for me.

#9

can you help me in this.
Please reply if have any solution.
Thanks

#10

Hello,
If you want completely replace the data, you can use clearAll() and then load(url) method (loads data from an external data source) or parse (data) method (loads data to the component from an inline data source).
If you want to change an item - please, use updateItem which updates the data item with new properties

when edit a window value in database using php
To do so, you need to subscribe to the corresponding event or assign some action to the callback of your request (in case of a custom requests for updating/saving).

Considering updates from the data component with the specified save property (datatable, tree, etc.):

  • onAfterEditStop to catch thee moment when data was changed on the client-side
  • onAfterSync (DataProcessor event) to catch the server response after request.
#11

Actually I want to show a menu item as a selected of a current page.

#12

Hello @sonu ,

If selection in sidebar depends on the server response, then the response has to contain some parameter which refers to the option which has to be selected.

On server response, you can call

$$("sidebar").blockEvent();
$$("sidebar").select(option_id);
$$("sidebar").unblockEvent();

where block/unblockEvent methods are necessary to prevent another send request.

Also, please note that Webix has several options to change the views without reloading the whole page:

  • multiview which is frequently used with sidebar,
  • iframe to render external web document,
  • Webix Jet for creating full-featured apps on Webix where only a part of UI can be reloaded/switched.
#13

it dose not work for me,
please check with below code:

on:{
	onAfterSelect: function(id){
	//alert(id);
	var url = this.getItem(id).url;
         webix.send(url);
          // this.select(url,true);
       $$("id").select(c_snapshot);
} },
	onAfterLoad: function(id){
	        //var idd = this.getItem(id).id;
			this.blockEvent();
			this.select(id,true);
			this.unblockEvent();	
        //this.select(15,true);
} }
#14

I need sidebar menu item selected after page reload.

#15

Webix components don’t provide such functionality on their own. They are designed for using in SPA, where page reloading is uncommon.

If necessary, you can save the selected record in local store and restore it in onAfterLoad event.

https://docs.webix.com/api__refs__storage.local.html

onAfterSelect: function(id){
       var url = this.getItem(id).url;
       webix.storage.put("last_selected_item", id);
       webix.send(url);
       $$("id").select(c_snapshot);
} },

onAfterLoad: function(){
        var id = webix.storage.local.get("last_selected_item");
        if (id){
            this.blockEvent();
            this.select(id,true);
            this.unblockEvent();    
      }
}