Hyperlink to Email problem.

5 posts, 0 answers
  1. Robert
    Robert avatar
    198 posts
    Member since:
    Aug 2009

    Posted 31 Dec 2012 Link to this post

    I am trying to provide a hyperlink that will kick off the default email client on the mobile device.  The problem is that it takes 10, 20 or even more clicks before it finally opens the email client.  This is happening on both iOS and Android.  In the browser on a PC it works as expected.

    1 thing I noticed is that if I swipe somewhere on the screen and then attempt to click the link it works (more times than not).

    • What could be going on here?  
    • Does the link need some type of initialization?
    • In Android the corners are not rounded on the switch when I force the "ios" styling.  Is there a workaround for this?

    <!DOCTYPE html>
    <html>
    <head runat="server">
      <meta charset="UTF-8">
      <title></title>
       
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
        
    </head>
    <body>
         <div data-role="view" id="orderhistory" data-layout="default" data-before-show="redirectBack" class="hideload">
          <ul data-role="listview" data-style="inset" data-type="group" >
            <li>
              <ul class="ordULHist">
                <li>
                  <a id="ml" data-rel="external" data-role="listview-link" href="mailto:comments@yahoo.com">comments@yahoo.com</a>
                <li>
                <li>not rounded in android
                <input id="chkremember" data-role="switch" />
                </li>
              </ul>
            </li>
          </ul>
        </div>
     
      <script type="text/javascript">
        var app = new kendo.mobile.Application($(document.body), {
          platform: {
            device: "ipad",       // Mobile device, can be "ipad", "iphone", "ipod", "android" "fire", "blackberry", "meego"
            name: "ios",          // Mobile OS, can be "ios", "android", "blackberry", "meego"
            ios: true,            // Mobile OS name as a flag
            majorVersion: 5,      // Major OS version
            minorVersion: "0.0",  // Minor OS versions
            flatVersion: "500",   // Flat OS version for easier comparison
            appMode: false,       // Whether running in browser or in AppMode/PhoneGap/Titanium.
            tablet: "ipad"        // If a tablet - tablet name or false for a phone.
          }
        });
      </script>
    </body>
    </html>
     
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 02 Jan 2013 Link to this post

    Hi Robert,

    The mailto links behaviour is fixed in the latest internal build (2012.3.1210). I tested your code on Android and iOS phones and got everything to work as expected. Please download the internal build and give it a try.

    Regarding the switch styling, the only workaround that I can suggest is to force iOS 4 styling (in this version of iOS the switch control is not rounded). I will log this case as a bug and we will do our best to provide a fix in one of our future releases. As a small sign of our appreciation for bringing this to our attention I have updated your Telerik points.

    Last but not least, the mark-up of your sample is not valid - the <li> tag is not closed appropriately.
    <li>
        <a id="ml" data-rel="external" data-role="listview-link" href="mailto:comments@yahoo.com">comments@yahoo.com</a>
    </li>


    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!
  3. Kendo UI is VS 2017 Ready
  4. Sam
    Sam avatar
    60 posts
    Member since:
    Mar 2011

    Posted 15 Dec 2013 Link to this post

    Hopefully this is a good place for this. We have an app that used the following HTML:

    <div data-role="navbar">
        <a id="btnUploadPics" data-click="uploadPics" data-role="button" data-align="right">Add Photos</a>
    </div>

    JS: 
    function uploadPics() {
        var sLink = "mailto:test@test.com?subject=test";
        window.open(sLink, "emailWindow");
    }

    This was working fine for the last 2 years until the latest KendoUI update. I've tried
    window.location.href = "mailto:test@test.com"
    window.location = "mailto:test@test.com"

    Nothing seems to work. Now I get a 'null' in the recipient and nothing else.  Any help would be appreciated. 
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 18 Dec 2013 Link to this post

    Hi Sam,

    I tried to reproduce the behavior on my side but to no avail. Could you please specify the device and OS version that you are testing with?
    In case you are testing on iOS 7 with web app, please have in mind that mailto links are broken due to a bug in the browser. This issue is addressed in iOS 7.0.4.

    On a side note, it is recommended to use href="mailto: (....)" attribute and data-rel="external" instead of window.open. On my side window.open does not work at all, even if Kendo UI is not included on the page.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Sam
    Sam avatar
    60 posts
    Member since:
    Mar 2011

    Posted 18 Dec 2013 Link to this post

    Thanks for the response. I did get it working with the href=mailto syntax. I needed to pass parameters is the reason I was using window.open but I'm just changing the href attribute on the anchor tag instead. 
Back to Top
Kendo UI is VS 2017 Ready