iPhone and more can automatically recognize phone numbers and make them an active link to click and initiate a call to that number.

I can do this on many webpages, but not in myTinyTodo task list. Anyone know what might be preventing the phones from being able to recognize the number and make it active?

You can input a task on this page with a phone number and then view on your phone to see if it is active link or not.



I've done some testing. It appears that data returned from an AJAX call does not get "processed" or "processed as expected" and thus does not automatically get linked as a phone number. However, passing the phone number through AJAX as a phone link does work.

For example, just passing 555-678-1234 does not get the active phone linking. However, passing:

<a href="tel:555-678-1234">555-678-1234</a>

does provide the active phone linking.

Now the only problem for me is that myTinyTodo does not allow the inclusion of HTML as code. It just sees it as text. But, now that I know what is going on, I can try to incorporate a "hack".

To hopefully help someone else looking for this situation with an iPhone not displaying phone numbers as active links:

The problem for us was the iPhone would not automatically convert phone numbers to active links for clicking to initiate a phone call when the phone number displayed was AJAX generated content.

So, we implemented jquery to find phone numbers and add the tel link to the phone numbers so the iPhone would recognize that:

$('.task-title').each(function() {
   $(this).html( $(this).html().replace(/(\d\d\d-\d\d\d-\d\d\d\d)/g,'<a href="tel:$1">$1</a>') );

of course, you can change format for your type of phone number data.

commented: Well worked out. Not simple. +12


I've been following this but with nothing to offer. Now I know the solution, I understand the problem!

My twopenny worth (after the hard work is done) .... it would be slightly(?) more economical to make $(this) just once inside the each loop:

$('.task-title').each(function() {
   var $this = $(this);
   $this.html( $this.html().replace(/(\d\d\d-\d\d\d-\d\d\d\d)/g,'<a href="tel:$1">$1</a>') );


Hello Solid. what is $1 refer to? Tks