Using PhoneGap, can't load local .html file using Ajax on Android only

android, cordova, jquery

Solution

Changing the name of the html file that gets AJAX-loaded from "_liqui-cult.html" to the same name without the underscore "liqui-cult.html" fixed the problem.

Problem

I'm using PhoneGap (latest), Jquery 1.7. I'm having troubles getting some html loaded via AJAX into a div. My problem is simple, I have an index.html file in the www/ directory. And a js file that does this: ``` $.ajax({ type:"GET", timeout:10000, dataType: "html", async: false, cache: false, url: "file:///android_asset/www/_liqui-cult.html", success: function(data) { $('#data_details .description').html(data); // never runs }, error: function(xhr,msg){ alert(xhr.status + ", " + msg); if(xhr.status == 0 || xhr.status == "0"){ alert(xhr.responseText); // always blank, if runs } } }); ``` Having spent the day Googling this error, I've tried numerous things, but the AJAX call never succeeds. I've tried changing the url to simply, `_liqui-cult.html` (without the file:// -based url). I've also tried `/_liqui-cult.html`. I started out trying with the JQuery `$.load`, and that wasn't working, so I switched to the more verbose `$.ajax` call. No matter what I do, I either get a 404 as the status, or, if I change the url to `http://_liqui-cult.html`, I get a status of 0, but nothing in the responseText. So, I took JQuery out of the equation, and tried a simple XMLHttpRequest, as so: ``` var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && (xmlhttp.status==200 || xmlhttp.status==0)) { $('#data_details .description').html(xmlhttp.responseText); $.mobile.changePage('#screen_detail'); } } xmlhttp.open("GET","_liqui-cult.html", true); xmlhttp.send(null); ``` Again, I've tried every conceivable url pattern to map to the html file. And still, the best I can get is xmlhttp.responseText is blank. So how about cross-origin issues? Here is what I've tried: `<access origin=".*"/>` `<access origin="file://*"/>` `<access origin="*"/>` Again, I've tried all ways of mapping to the html file, with those different access origin settings, and I still cannot load the html file. Any ideas?

Original source