tel anchor link not working with jqtouch and phonegap

Question

I'm using phonegap with jqtouch and am trying to very simply open the phone's native phone app and prompt a call. I've tried all sorts of variations on the following:

<a href="tel:[NUMBER]" class="greenButton>Call number</a>

I've tried rel="external"

I've tried using href="tel://"

I've tried target="_blank"

I've tried target="_webapp"

I've even tried adding class="tel" and using jQuery to call $(location).attr('href',this.href);

Basically, jqtouch must be intercepting links to do it's thing and I can't figure out how to make it do things normally!

I've found something odd however...
If I wrap the link in an iscroll wrapper it works.

<div class="s-scrollwrapper">
<a href="tel:[NUMBER]" class="greenButton">Call number</a>
</div>

I obviously don't want to settle for this because it screws up formatting and makes the button scrollable and is pointless. Can anyone help me please?

Answer 1

In my case it was a problem with iScroll that I have managed to solve by adding the following option:

  var options = {
    //other options
    onBeforeScrollStart: function (e) {
      var target = e.target;
      while (target.nodeType != 1) target = target.parentNode;
      if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA' && target.tagName != 'A') e.preventDefault();
    }
  };
  var myScroll = new iScroll(wrap, options);

Answer 2

I tried:

<a href="tel:[NUMBER]" rel="external" target="_webapp">Call number</a>

...and it worked fine.

Could be that it needs both the rel="external" (to stop it from trying to AJAX the link) AND target="_webapp" so that it doesn't try to open Safari to handle the link.

Answer 3

This did turn out to be the way jqtouch intercepts click events and prevents default behaviour. The way I ended up "fixing" it was to put an 's-scrollwrapper' div around the content on the page with the call button. I needed to do this anyway for all screens of the app but as for this datazombies fork, it probably needs a better way to implement tel links.

Answer 4

You need to use target="_system" on iOS for the tel: links to work.

Answer 5

If someone has the same issue, you can try the option preventDefaultException in the section Advanced options http://iscrolljs.com/#advanced-options

From iScroll 5 docs:

options.preventDefaultException

These are all the exceptions when preventDefault() would be fired anyway despite the preventDefault option value. This is a pretty powerful option, if you don't want to preventDefault() on all elements with formfield class name for example, you could pass the following:

preventDefaultException: { className: /(^|\s)formfield(\s|$)/ }

Default: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ }.

So you can just add an A tag to the tagName value: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A)$/ }