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

8 posts, 0 answers
  1. Mauro
    Mauro avatar
    8 posts
    Member since:
    Feb 2012

    Posted 23 Jun 2012 Link to this post

    Hi,
    I need to insert a link to a phone number and I want that on click event automatically start the call.

    In Jquery I use <a href="tel:00-00-000-000" >00-00-000-000</a>

    Thanks a lot
    Mauro

  2. Ali
    Ali avatar
    16 posts
    Member since:
    Aug 2012

    Posted 14 Sep 2012 Link to this post

    Its similar, just add data-rel="external"

    <a href="tel:00-00-000-000"  data-rel="external">00-00-000-000</a>
  3. Kendo UI is VS 2017 Ready
  4. David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 16 Jan 2013 Link to this post

    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
  5. David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 16 Jan 2013 Link to this post

    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...
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 21 Jan 2013 Link to this post

    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!
  7. David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 21 Jan 2013 Link to this post

    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
  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 21 Jan 2013 Link to this post

    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!
  9. David
    David avatar
    60 posts
    Member since:
    Nov 2012

    Posted 21 Jan 2013 Link to this post

    I updated my app to use the latest version, everything seems to work properly.
    Thanks,
    -David
Back to Top
Kendo UI is VS 2017 Ready