CORS + Android Webview, does not work on the device (but works on the emulator)

Question

I have a working HelloWorld phone program with a jquery mobile that can be sprinkled as described here: http://jquerymobile.com/demos/1.1.0/docs/about/getting-started.html . I added a bit of javascript 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 fine on emulator (2.3), jquery.com loads through the jquery demo demo. However, on real 2.3 Android devices (T-mobile G2 runs Cyanogen, Galaxy SII, Galaxy Player), calling changePage () does nothing.

Answer 1

Try mobileinit instead of pageinit . Since the event you are attached 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 .

Answer 2

Calling the $.mobile.changePage() function on the pageinit function sounds like a bad idea because it should cause an infinite loop. The $.mobile.changePage() function initializes the page specified as the target parameter, so every time you call $.mobile.changePage() , you also 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