How to refresh the spreadsheet every 10 seconds.

If two or more persons are on a same instance of a spreadsheet. If a User 1 makes a change to the spreadsheet, the User 2 in some other location in some browser should see the changes updating in the spreadsheet.

Anyone there who can give a hint.

You can reload the data as:

setInterval(function(){
     $$("mySpreadsheet").load(url);
    //or $$("mySpreadsheet").parse(data);
}, 1000);

Not working. It doesn’t loads the updated data from db.

@Pug_mac86 try

   setInterval(function(){
           $$("mySpreadsheet").load(url);
            //or $$("mySpreadsheet").parse(data);
             $$("mySpreadsheet").refresh();
      }, 1000);

OOps!! Not Working
Javascript Error: 01_init.html:65 Uncaught TypeError: Cannot read property ‘load’ of undefined

setInterval(function(){
$$(“test”).load(“01_init.html”);
//or $$(“mySpreadsheet”).parse(data);
$$(“test”).refresh();
}, 5000);

Nothings happening when i change the values in the database.

You can try clearing the current spreadsheet first:

setInterval(function(){
   $$("test").reset();
   $$("test").load("you_php_file.php");
}, 5000);

Yes its working now. Thanks alot dear :smiley:

But the problem is if i’m typing something it goes off after 5 seconds if i don’t save it.
Is there a code to save the code every 5 seconds.

Then I can suggest the following solution:

  • Firstly, you can call the editStop() method of the inner datatable to save the data you are typing;
  • Secondly, you need to serialize all the data from all the sheets and post it to server using webix.ajax().post();
  • Thirdly, you can tune you server script to not only save the posted data, but also return the updated data, which you will be able to access in the callback and parse to the Spreadsheet;
setInterval(function(){
   $$("test").$$("cells").editStop();
   var sheets = $$("test").serialize({sheets:true}); 
   webix.ajax().post("you_php_file.php", {data:sheets}, function(text, data){
       data = data.json();//provided you return json encoded data from server
       $$("test").reset();
       $$("test").parse(data);
   });
}, 5000);

i had put it like this to stop the sheet been unfocused. For example: if i’m typing something in the sheet 2, after 5 seconds automatically the focus changed to sheet 1.

setInterval(function(){
$$(“test”).$$(“cells”).editStop();
var sheets = $$(“test”).serialize({sheets:true});

			data.sheet = view.getActiveSheet();

			//alert(data.sheet);

			webix.ajax().post("server/get.php", {data:sheets}, function(text, data){
		       data = data.json();//provided you return json encoded data from server

		       //alert(JSON.stringify(data))
		       $$("test").reset();
		       $$("test").parse({sheets:data});
		   });
			/*$$("test").reset();
			$$("test").load("server/get.php");*/
		}, 5000);

Even there is a small issue. when i’m typing on the particular column; after 5 seconds the focus is gone to the next cell below the cell in which i was typing. Could you give me the function to not to loose focus to the next cell.

Yep, you can save the cell being edited and move focus to it after the data reload:

setInterval(function(){
   var cell  = $$("test").$$("cells").getSelectedId();
   $$("test").$$("cells").editStop();
   var sheets = $$("test").serialize({sheets:true}); 
   webix.ajax().post("you_php_file.php", {data:sheets}, function(text, data){
       data = data.json();//provided you return json encoded data from server
       $$("test").reset();
       $$("test").parse(data);
       $$("test").$$("cells").select(cell.row, cell.column);
   });
}, 5000);

Sorry. its giving error as
01_init.html:176 Uncaught TypeError: Cannot read property ‘row’ of undefined
at webix.ajax. (01_init.html:176)
at Function.webix.ajax.$callback (webix_debug.js:3084)
at XMLHttpRequest.G.r.onreadystatechange (webix_debug.js:2958)

And i’m loosing the focus of the sheet 2 to sheet 1.

You need to apply selection only if some cell was selected before data reloading. Here’s the sample which demonstrates how you can preserve the current sheet, selected area and opened editor during reloading:

https://webix.com/snippet/cc82000f

Its not working…
This is my code here.

setInterval(function(){	

				//var cell  = $$("test").$$("cells").getSelectedId();

				//alert(cell)
				$$("test").$$("cells").editStop();

				var sheets = $$("test").serialize({sheets:true}); 

				//data = view.getActiveSheet();

				//alert(data.sheet);

				webix.ajax().post("server/get.php", {data:sheets}, function(text, data){

					//alert(JSON.stringify(data))

			       data = data.json();//provided you return json encoded data from server

			       //alert(JSON.stringify(data))
			       $$("test").reset();

			       $$("test").parse({sheets:data});
			   });
				
			}, 5000);

i’m not understanding only where to put the https://webix.com/snippet/cc82000f code.

setInterval(function(){
   //save active sheet, selected area and active editor
   var active = $$("test").getActiveSheet();
   var selection = $$("test").$$("cells").getSelectArea();
   var editor = $$("test").$$("cells").getEditor();
      	
   $$("test").$$("cells").editStop();
   var sheets = $$("test").serialize({sheets:true}); 
 
    webix.ajax().post("you_php_file.php", {data:sheets}, function(text, data){
      data = data.json();//provided you return json encoded data from server
      $$("test").parse({sheets:data});
            
      //show the last active sheet
      $$("test").showSheet(active);

      //if a cell was selected before reload - select it back
      if(selection)
         $$("test").$$("cells").addSelectArea(selection.start, selection.end); 
      //if a cell was edited before reload - reopen editor
      if(editor)
         $$("test").$$("cells").editCell(editor.row, editor.column); 
   });
}, 5000);

OOPs!!.. Lots of issues with that… Its not working…

Please guys any update on the bug fix.

In fact, everything works smoothly from my side: https://webix.com/snippet/3b834cd2

Just please ensure that your server provides the data in the correct format.