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 sometimes 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';