Calls to update DOM are ignored in Phonegap app with iPhone 3G running iOS 3.0

I am using phonegap/jquery/jqtouch to develop an iPhone app. When testing the app with an iPhone 3G running iOS 3.0.1, jquery calls that make changes to the DOM (such as 'append()') do not work consistently.

I have an alert call right before a call to 'append' and have another alert call right after the call to 'append'. Both alerts work consistently, but the 'append' call works randomly. Sometimes the DOM gets updated and somet开发者_StackOverflowimes it does not. The calls do not cause an error either. It is as if they are getting ignored.

On an iPhone 4 with iOS 4.0.2, the app works flawlessly.

The app needs to work for iOS 3.0 and above, so I am hesitant to upgrade the 3G phone to iOS 4.0 because I won't have a way to bring it back to iOS 3.0.1.

I have tried both a base SDK of 3.2 and 4.0. The 'iPhone OS Deployment Target' is set to 'iPhone OS 3.0'.

Does anyone have any idea what might be going on? Any tips on how to go about debugging this?

Thanks!

The code causing the issue:

var sample = $('<div></div>').text('sample');
navigator.notification.alert("test 1", "Test", "Dismiss");
$('#test').append(sample);
navigator.notification.alert("test 2", "Test", "Dismiss");

Both alerts "test 1" and "test 2" appear, but the text "sample" only appears sometimes.

I found the following thread that describes the issue. The problem is caused by the slowness of the phone and accessing the DOM: http://groups.google.com/group/phonegap/browse_thread/thread/81460667fd771735

Based on that thread, I am going to try out the following recommendation and will post here whether it worked: $('mySelector').get(0).innerHTML = 'my html code';

---

There is a bug in innerHTML in mobile safari/uiwebview (at least 3.2 and below): http://blog.johnmckerrell.com/2007/03/07/problems-with-safari-and-innerhtml/

I used the workaround from that blog.

---

We solved this by overriding the PhoneGap.run_command function.

PhoneGap.run_command = function() {
  if (!PhoneGap.available || !PhoneGap.queue.ready)
    return;

  PhoneGap.queue.ready = false;

  var args = PhoneGap.queue.commands.shift();
  if (PhoneGap.queue.commands.length == 0) {
  clearInterval(PhoneGap.queue.timer);
  PhoneGap.queue.timer = null;
  }

  var uri = [];
  var dict = null;
  for (var i = 1; i < args.length; i++) {
    var arg = args[i];
    if (arg == undefined || arg == null)
    arg = '';
    if (typeof(arg) == 'object')
      dict = arg;
    else
      uri.push(encodeURIComponent(arg));
  }
  var url = "gap://" + args[0] + "/" + uri.join("/");
  if (dict != null) {
    url += "?" + encodeURIComponent(JSON.stringify(dict));
  }

  // Replaced document.location=url with these three lines to prevent the PhoneGap+innerHTML bug
  var iframe = document.createElement("IFRAME");
  iframe.setAttribute("src", url);
  var body = document.getElementsByTagName("BODY")[0];
  body.appendChild(iframe);
  body.removeChild(iframe);
};