0

Having done a lot of research and testing, I've pieced together several snippets to achieve almost 100%, thanks to multiple Stack articles (such as How to Click to show & Click to call?).

Given multiple containers as shown:

<div class="entry-details">
    <p class="phone">+18885551212,,,111</p>
    <p class="address">111 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

<div class="entry-details">
    <p class="phone">+18885551212,,,222</p>
    <p class="address">222 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

<div class="entry-details">
    <p class="phone">+18885551212,,,333</p>
    <p class="address">333 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

<div class="entry-details">
    <p class="phone">+16665551200</p>
    <p class="address">444 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

The goal onClick is to:

  1. Copy p.phone field text to href;
  2. Wrap p.phone field with href tel tag ;
  3. Replace p.phone content with "Click to Call";
  4. On click, show number formatted as # + ext (ex. 888-555-1212 Ext 222) if commas and extension are present, standard tel if not (ex. 888-555-1212).
  5. and finally, dial the # including pauses (commas);

jQuery(document).ready(function($) {
        $('.phone').wrapInner('<a class="phone-link" href=""></a>');
        $('.phone').each(function() {
            var $phoneLink = $(this).find('.phone-link');
            var _linkUrl = $phoneLink.text();
            $(this).find('a.phone-link').attr('href', 'tel:' + _linkUrl).text('Click to Call');
        });

    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="entry-details">
    <p class="phone">+18885551212,,,111</p>
    <p class="address">111 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

<div class="entry-details">
    <p class="phone">+18885551212,,,222</p>
    <p class="address">222 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

<div class="entry-details">
    <p class="phone">+18885551212,,,333</p>
    <p class="address">333 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

<div class="entry-details">
    <p class="phone">+16665551200</p>
    <p class="address">444 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

I had written another function for the final piece (changing Click to Call on click), but

  1. It didn’t work
  2. It changed all instances of .phone when clicked.
KillerDesigner
  • 485
  • 1
  • 6
  • 18

2 Answers2

0

I think you have replaced all .phone on click, because you used a global selector. Try bind event to each link, or you can use live listener on .phone-link selector.

jQuery(function($) {

  var formatPhone = function(tel) {
    // format should be here
    return tel;
  }

  // replace in a single loop
  // without wrapping
  $('.phone').each(function() {
    var $this = $(this);
    var tel = $this.text();
    var $link = $('<a class="phone-link" href="tel:'+tel+'">Click to Call</a>')
      .on('click', function(ev) {
        ev.preventDefault();
        $(this).text(formatPhone(tel));
      });

    $this.empty().append($link);
  });
});

sample with a live listener

$(document).on('click', '.phone-link', function(ev) {
    ev.preventDefault();
    var $this = $(this);
    $this.text(formatPhone( $this.attr('href') ));
});
i.Nemiro
  • 150
  • 6
  • Thanks @i.Nemiro! Using the first example, it does almost everything except changes ,,,111 with Ext 111, and does not dial when clicked on neither the first or second click. I am attempting to implement the live listener solution. – KillerDesigner Oct 30 '19 at 20:36
  • For the record, this solution produced the desired behavior sans the dial prompt ,which is prevented by ev.preventDefault() in the on.click function. Remove that & viola! Now, I need to display the resulting contents of a.phone-link on click and replace one or more instances of the comma with the string "Ext " so that 888-555-1212,,,111 dials as such, but displays as 888-555-1212 Ext 111. I tried this jQuery/Regex line in various parts of the function but its not working:, $(this).match("/,+/").replace("/,+/", "Ext "); I also tried $this.match... I suck at this, but I'm learning. – KillerDesigner Nov 02 '19 at 21:18
0

I was a bit confused about the intended switch between "Click to Call" and "actual Phone number". Please let me know if it serves the purpose or needs some more changes 

jQuery(document).ready(function($) {
        $(".phone").on("click",function(event){
          if(!$(event.target).hasClass("phone-link") ){
            var phoneLink = $(this).text();
            $(this).wrapInner('<a class="phone-link" href=""></a>');
            $(this).find("a.phone-link").attr('href','tel:' + phoneLink).text('Click to Call');
          }
        
        });
}); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="entry-details">
    <p class="phone">+18885551212,,,111</p>
    <p class="address">111 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

<div class="entry-details">
    <p class="phone">+18885551212,,,222</p>
    <p class="address">222 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

<div class="entry-details">
    <p class="phone">+18885551212,,,333</p>
    <p class="address">333 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>

<div class="entry-details">
    <p class="phone">+16665551200</p>
    <p class="address">444 Any Street, Anytown, NY 10010, USA</p>
    <p class="time">11:00 to 08:00</p>
</div>
Arpit Bansal
  • 493
  • 1
  • 4
  • 15