Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

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

— asked June 22nd 2010 by Carlos Mosqueda
  • android
  • data
  • refresh
  • xhr
0 Comments

7 Answers

  • try only xhr.setTimeout(120000);

    and in xhr.onload put your code like:
    var viewDate = new Date(); var viewTime = viewDate.getTime();

    — answered June 22nd 2010 by Guillaume LAFOUTRY
    permalink
    0 Comments
  • 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?

    — answered June 22nd 2010 by Carlos Mosqueda
    permalink
    0 Comments
  • You're partially correct - setInterval is similar to setTimeout, 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
    
    — answered June 22nd 2010 by Kevin Whinnery
    permalink
    0 Comments
  • So Kevin,
    If i understand what you saying and from my example above I would put

    setInterval(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?

    — answered June 22nd 2010 by Carlos Mosqueda
    permalink
    0 Comments
  • So I wrapped my
    xhr.onload = function() { //Code is here }

    inside of a function and called the function.
    more or less

    setInterval(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

    — answered June 22nd 2010 by Carlos Mosqueda
    permalink
    0 Comments
  • 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?

    — answered July 1st 2010 by Kyle Borg
    permalink
    1 Comment
    • Kyle,

      I just abandoned the setInterval idea and wrapped the whole thing in a function and called it using a double tap or swipe or whatever you want to do. I added the eventListener to the window. And what I had to do was you add the content to the window, then you have to remove it everytime the call is made. So you set your variables globally at the top of your js document outside the function.

      We put an if statement in to see if the first time loaded was = true then run then add the items to the stage, else .remove the views, labels, table or whatever you are showing your data with and then add it at the end.

      You actually have to remove the elements before adding them back onto the stage

      Decently complicated and sucked trying to figure out.
      In essence, the issue with using setInterval is doing is running the function and getting the data and because there is no ".remove" in the function we had to do that.

      Thing to note, since Android pauses an application when not in use, even if you have setInterval, it will not keep the interval going and possibly cause a memory leak because when it starts up again, there is an issue with the interval. Just FYI.

      — commented July 2nd 2010 by Carlos Mosqueda
  • 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

    — answered July 2nd 2010 by David Ashwood
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.