JSFiddle - React, Tailwind, and code Playground
HTML
<h4>Click one of the telephone numbers below.</h4>
<h4>PHP $_POST loaded at the success area of JavaScript</h4>
<div id="success"></div>
<h4>PHP $_POST loaded at the bottom of the JavaScript</h4>
<div id="bottom"></div>
<h4>Live click event on the paragraph tags with no anchor tags</h4>
<p class="dial" id="noaID0001" style="text-decoration: underline; color: blue">+1 234 567 0001</p>
<p class="dial" id="noaID0002" style="text-decoration: underline; color: blue">+1 234 567 0002</p>
<p>In the example above — without anchor tags — although in Chrome, Firefox, IE, Opera and Safari the success area of the JavaScript returns nothing, the bottom of the JavaScript shows the correct variable was posted. In the examples below — with anchor tags — IE, Opera and Safari continue to post the correct variable while Chrome and Firefox work sporadically. Firefox 4 has the same result.</p>
<h4>Live click event on anchor tags with Callto (Skype) URI scheme. Skype might have to be installed to work the demo.</h4>
<p><a class="dial" id="calID0001" href="callto:+12345670001" name="cal0001">+1 234 567 0001</a></p>
<p><a class="dial" id="calID0002" href="callto:+12345670002" name="calID0002">+1 234 567 0002</a></p>
<h4>Live click event on anchor tags with Tel (cell phone, etc.) URI scheme.</h4>
<p><a class="dial" id="telID0001" href="tel:+12345670001" name="telID0001">+1 234 567 0001</a></p>
<p><a class="dial" id="telID0002" href="tel:+12345670002" name="telID0002">+1 234 567 0002</a></p>
<p>Questions</p>
<ol>
<li>Why does Firefox work only sporadically (my main question)?</li>
<li>Why does the success area of the JavaScript never return anything?</li>
</ol>
JavaScript
$(document).ready(function(){
$('.dial').live("click", function() {
$.post("post.php", {
teleID: this.id.substring(5)
},
function() {
$("#success").load('post.php', {teleID: this.id.substring(5)});
}
);
$("#bottom").load('post.php', {teleID: this.id.substring(5)});
return true;
});
});