jquery-archive / jquery-mobile

jQuery Mobile Framework
https://jquerymobile.com
Other
9.7k stars 2.41k forks source link

Ajax navigation broken in Android WebView using local html #1076

Closed bendemboski closed 13 years ago

bendemboski commented 13 years ago

I am building an Android app that uses a WebView to load local html/javascript that is built on top of jquery mobile. Every time I try to load a page out of a new html file, I get

Uncaught TypeError: Cannot call method '_trigger' of undefined at file:///android_asset/www/js/framework/jquery.mobile-1.0a3.min.js:46

and my new page does not load. When I put the exact same html on a web server and load it from there, everything behaves as expected. I believe I have tracked down the cause and have a fix, but I'm a bit new to this all so I figured I'd create an issue with my findings rather than jumping straight to a pull request.

I have confirmed with a simple unit test that for some reason, the behavior of jquery's $.ajax() call differs on Android when loading html in a local file vs. in a remote file if the dataType isn't specified. In the former case, the data passed to the success callback is a document object, whereas in the latter case the data passed to the success callback is a string.

This causes problems in jquery mobile's $.mobile.changePage() function, because it does not pass in a dataType parameter to its $.ajax() call, and it uses the data parameter of the success callback to set the innerHTML of a div in the "workaround to allow scripts to execute when included in page divs" section. When the data is an object rather than a string, this corrupts the DOM and screws up the navigation.

I'm not certain exactly what the "real" bug is here or whether or not it is truly Android-specific as I haven't run the full matrix of experiments. I don't believe that assigning a DOM object to an innerHTML attribute is allowed, but I suppose this could be an issue with Android's DOM implementation. I'm also not certain whether the difference in the behavior of local vs. remote files is caused by an inconsistency in jquery or in Android's WebView implementation.

However, regardless of what the underlying bug is, the jquery mobile fix is quite simple and, I believe, correct in any case: just add a 'dataType: "text"' element to the settings passed to the $.ajax() call in $.mobile.changePage(). I have confirmed that this causes the data parameter to be passed to the success callback as a string in both cases, and navigation works as expected.

I'm happy to check in this fix and submit a pull request, but as I'm a bit of a newbie at jquery-mobile I wanted somebody to confirm that I'm looking at this correctly first.

Ben Demboski

markusweb commented 13 years ago

i am not on android, but i suffer the same problem. i want to use jqm with phonegap on my iphone. but even with safari/firefox on my PC it will not work (load) pages, when i first access via file://folder/index.html and then click on an a-href link to load data from my webserver!

markus

toddparker commented 13 years ago

Duplicate of #991