I've posed this in the PhoneGap Google group, and it hasn't received any responses there, so I'm leaning toward it being a jQuery Mobile issue more than PhoneGap. Here's the other thread:
Basically, when my jQuery Mobile/PhoneGap app goes into the background in any version of iOS with multi-tasking, either the web browser, HTML5, jQuery Mobile, or something else is caching the data that's updated by AJAX. The applicationCache doesn't seem to contain anything, so I think HTML5 is out.
Only the dynamic data loaded by jQuery's $.ajax function does not update. I'm having trouble debugging as the issue is very hard to duplicate, but seems to pop up without fail when I go to test the app during a live event where data is updating "real time".
"Ajax navigation was problematic on BB5 because it lacks hashchange support for the history stack whcih essentially broke the back button behavior so disabling this feature resolves that issue and also speeds up the user experience."
How do I go about disabling back button functionality? jQuery Mobile navigation doesn't seem to work (ie, doesn't result in a full page refresh, not just lacking transitions) in the BlackBerry 5.0 emulator.
jQuery Mobile Beta 1 breaks the core jQuery click handler in iPhone (tested in Safari and inside a PhoneGap native app), so I'm temporarily going to rebuild using core JS.
This happens fairly randomly - when I visit a jQuery Mobile page that contains dynamic content (content appended using AJAX) that also contains an image or a video, the jQuery mobile header disappears, and the footer jumps from the bottom of the page content to the bottom of the visible window, and stays there (over the content as you scroll).
It happens randomly, on the same content. Visit once and the header & footer stay where they should, come back and the above issue occurs. It also doesn't occur on pages with dynamic content that doesn't contain images or video. The only CSS I have applied to these elements is a max-width: 100% to make sure they stay within device viewports, and I've tested without this rule and the issue remains.
I've attached 2 images - the S60 5th edition emulator and the webOS 2.1 emulator, both running my sample jQuery Mobile project. I've removed all the content using PhotoShop, so we can view just the interface issues.
In S60, it looks like none of the rounded edges on the buttons are supported, and a lot of the CSS3 in general doesn't work like gradients, text shadow, etc.
In webOS, the background color and gradient don't work, rendering a black background.
In both, it looks like the edges of buttons are grainy, which is something I've experienced in the Android emulator as well. Are these issues jQuery Mobile issues, or are they artifacts/issues with the emulators rendering capabilities?
I've got a jQuery Mobile site, which is exhibiting an interesting behavior. When the index.html file has a page id of "index", and you navigate to an interior page, then back to "index.html", when viewing the source real-time in Firebug, the framework appends a new "index" div to the page, thus breaking any jQuery id selectors (because there are duplicate ids). You end up with the original index.html (data-url="index", url="index"), and a second div (data-url="index.html", url="index.html"), but both contain <div id="index"...
I've found the workaround for this to be giving your index.html file an id of index.html, so in index.html:
<div data-role="page" id="index.html">
In this case, the framework recognizes any links on interior pages linking back to index.html as the same, and returns the user to the original div, while fixing the duplicate div issue.
My question is: is this the intended behavior, and if so, should it be documented in the jQuery Mobile documentation? Seems like it may cause a fair bit of confusion.
Is it bad practice to use the same ID in separate jQuery Mobile pages, since they will appear on the same page via AJAX? For example, if I have two separate HTML files linked together in a jQuery Mobile site, both containing an element with the same ID (for example <div id="example">), could they potentially cause conflict when jQuery Mobile appends the content from the second page into the original document? Or is this just my desktop web experience saying we should never have two ID tags on the same page?
I have a jQuery AJAX request that pulls jsonp data from another server. This data is passed to a callback function, and then the data is appended to a div.
When viewed in Firebug, data appears as entities (as it is encoded in jsonp):
<p><strong>
but when viewed in the browser window, the HTML is displayed, rather than being rendered:
<p><strong>
I'm a bit confused, shouldn't the browser render entities as usual, or is there some type of additional processing required in jQuery when returning encoded data from a server via AJAX?
In the graded browser support chart (http://jquerymobile.com/gbs/) PhoneGap is similar, but not quite as good, as the Native column. My initial assumption is that PhoneGap uses the default browser for each device, which would mean it doesn't require its own column in this chart. Is this not true? I noticed John Resig mentions PhoneGap "uses WebKit as its rendering engine" in this presentation (http://www.slideshare.net/jeresig/testing-mobile-javascript?from=ss_embed), which would imply the PhoneGap folks developed their own WebKit browser that works across popular mobile devices.
I'm building a mobile site using jQuery Mobile, and I need to include widgets that use document.write. When I test embedding the widget code in a page using a collapsible content block, the widgets overwrite the entire page. I'm aware that any document.write that doesn't fire inline (after the doc is done loading) actually calls window.open, which I assume is where the issue is coming from. Here's a sample of the widget code: