How to NOT use dataProcessor for offline app

Discontinued products DHTMLX Touch
#1

I want to use dhtmlx to produce a web app which works when no internet connection is available. I’ve got loading data from the server and navigating pages offline working just fine thanks to “dhx.proxy” but I don’t understand how to use the proxy facility to capture data to be sent to the server.

Note: I do NOT want to use dataProcessor or dhtmlxConnector because I already have server side PHP code for serving data and updating the database etc. (this is an existing app I’m re-writing for iPad users).

Given this code:-

save_data = new dhx.proxy({
  url: "save.php",
  storage: dhx.storage.local
});
dhx.ui({
  view:"form", id:"myform", elements:[
    { view:"text", label:"Label 1", id:"field1" },
    { view:"text", label:"Label 2", id:"field2" },
    { view:"text", label:"Label 3", id:"field3" },
    { view:"button", label:"Save", click:"save_form" }
  ]
});
function save_form() {
  save_data.post($$('myform').getValues(),{
    error: function(r,x,h){
      alert('ERROR: '+r);
    },
    success: function(r,x,h){
      alert(r);
    }
  });
}

Saving the form to the server works fine when the iPad is connected, and an alert box appears displaying a reply from the server, but nothing at all happens when it’s not connected, no alert box is displayed, not even showing "ERROR: ".

What exactly is supposed to go in the error and success callbacks of the proxy.post() method?

#2

Hi,
yes, there is no event for “server unavailable” error.
Please, contact us at support [at] dhtmlx.com, we will provide you updated package.

#3

Received the new package, thanks very much, but could you give me an example of how to use it?

#4

Hi,
sample is exactly the same as you provided in first post.

#5

OK, tested, and working perfectly, many thanks for your help :smiley:

#6

Sorry, I need to bump this, because I’m now going round in circles trying to understand how to manipulate and synchronise locally stored data and data on the server.

Suppose I’m posting data back to the server as described above, but I also want to display a list of items I’ve already added to the database.

I have a proxy connection for getting data from the server :-

list_data = new dhx.proxy({
  url: "data.php",
  storage: dhx.storage.local
});

I have a proxy connection for sending data back to the server :-

save_data = new dhx.proxy({
  url: "save.php",
  storage: dhx.storage.local
});

I have a list for displaying data :-

dhx.ui({
  view: "grid",
  id: "list_data",
  url: list_data
});

I have a form for adding new records :-

dhx.ui({
  view: "form",
  id: "form_data"
});

And a function for sending data to the server :-

function save_form() {
  var data = $$('form_data').getValues();
  save_data.post(data,{
    error: function(r,x,h){
      alert('Offline, data added to local storage');
      $$('list_data').add(data);
    },
    success: function(r,x,h){
      alert('Online, data added to server');
    }
  });
  $$('list_data').refresh();
}

I’ve added new data to the list when offline. But I’ve only added it to the list, not the actual (local) data store. If I refresh the page, whilst still offline, the list no longer contains the new data I added because it’s reloading the cached copy from the “list_data” proxy, which contains whatever it held the last time the device was online.

How do I add a new record to local storage?

I can see in the documentation there is a “dhx.DataStore” object which has an add() method for adding data to it, but how do I use this?

What I’m trying to do is create an app that adds (and removes) data from a data store, whether that be a backend database when online or local storage when offline, and for the app to work, and appear to the user to work, the same whether it’s online or offline.

#7

Hi,
technically it works correcly: there is dhx.proxy which implements loading data, there is dhx.proxy object which implements saving. They are independent and proxy-object don’t know if user sends request to save/update data (it may be not save request for example). So it can’t update local data. DataProcessor implements local data updating, but there is no way to implement it for standalone save-mechanisms.

You may take local data, deserialize it, change data set, serialize it back and tell dhx.proxy object to save it. To implement it you may use something like this:

var data = list_data._from_storage('load;data');
try {
	data = 'dhx.temp = ' + data;
	eval(data);
	data = dhx.temp;
} catch(e) {}
// now data is a JSON-object which you may modify as you like
// after editing you have to save it back:
data = window.JSON.stringify(data);
list_data._to_storage({'load;data': data});

There is one more problem, compressed code version is used renamed private methods. So methods list_data._from_storage, list_data._to_storage don’t work in touchui.js, but work in touchui_debug.js. To implement it’s correct working for compressed version you should use corresponding short names:

//instead of _to_storage call
list_data.Ab({'load;data': data});

//instead of _from_storage call
list_data.qa('load;data');
#8

Only just been able to test this, and it works great, so once again thanks for all your help.

#9

I was trying to use proxy in very basic setup, just as in example with ajax

	var url_proxy = new dhx.proxy({
		url: "myurl",
		storage: dhx.storage.local
	});
	var params = ['latitude=0','longitude=0']; 
	
	url_proxy.get( params.join('&'), {
		error:function(text, xml, XmlHttpRequest){
			console.log('err text: ' + text);
		},
		success:function(text, xml, XmlHttpRequest){
			console.log('ok text: ' + text);
		}
	});

the ajax part works, but in my chrome dev tools I see, there is absolutely nothing saved in local storage (I tried session and cookies with same results). Is there still special dhtmlx build need for this to work?

#10

Hi yureckey!
Proxy scheme support several scenarios:

  1. proxying ajax requests: if request fails (proxy object thinks that application is in offline mode) then parameters of request are saved in local storage and it will be repeated later
  2. proxying dhtmlx components: proxy object loads data and if server is available then saves data into local storage. Also it stores failed saving requests (to update/insert/delete item in component).

So it works properly for your scenario.

#11

Just a note as this in an old thread I started …

In the end I didn’t use this method of interacting with the server. The dhx.proxy() function works asynchronously, meaning it may (and often does) get “new” data from the server before it’s finished sending updates to the server, meaning the new data is in fact old data.

I needed to send queued updates to the server, in the order they were presented, and only when that process had completed get new data from the server. I did this using dhx.ajax().sync().post(), and for local storage I use a Web SQL database. As I’m a database programmer anyway using SQL statements was a more familiar concept. Obviously this means my app only works on browsers that support Web SQL, but this includes Chrome and Safari (and their mobile versions), so that’s basically most tablets and smartphones covered if not all desktops.