3

I have a web application that is designed to run on desktops and mobile device like the iPhone. It's always worked fine on iOS devices, until we upgraded one of our devices to iOS6 recently. Now we're seeing a weird bug that seems to be specific only to Safari on iOS6. It still works OK on iOS5 Safari, and it works OK on iOS6 Chrome.

The bug seemingly has to do with the way we are querying the server for updates. We've set up an Ajax call to occur every 5 seconds. The Ajax call returns new data, and the client side updates with the new data. The behavior we are seeing now in Safari/iOS6 is that the call happens instantly when the previous call returns, and the result is a page that is constantly refreshing and repainting, making it unusable. The little spinner is always going as well, making it look like the page never stops loading.

Here's the client-side JavaScript code setting it up:

$(document).ready(function(){

   getUpdates();
   var refresh = 5000;
   setInterval("getUpdates()", refresh);

});

function getUpdates() {
    $.post("status.jsp", {}, function(status){
       // do client-side rendering here
    }, "json");
}

Is this a bug in Safari? A bug in my code? Is there a workaround? My web app is useless on iPhones now, not a good situation. Thanks!

bluedevil2k
  • 9,366
  • 8
  • 43
  • 57
  • 1
    ios6 safari caches ajax results. See this [question](http://stackoverflow.com/questions/12506897/is-safari-on-ios-6-caching-ajax-results) – Mark Meyer Oct 31 '12 at 16:29
  • 1
    **fyi** You can change `setInterval("getUpdates()", refresh);` to `setInterval(getUpdates, refresh);` to prevent `eval` from being used. – Andreas Louv Oct 31 '12 at 16:41
  • NuclearGhost, that fixed it, can you put it in an answer and I can accept it and provide some comments? – bluedevil2k Oct 31 '12 at 16:45

1 Answers1

2

My two cents you should not use setInterval but rather recursively call getUpdates using setTimeout. This way your requestes are always 5 seconds apart rather than having them stack on top of each other if the server takes a long time to respond or your ui is busy processing.

$(document).ready(function(){
    getUpdates();
});

function getUpdates() {
    $.post("status.jsp", {}, function(status){

        // do client-side rendering here

        setTimeout(getUpdates, 5000);
    }, "json");
}
Ben Rabidou
  • 355
  • 2
  • 5
  • Did this help? I am having the always spinning issue on safari on ios6 and up, and am wondering if this answer fixed it on your mobile app? – Beckyjoon Apr 23 '14 at 16:58