Ajax not firing on Firefox for href="tel:" link

JavaScript
1

Hi,

I have the following code with an Ajax call that triggers when a phone link is clicked.

<a href="tel:555555555" class="customer-phone" data-id="3">

$('.customer-phone').on('click', function() {
	var id = $(this).data('id');
	var time = '2018-03-30 10:15:23';
	
	$.ajax({
		type: 'POST',
		url: 'script.php',
		data: {id:id,time:time}
	});
});

It works fine on Chrome. The Ajax call is made and then Chrome asks to open the phone application.

However, in Firefox, the Ajax call is not made, and Firefox asks to open the phone application. Any ideas how to make the Ajax call work on Firefox too?

Thanks.

EDIT: I used an alternative approach using a span to display the phone number, and a hidden phone link to be triggered after the Ajax call.

<span class="customer-phone" data-id="3">555555555</span><a href="tel:555555555" id="customer-phone-3"></a>

$('.customer-phone').on('click', function() {
	var id = $(this).data('id');
	var time = '2018-03-30 10:15:23';
	
	$.ajax({
		type: 'POST',
		url: 'script.php',
		data: {id:id,time:time}
	}).done(function() {
		$('#customer-phone-'+id)[0].click();
	});
});

It works fine, but I would be happy to hear about other approaches too.

2

You can just prevent the default behaviour from occurring in the normal way.

$('.customer-phone').on('click', function(evt) {
    evt.preventDefault();
    ...
});
3

The issue is, when I do it like you said, the browser does not display the notice for opening the phone link. I want both the ajax call to take place and the notice to display. The way I did it initially, worked fine on Chrome, not in Firefox.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.