ajax working on some Android devices, not in other

Question

[LATER EDIT: As I found, the issue is related to Android version, not device type. So my code was perfect for Android till 4.0, not above. The fix is in the answer.]

I have wasted at least 2 days with this problem. I have few webpages packed as an Android application. And working perfectly on browser, and on my Android devices, including Galaxy Tab 2. But not on Nexus. I don't have it, so I kept making APK and a friend tested. The error was at AJAX. The same code work for me, do not work for him (and few others, I don't know their devices).

Below is the small test I use. As you can see, it's error free (this is my guess). Why is not working on all Android devices? I mention that I've compiled this code (the other refered files are here http://jumpshare.com/b/57O6tH) with Eclipse and also with Build.PhoneGap.com. Yet, the same result: the APK I get is working on some devices, not on others. Using *file:///android_asset/www/import.html* did not help me. The error is 404, as the file is not there. But it is!

Where is the mistake? It drives me crazy :). Why this code works fine in browser and as APK on my Galaxy Tab 2 (and on Samsung Gio), but not on Nexus (and other devices)?

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link href="jquery.mobile-1.2.0.min.css" rel="stylesheet"/>
    <script src="jquery-1.8.3.min.js" type='text/javascript'></script>
    <script src="jquery.mobile-1.2.0.min.js" type='text/javascript'></script>   
    <script type='text/javascript'>
    //$(document).ready(function() {
    $(document).bind("pageinit", function(){
        $("#buton").bind('click',function(){
            $.mobile.showPageLoadingMsg();
            $.ajax({
                url:'import.html',
                datatype:'html',
                type: 'GET',
                success:function(html){
                    $.mobile.hidePageLoadingMsg();
                    $("#result").html(html);
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $("#result").html("ERRORS:"+errorThrown+"<hr>"+textStatus+"<hr>"+JSON.stringify(jqXHR))
                    $.mobile.hidePageLoadingMsg();
                    alert('Not working!!!');
                }
            })
        });
    });
    </script>
</head> 
<body> 
    <!-- Pagina de start -->
    <div data-role="page" id="start">
        <div data-role="header" data-theme="b">
            <h1>Test</h1>
        </div>
        <div data-role="content">
            <button id="buton">AJAX!</button>
            <div id="result"></div>
        </div>
    </div>
</body>
</html>

score 5 · Answer 1 · answered Jan 12 '13 at 12:52

I found what I needed. Android 4.1 and 4.2 introduce this new method: getAllowUniversalAccessFromFileURLs

Since it's not working on API below 16 the solution needs some few more lines, to assure that this inexistent method do not cause errors in previous API.

public class MainActivity extends Activity {
/** Called when the activity is first created. */
WebView webView;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    webView = (WebView) findViewById(R.id.webView);
    webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
    webView.getSettings().setJavaScriptEnabled(true);
    int currentapiVersion = android.os.Build.VERSION.SDK_INT;
    if (currentapiVersion >= android.os.Build.VERSION_CODES.JELLY_BEAN){
        fixNewAndroid(webView);
    }
    webView.setWebChromeClient(new WebChromeClient());
    webView.loadUrl("file:///android_asset/www/index.html");
}

@TargetApi(16)
protected void fixNewAndroid(WebView webView) {
    try {
        webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
    } catch(NullPointerException e) {
    }
}

}

score 0 · Answer 2 · edited Nov 18 '19 at 04:24

Did you check what return your ajax GET? It is return DOM Document ! And you trying to set for your #result html the Document! If you take a look on http://api.jquery.com/jQuery.get/ you can see that your success function have 3 parameters :

success:function(data, textStatus, jqXHR){}

Now you are able to choice how to get your html and display it into $("#result").

$("#result").html(jqXHR.responseText);

ajax working on some Android devices, not in other

2 Answers2

Linked