4

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...

enter image description here

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...

enter image description here

(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?

BruceHill
  • 6,954
  • 8
  • 62
  • 114
  • Interesting, is there some functionality to reload the page? Maybe the jQM libraries are taking longer to load in NL over a 3G connection – Phill Pafford Oct 28 '11 at 14:49
  • Hi Phill. Yes, I have a button on one of the tabs that executes a refresh of page displayed in the webview. We have confirmed that the same problem occurs within Safari on the iPhone; again, only with 3G, with WIFI Safari it loads correctly. I found other people mentioning that CSS files don't always load correctly with 3G, but have not found anyone explaining what gets changed in the CSS with the 3G connections. I have found the following question that seem to refer to the same problem I am having: http://stackoverflow.com/questions/6204765/iphone-3g-browser-rendering-problems-wifi-is-fine – BruceHill Oct 28 '11 at 19:58

3 Answers3

10

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!

BruceHill
  • 6,954
  • 8
  • 62
  • 114
  • Unfortunately it appears that JQuery Mobile isn't hosted on Google's CDN at this moment in time. – Joseph Woodward Oct 11 '12 at 09:16
  • To resolve the issue I only had to make use of Google's CDN for `jQuery`. 'jQuery Mobile` I hosted myself and this wasn't a problem. But, admittedly, the version of `jQuery Mobile` that I am using is fairly old now, so I am not sure if this issue arises with the latest version of `jQuery Mobile`. – BruceHill Oct 11 '12 at 10:40
0

For anyone experiencing this problem on O2 (certainly here in the UK anyway) the reason is because O2 have an "optimisation platform" which takes external CSS and Javascript files and sets them inline on the document which can cause conflicts. (source)

This URL was certainly one of the better links I stumbled upon to regarding this particular problem:

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

One of the more reliable work arounds is to modify your website's headers to return the Cache-Control: no-transform header as O2 have indicated that if this response is provided then they will not modify the headers.

You can add the following to your .htaccess file:

<files ~ "\.(html|php|js)$">
    Header add Cache-Control "no-transform"
</files>
Joseph Woodward
  • 9,191
  • 5
  • 44
  • 63
  • I realise this question is a little old now, I just thought I'd post the solution that worked for me for anyone who happens to stumble across this question after getting tripped up on it as I did. – Joseph Woodward Oct 11 '12 at 10:44
-2

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

user2935404
  • 1
  • 1