JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<p id="geolocation">Finding geolocation...</p>
<div id="t01"></div>

JavaScript

var lat,
    lon;

window.processResults = function (response) {
    console.log(arguments);
    var content = "<ul>";
    var parsed = JSON.parse(response);
    for (var i in parsed) {
        content += "<li>" + parsed[i].ClassName + " " + parsed[i].City + "</li>";
    }
    document.getElementById('t01').innerHTML = "This should be displayed";
}

function onDeviceReady() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
}

function onSuccess(position) {
    
    var element = document.getElementById('geolocation');
    
    element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
        'Longitude: ' + position.coords.longitude + '<br />';
    
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    
    $.ajax({
        async: false,
        type: 'GET',
        url: "http://geolocation.webatu.com/Radius.php?jsonp=processResults",
        data: {
            lat: lat,
            lon: lon
        },
        dataType : 'jsonp',
        jsonp: false,
        jsonpCallback: 'processResults'
    });
}

function onError(error) {
    alert('code: ' + error.code + '\n' +
          'message: ' + error.message + '\n');
}

onDeviceReady();