Unable to make phone number clickable (Rails app using CoffeeScript)

Question

I'm running a restaurant discovery website, where users see a bunch of markers on a map, they click on a marker and that opens up an infoWindow in which the user can see meta details for the restaurant.

The problem: i'm trying to make restaurant phone number clickable. When I view the output, in HTML, I see a clickable link, but instead of seeing the phone number in that link, I see my variable name instead (screenshot attached). And when I click on the link, I get an error message (screenshot attached).

See attached code - the relevant CoffeeScript file and the HTML view being rendered.

MAIN.COFFEE FILE

infoHTML = (data) ->
  img = if data.photo then "<img onerror='this.parentNode.removeChild(this)' src='#{data.photo}' style='margin:5px 5px 0 0;max-height:70px'>" else ''
  html = "<table><tr><td style='vertical-align:top'>#{img}</td><td>"
  html += data.name + '<br>'
  html += data.address + '<br>'
  html += "<a href= '+ data.phone + '> + data.phone</a>" + '<br>' if data.phone
  html += "<img src='/assets/uber.jpg' style='max-height:13px'> £#{data.cost}" + '<br>' if data.cost
  if data.michelin_status && data.michelin_status != 'yes'
    html += data.michelin_status + '<br>'
  html += data.rating + '% rated' if data.rating
  html + '</td></tr></table>'

VIEW BEING RENDERED

WHAT I SEE WHEN I CLICK ON THE PHONE LINK

You have a mix of ' and " on that line. Looks like you need a ' before the " — Doon, Oct 17 '15 at 12:30

score 3 · Accepted Answer · edited May 23 '17 at 11:45

3

You have mixed you quotes, so instead of

html += "<a href= '+ data.phone + '> + data.phone</a>" + '<br>' if data.phone

Use

html += "<a href= '"+ data.phone + "'>" + data.phone + "</a><br>" if data.phone

Also, check How to mark-up phone numbers?

Update - with the tel: prefix:

html += "<a href= 'tel:"+ data.phone + "'>" + data.phone + "</a><br>" if data.phone

edited May 23 '17 at 11:45

Community

1
1

answered Oct 17 '15 at 12:28

Vucko

20,555
10
56
107

Doesn't work. With your fix, I now see the number in the view, but if I click on the number I get an Action Controller exception message saying Routing Error - no route matches. – hikmatyar Oct 17 '15 at 12:32
That's how it's supposed to work because you're adding that phone number to the href, so you get, for example, `123-4567-89"`, which will look for that route that doesn't exist. I've added the additional link to my answer and check it to see how do you make a clickable phone number (I believe you need to add the `tel:` prefix - `123-4567-89"`). – Vucko Oct 17 '15 at 12:36

Unable to make phone number clickable (Rails app using CoffeeScript)

1 Answers1