1. #1
    Sencha User
    Join Date
    Mar 2011
    Location
    Lincoln, UK
    Posts
    27
    Vote Rating
    0
    BenMajor is on a distinguished road

      0  

    Default Firing a 'tel:' link from a button

    Firing a 'tel:' link from a button


    Hi,

    I have an ActionSheet which is shown when a user taps on a list item. In the ActionSheet are three buttons - one to remove the contact, one to make a call to them and one to dismiss the ActionSheet. My question is, how do I bind the equivalent of a '<a href=""></a>' to the button?

    I need to specify the 'tel:' protocol so that iOS and Android will force the Phone application to load with this number? I have tried to bind the following to the 'tap' event of the button without success:

    Code:
    window.location.href = 'tel: numberHere';
    Thanks,
    Ben.

  2. #2
    Sencha User
    Join Date
    Mar 2011
    Location
    Lincoln, UK
    Posts
    27
    Vote Rating
    0
    BenMajor is on a distinguished road

      0  

    Default


    Does no-one have an answer for this?

    Thanks,
    Ben.

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    71
    Vote Rating
    0
    heringsfilet is on a distinguished road

      0  

    Default


    I'm facing the same issue. I simply use plain text for the phone number yet but a button would be great.
    I've heard that it would be better to ask the user if he really wants to call the number if you want to put your app into the Apple AppStore.

  4. #4
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    241
    Vote Rating
    3
    SimonFlack is on a distinguished road

      0  

    Default


    I am using a standard link but styling it to look like a button. This is a hack but it works. If anybody has a better solution please post it here.

    Code:
    .clicktocall{
      background-color: #ffffff;
      background: -webkit-gradient(linear, left top, left bottom, from(#efefef), to(#dfdfdf));
      border-style: solid;
      border-width: 1px;
      border-color: #c0c0c0;
      border-radius: 4px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      padding: 4px;
      text-decoration: none;
      color: #000;
      margin-top: 5px;
      margin-bottom: 5px;
      width: 200px;
      text-align: center;
    }
    
    .clicktocallon{
     background: -webkit-gradient(linear, left top, left bottom, from(#00bcf2), to(#03799b));
    }
    
    .clicktocall a{
      text-decoration: none;
      color: #000;
    }
    HTML
    Code:
    <div id="clickPhone" class="clicktocall"><a href="tel:+4775517200" onclick="uin.contact.doVisualFeedBack(\'clickPhone\')">+47 755 17 200</a></div>
    Visual Feedback Function
    Code:
    uin.contact.doVisualFeedBack = function(id,callback){
        var hasClass = function(ele,cls) {
    	return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
        };
        var addClass = function(ele,cls) {
    	if (!hasClass(ele,cls)) ele.className += " "+cls;
        };
        var removeClass = function(ele,cls) {
    	if (hasClass(ele,cls)) {
    		var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    		ele.className=ele.className.replace(reg,' ');
    	}
        };
    
        var div = document.getElementById(id);
    
        addClass(div,'clicktocallon')
    
        setTimeout(function(){
                removeClass(div,'clicktocallon')
                if(callback){
                    callback();
                }
        },1000);
    }
    Simon Flack
    CEO and UX Designer
    WhiteFox AS, Norway

    Web: www.whitefox.no

    Facebook: www.facebook.com/WhiteFoxAS

    Twitter: @WhiteFoxAS

  5. #5
    Sencha User
    Join Date
    Mar 2011
    Location
    Lincoln, UK
    Posts
    27
    Vote Rating
    0
    BenMajor is on a distinguished road

      0  

    Default


    Thanks for your help, Simon. I guess that's the only option to implement it at the moment, unless any of the Sencha Touch developers can help?

    For a mobile framework, I would have expected this to be more of a common issue than it appears to be, to be honest.

    Thanks,
    Ben.

  6. #6
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    241
    Vote Rating
    3
    SimonFlack is on a distinguished road

      0  

    Default


    Hey Ben. This is a common issue and it has been discussed before. The problem if I recall it correctly is due to the mobile browsers not allowing location changed from javascript and only supporting "<a href" type links.

    Maybe you could try this... Seemed to work.

    Code:
    {
                        xtype: 'button',
                        html: '<a id="mylink" style="position:absolute; width: 0px; height: 0px; opacity: 0;" href="mailto:postmottak@uin.no">postmottak@uin.no</a>',
                        text: 'test',
                        handler: function(){
                            var fireEvent = function (obj,evt){
                                var fireOnThis = obj;
                                if( document.createEvent ) {
                                  var evObj = document.createEvent('MouseEvents');
                                  evObj.initEvent( evt, true, false );
                                  fireOnThis.dispatchEvent(evObj);
                                } else if( document.createEventObject ) {
                                  fireOnThis.fireEvent('on'+evt);
                                    }
                            }
                            
                            fireEvent(document.getElementById('mylink'),'click');
                            
                        }
                    }
    Simon Flack
    CEO and UX Designer
    WhiteFox AS, Norway

    Web: www.whitefox.no

    Facebook: www.facebook.com/WhiteFoxAS

    Twitter: @WhiteFoxAS

  7. #7
    Sencha User
    Join Date
    Mar 2011
    Posts
    71
    Vote Rating
    0
    heringsfilet is on a distinguished road

      0  

    Default


    Sorry for that question, I'm new to JS and SenchaTouch but what is the advantage of your solution compared to:
    Code:
    listeners: {
         'tap': function () {
              location = "tel:{phonenumber}";
          }
    }

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,673
    Vote Rating
    749
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Why not handle the redirect in the handler function of the button?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  9. #9
    Ext JS Premium Member SimonFlack's Avatar
    Join Date
    Jul 2010
    Location
    Norway
    Posts
    241
    Vote Rating
    3
    SimonFlack is on a distinguished road

      0  

    Default


    Does that work when the app is in standalone/homescreen mode?

    I just figured it didn't seeing Ben was having problems. I have had problems with window.open() and assumed his problems may be being caused by the same issue.

    But if you can do it straight from the handler than that is definitely the easiest.
    Simon Flack
    CEO and UX Designer
    WhiteFox AS, Norway

    Web: www.whitefox.no

    Facebook: www.facebook.com/WhiteFoxAS

    Twitter: @WhiteFoxAS

  10. #10
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,673
    Vote Rating
    749
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I thought if you try to direct to a tel link that the browser will stop the redirect and launch the phone app. I could be totally wrong too

    btw @SimonFlack, the link to your editableList demo is broken
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Similar Threads

  1. Link Button or Hyper link
    By nikhilwalker in forum Ext 2.x: Help & Discussion
    Replies: 69
    Last Post: 24 May 2013, 5:13 AM
  2. Id of ExtJs button firing an event
    By mayhem in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 21 Sep 2010, 1:13 AM
  3. Firing a scroll gesture from a button tap
    By DaveC426913 in forum Sencha Touch 1.x: Discussion
    Replies: 8
    Last Post: 2 Sep 2010, 11:46 AM
  4. Link Ext.Button with HTML button
    By artnum in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 11 Apr 2008, 1:44 AM

Thread Participants: 6

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar