how to crate a link of type "tel:" to auto call a number from mobile phone

1 Answer 5446 Views

Button (Mobile)

1 Answer, 1 is accepted

David

commented on 16 Jan 2013, 09:38 PM

Has anybody had any consistency issues with phone links? I am using kendo version v2012.3.1114 in Icenium and I have noticed some strange behavior with phone links. It appears to be random weather or not the phone link will launch the dialer for the phone, if it does on android it takes quite some time before the dialer launches (by quite some time I mean longer than 30 seconds).

I made the simplest app i could think of for testing purposes listed below:

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

<script src="cordova.js"></script>

<script src="kendo/js/jquery.min.js"></script>

<script src="kendo/js/kendo.mobile.min.js"></script>

<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet"/>

</head>

<body>

<div id="main" data-role="view" data-title="Main" >

Phone Links

<ul data-role="listview" data-style="inset">

<li><a href="tel:5555555555">No Dashes and No rel</a></li>

<li><a data-rel="external" href="tel:5555555555">No Dashes</a></li>

<li><a data-rel="external" href="tel:555-555-5555">Dashes</a></li>

</ul>

<p><a href="tel:5555555555">No Dashes and No rel</a></p>

<p><a data-rel="external" href="tel:5555555555">No Dashes</a></p>

<p><a data-rel="external" href="tel:555-555-5555">Dashes</a></p>

</div>

<script>

var app = new kendo.mobile.Application(document.body, { transition: "slide"});

</script>

</body>

</html>

However if I comment out the line that creates the kendo application, each link works immediately. Is anybody else having a similar issue? I know this used to work fine for me, but I haven't tested it in a while on my app and I have sense upgraded kendoui and cordova (from 2.0 to 2.2). Changing from debug to release builds doesn't seem to improve the issue.
-David

David

commented on 16 Jan 2013, 09:51 PM

Found a work-around

<body>

<div id="main" data-role="view" data-title="Main" >

<div data-role="button" data-click="dial">Call me maybe?</div>

</div>

<script>

var app = new kendo.mobile.Application(document.body, { transition: "slide" });

function dial(e)

{

console.log("calling me!");

window.location ='tel:5555555555';

}

</script

</body>

This launches the dialer immediately...

Alexander Valchev

commented on 21 Jan 2013, 03:42 PM

Hi David,

I tested your project on Samsung Nexus S with Android 4.1.2 as well as on iPhone 4S with iOS6.

With the official release (2012.3.1114) the problem that you described persists, however while I tested with the SP release (2012.3.1315) everything worked as expected.

The only case the dialer does not show is when the link is a direct child of the ListView element and does not have a data-rel="external" attribute.

<ul data-role="listview" data-style="inset">

<li><a href="tel:5555555555">No Dashes and No rel</a></li>

</ul>

In this case the application tries to navigate. To avoid this you have to set the data-rel attribute.

Kind regards,
Alexander Valchev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

David

commented on 21 Jan 2013, 04:12 PM

Hi Alexander,
Thanks for looking into this. Just to make sure I understand correctly, if I start using 2012.3.1315 the dialer will work properly (as long as the data-rel="external" is specified)?
-David

Alexander Valchev

commented on 21 Jan 2013, 05:52 PM

Hi David,

Yes, this is correct.
Please check it on your side as well and let me know if you can observe any issues.

Regards,
Alexander Valchev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

David

commented on 21 Jan 2013, 09:01 PM

I updated my app to use the latest version, everything seems to work properly.
Thanks,
-David