This is a migrated thread and some comments may be shown as answers.

Hyperlink to Email problem.

4 Answers 86 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 31 Dec 2012, 06:16 PM
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>
 

4 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 02 Jan 2013, 09:44 AM
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!
0
Sam
Top achievements
Rank 1
answered on 15 Dec 2013, 06:08 PM
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. 
0
Alexander Valchev
Telerik team
answered on 18 Dec 2013, 08:39 AM
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!
0
Sam
Top achievements
Rank 1
answered on 18 Dec 2013, 12:46 PM
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. 
Tags
ListView (Mobile)
Asked by
Robert
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Sam
Top achievements
Rank 1
Share this question
or