Jquery mobile page not loading correctly on Netherlands 3G connections

Question

I have a jquery-mobile application that is running inside a UIWebView in an iphone application. The webview shows the jquery-mobile page correctly, BUT only when the page is not loaded with a 3G connection. I know this sounds very weird and it is a very weird problem indeed, because if the page is loaded with a WIFI connection, it is display perfectly... here is a screenshot...

If instead my client uses a 3G connection to load the jquery mobile page, it seems that for some reason the javascripts and CSS that are needed to display the jquery mobile page are not loaded. Here is a second screenshot showing what the page looks like when it is loaded with 3G...

(Note: I know that this screenshot is not exactly the same page as the first one, but when it loads correctly it has the same styling as the first screenshot)

As you can see from the title of the page, the 3G connection that is giving this problem is in the Netherlands and my client has tried two different 3G providers in the Netherlands and encounters the same problem with both providers. If I test the application where I live, namely in South Africa, the page loads correctly with my 3G connection.

So, my question is, does anyone have any idea what could be causing the jquery mobile javascripts and CSS to fail to load on 3G connections in the Netherlands?

Answer 1

I have determined what was going wrong on the 3G connection in Holland. This problem arises because several mobile operators do content modification before delivering it to the phone and this modification breaks jQuery. From my experience and from what I have read on the internet, it seems that the following providers do content modification: O2 in UK, Vodafone in the Netherlands and T-Mobile in the Netherlands.

To see reports of other people who have been encountering issues with these 3G connections breaking javascripts look at the following links:

http://stuartroebuck.blogspot.com/2010/07/mobile-proxy-cache-content-modification.html

http://blog.gotfocussolutions.com/index.php/2011/10/jquery-mobile-doesnt-work-on-o2-3gedge-due-to-mobile-proxy-cache-content-modification/

http://bugs.jquery.com/ticket/8917

http://www.ladysign-apps.com/blog/code/javascript/jquery-does-not-load-3g-iphone-safari/

The last link listed above also gives the work around to this problem; the javascript file that is being being modified and broken by the 3G connection must be moved to an external server. So, for example, if jQuery is being broken by the 3G connection (as was the case for me), then don't serve the jquery file yourself, instead make use of a CDN like google: http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

Hope this information saves someone else the hours of frustration that this issue has cost me!