cordova (ex phonegap) tel: links in <a href> not working in ios5

Question

I've checked everywhere here in stackoverflow, google, phonegap and other websites but I cannot find a solution, but if I did miss the right link, please post me to it, because I'm lost.

1: I'm using Cordova + JQmobi to write my apps. 2: the only link that doesn't work is the TEL: in a tag links. 3: they work in Safari for ios (any version I've found from ios4 to ios5.1) 4: ONLY in ios5 the link to TEL: won't work in native apps

Here the codes I've tried:

<a href="tel:+39000000">Link to the tel</a>
<a href="tel:+39000000" target="_blank">Link to the tel</a>
<a href="tel:+39000000" target="_self">Link to the tel</a>
<a href="" onclick="windows.location('tel:+39000000')" target="_blank">Link to the tel</a>

For the format of the telephone number I've used: tel:+39000000 (+39 is for italy) tel:123456 (I've tried any kind of real telephone numbers but I have no #, * or spaces) tel://+39123456

When I check on the xCode simulator for a SMS: link i get this error: AppDelegate::shouldStartLoadWithRequest: Received Unhandled URL sms:+39123456

And that's correct because the simulator doesn't have the SMS app, but then when I try the TEL: link: Failed to load webpage with error: The URL can’t be shown

That for what I know is something that happens if you write a non legal url that you want to open with a browser.

I've read that jqmobi (as much as other framework such as jqtouch) could prevent the default behavior of a link but that if you explicitly invoke it.

What is really changed in the ios5? Because all my links work on the ios4.3

Anyone out there please help me and many other I saw couldn't find a real solution for this new update of Apple.

Thanks for all

Answer 1

My solution is: there is no solution. But a plugin: https://github.com/mchristie/PhoneGap-ios-PhoneDialer/

If you use cordova be sure to check the 4 lines you have to change (cordova instead of phonegap)

Answer 2

Have you tried removing the '+'?

<a href="tel:39000000">Link to the tel</a>
<a href="tel:39000000" target="_blank">Link to the tel</a>
<a href="tel:39000000" target="_self">Link to the tel</a>
<a href="" onclick="windows.location('tel:39000000')" target="_blank">Link to the tel</a>

as from their spec it sounds like they don't fully support all special characters:
http://developer.apple.com/library/ios/#featuredarticles/iPhoneURLScheme_Reference/Articles/PhoneLinks.html

Answer 3

Actually there is a solution to this, or at least there was for me, here it is:

In the HTML:

<input type="button" href="tel:+1-800-555-1234“ class="phone-number" value="1-800-555-1234"/>

In the Javascript:

$(‘.phone-number’).bind(click, function(e) {
    e.preventDefault()
    var phoneLink = $(e.currentTarget).attr('href');
    window.open(phoneLink, '_system', 'location=yes’);
}

Addendum... Someone suggested an edit where i change ‘.phone-number’ to '.phone' and remove the 'location=yes’. I don't know what affect that would have on this code because I am no longer working on this project and the code is in a repo that I own, but I can tell you for certain changing .phone-number to just .phone would definitely not work because that is not what i called the class in the input field. As for the location=yes being removed, again I have no idea what affect that would have since I don't have the code anymore. They did however point out that I used the incorrect left and right quotes. That was probably just a cut-paste mistake on my part but who knows.