CORS + Android Webview, doesn't work on device (but does on emulator)

Question

I have a working HelloWorld phonegap program with jquery mobile sprinkled in as described here: http://jquerymobile.com/demos/1.1.0/docs/about/getting-started.html . I added a little javascript to this to experiment with Cross Origin Resource Sharing:

<script>
$(document).bind("pageinit", function() {
    $.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
    $.mobile.changePage("http://jquery.com");
});
</script>

This works great on the emulator (2.3), jquery.com is loaded over the jquery mobile demo. However, on actual 2.3 Android devices (T-mobile G2 running Cyanogen, Galaxy SII, Galaxy Player) the changePage() call does nothing.

Answer 1

Calling the $.mobile.changePage() function within the pageinit function sounds like a bad idea because that should cause an infinite loop. The $.mobile.changePage() function initializes the page specified as the target parameter so each time you call $.mobile.changePage() you also fire a pageinit event.

You probably want to bind to the mobileinit event to overwrite the $.support.cors variable before jQuery Mobile is initialized:

<script src="jquery.js"></script>
<script>
$(document).bind("mobileinit", function() {
    $.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
    $.mobile.changePage("http://jquery.com");
});
</script>
<script src="jquery-mobile.js"></script>

Related documentation:

• http://jquerymobile.com/demos/1.1.1/docs/api/globalconfig.html
• http://jquerymobile.com/demos/1.1.1/docs/api/events.html

Answer 2

Try mobileinit instead of pageinit . Because event you bound to is normal jQuery and for jQuery mobile the initialization event is mobileinit.

The $.mobile.allowCrossDomainPages option must be set before any cross-domain request is made so we recommend wrapping this in a mobileinit handler .