Reload data dynamically or with Javascript
How do you do this. HELP Please!
Ok
I have successfully made an application but need to dynamically reload the data. Or just reload the date every 2 minutes or so. I am using the XHR to retrieve a JSON service. Successfully parsing it and everything. Using the example from the Kitchen Sink. Small example below.
var xhr = Titanium.Network.createHTTPClient();
xhr.onload = function()
{
//Code is here
}
// open the client
xhr.open('GET','http://NiceURLforService.com/service');
// send the data
xhr.send();
How would I go about reloading or recalling the xhr function every 2 minutes in Appcelerator. I am assuming it is done with Javascript but have not been able to make it work successfully. I put my data refresh code below the xhr.send();
The code is below.
var refresh = parseInt('120000');
function viewcountdwn() {
var viewDate = new Date();
var viewTime = viewDate.getTime();
xhr.setTimeout("viewcountdwn()", refresh);
}
xhr.setTimeout("viewcountdwn()", refresh);
Help is much appreciated. I didn't know if there was a built in Appcelerator function for this or not.
Thanks
7 Answers
-
try only xhr.setTimeout(120000);
and in xhr.onload put your code like:
var viewDate = new Date(); var viewTime = viewDate.getTime(); -
Nope. I set the timer for 2 minutes or 120000 milliseconds and did what you suggested. Did not work.
I did
function viewcountdwn() {
xhr.setTimeout(120000);
}and in side the xhr.onload I put the
var viewDate = new Date(); var viewTime = viewDate.getTime();Nothing is happening in the Android emulator anyways.
Any other suggestions anyone? -
You're partially correct -
setInterval
is similar tosetTimeout
, but will be executed on a regular interval. Some permutation of the following should probably work:setInterval(function() { doMyAjaxCall(); //execute the function which fetches data },120000); //execute every 120000 milliseconds
-
So Kevin,
If i understand what you saying and from my example above I would putsetInterval(function() { xhr.onload; //execute the function which fetches data },120000); //execute every 120000 milliseconds` var xhr = Titanium.Network.createHTTPClient(); xhr.onload = function() { //Code is here } // open the client xhr.open('GET','http://NiceURLforService.com/service'); // send the data xhr.send();
Set the xhr.onload in the setInterval function. Right?
-
So I wrapped my
xhr.onload = function() { //Code is here }inside of a function and called the function.
more or lesssetInterval(function() { dataLoad(); //execute the function which fetches data },10000); //execute every 120000 milliseconds function dataLoad(){ xhr.onload = function() { //Code is here } };
It worked,kinda. The interval worked BUT it kept sending the dataLoad and visually it just listened and listened and piled the data on top of each other without clearing the previous call before it. How do you clear the call???
Thanks
-
I am having the same issue with the label data just piling on top of the previous data. How do you wipe the label text and only put the new data in?
-
Ok - you can find a fairly comprehensive snippet http://gist.github.com/460839
It's fairly well documented - but not tested (I'm busy working on something else).
Android Only:
Regarding UI controls, if you're using a tableview which is loaded with JS objects AND you have a map between the ID's returned from the server and the array index of your currentData - then as long as you don't insertBefore or insertAfter - you can use the ID map to update the rows.It's something like:
// Setup var currentData = new Array(); var indexMap = new Array(); // Data var dataItem = {ID:"001", title:"test"}; // Mapping currentData.push(dataItem); var lastID = currentData.length; indexMap[dataItem.ID]=lastID; // Load the data tableview.setData(currentData); // Now you can pull the index of the row in currentData using the map // when you need to update a row var updateRowFromServer = {ID:"001",title:"Foo"}; var position = indexMap[updateRowFromServer.ID]; // First update our source data currentData[position] = updateRowFromServer; tableview.update(position, updateRowFromServer);
Feel free to ask for clarification.
Updated: fixed a few typos in the gist above