Incorrect loading of loaded jQuery page in the Netherlands 3G connection

Question

I have a jQuery mobile app that works in a UIWebView in an iphone app. Web browsing shows the correct jquery-mobile page, but only when the page is not loaded with a 3G connection. I know this sounds very strange, and this is a very strange problem, because if the page is loaded with a WIFI connection, it displays perfectly ... here is a screenshot ...

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

(Note: I know that this screenshot does not correspond to the same page as the first, but when loaded correctly, it has the same style as the first screenshot)

As the page title shows, the 3G connection that gives this problem is in the Netherlands, and my client tried two different 3G providers in the Netherlands and is facing 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, to my question: can anyone understand what could cause jQuery javascript and CSS to not be able to load 3G connections in the Netherlands?

Answer 1

I determined what went wrong on the 3G connection in Holland. This problem occurs because some mobile operators modify the content before delivering it to the phone, and this modification interrupts jQuery. From my experience and what I read on the Internet, it seems that the following providers are modifying content: O2 in the UK, Vodafone in the Netherlands, and T-Mobile in the Netherlands.

To view reports of other people who have encountered problems with these 3G connections that violate javascripts, see 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 above also helps solve this problem; A javascript file that changes and is interrupted by a 3G connection must be moved to an external server. So, for example, if jQuery is broken by a 3G connection (as it was for me), then do not use the jquery file itself, instead use a CDN, for example google: http://ajax.googleapis.com/ajax/libs/jquery/1.6 .2 / jquery.min.js

We hope that this information will save someone else in the hours of disappointment that this problem cost me!

Answer 2

For everyone who runs into this problem on O2 (of course, here in the UK), the reason is that O2 has an “optimization platform” that takes external CSS and Javascript files and installs them inside the document, which can cause conflicts. ( source )

This URL was by far one of the best links I came across this particular problem:

http://stuartroebuck.blogspot.co.uk/2010/08/official-way-to-bypassing-data.html

One of the most reliable ways to work is to change the headers of your site to return the Cache-Control: no-transform header, as O2 indicated that if this answer is provided, they will not change the headers.

You can add the following to your .htaccess file:

 <files ~ "\.(html|php|js)$"> Header add Cache-Control "no-transform" </files> 

Answer 3

I solve this by changing the url in ajax, from .. /folder/subfolder/test.php to http: //mydomain/folder/subfolder/test.php