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

Question

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?

By the way, I am targeting Android 3, API Level 11. The same code works fine in iOS. — blakeage, Jun 04 '12 at 22:43

score 3 · Accepted Answer · answered Jun 05 '12 at 16:59

3

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.

answered Jun 05 '12 at 16:59

blakeage

268
5
15

Wow, this saved my life. Thanks!! – Alexandre Justino May 10 '16 at 15:31
I'm confused; why would this fix the issue? – blizzrdof77 Sep 07 '17 at 01:06

score 0 · Answer 2 · answered Jun 05 '12 at 07:00

0

Seems something else is wrong in your project. The following gist have some of the files from my test application and it works without any issue in Android.

https://gist.github.com/2873186

answered Jun 05 '12 at 07:00

dhaval

7,611
3
29
38

Thank you very much for looking into it. It turns out the issue was with the underscore in the name of the AJAX'ed file. Changing the name to "liqui-cult.html" fixed the problem. – blakeage Jun 05 '12 at 16:58

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

2 Answers2

Linked