Error loading page on clicking an anchor tag in android phonegap app in ice cream sandwhich

Question

i am developing an android phonegap app using phonegap 1.3 and jquery mobile 1.0 My app works perfectly fine in all android versions before 4.0.0
But in 4.0.0 and above im facing an issue. I have an anchor which when users click, takes the to another 'page'.

<div class="ui-input-share  ui-btn-corner-all ui-body-c" id="mk_home">
    <a href="javascript:void(0);" class="ui-input-text"  data-role="none"  >Whats up?</a>
</div>

In the emulator having android 4.0.3, when i click on this i get an error saying "Error loading page" When i check the logs in logcat, i see an error saying

Unknown chromium error: -6

any idea as to what can i do to get it working?

Answer 1

This error was coming because webkit in ics is broken in handling

?param=abc

with urls. So if u have a url like

domain.com?p1=a

which u hit, then you would get such an error. The best fix for now would be to test your webapp in browser and see when and where you add params to the url and remove those.

You can in place save those params in localstorage and retrieve when needed.

Answer 2

Since you are using jQuery I would recommend to use jQuery to wire up your events as well. With that being said using e.preventDefault(); and e.stopImmediatePropagation(); should stop jQuery mobile from performing the default action on the .

$("#verify").click(function (e) {
    e.stopImmediatePropagation();
    e.preventDefault();
    //Do important stuff....
});

Update

The better way to use your existing markup would be to simply add rel="external" to your And your onclick should behave correctly.

<p>
  <a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="a" onclick="doSomething(); return false" rel="external">VERIFY</a>
</p>

This will work since jQuery Mobile will treat the link as a normal tag and return false will simply stop the default action.

Answer 3

In jQuery Mobile, when you want to use <a href=...> </a>, you'd better use rel="external" in <a> , in order to jump to target page correctly. If you want to use JavaScript, you'd better not to use in <a href='...'>, because href is hash allocation but not JavaScript code attribute.

jQuery Mobile do not support anchor. If you need to use anchor, you have to do some trade-off. You can reference this link, jQuery Mobile Anchor Linking

Answer 4

Sometimes the jquery itself adds those url params in ajax requests. This is the case when you activated caching. You could easily disable this feature for the whole project using:

$.ajaxSetup({ cache: true });

Hope this helps somebody.