Adding geolocation to database using ajax

Question

Often after a db query I will echo out a table, in the last column I add something like this, so when clicking the href I can run some php that will get the row ID and I can then manipulate that row.

echo '<td><a href="driver-accept-job.php?id=' . $row['booking_id'] . ' "class="btn btn-primary btn-block" "    " onclick="return confirm(\'Are you sure you want to accept this job?\')" >Accept Job</a></td>';

Now I would like to burn geolocation data to db when user clicks 'accept job', (if user declines geolocation prompt then will not be able to accept job) since geolocation is js, I believe I now have to use ajax to send the lat and long and the booking_id . I have no idea how to get the $row['booking_id'] and pass it to the js.

This is what I have so far...

echo '<td><button class="btn btn-primary btn-block" onclick="getLocation()" >Accept Job</button></td>';

<script>

var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);

    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}



function showPosition(position) {
    // x.innerHTML = "Latitude: " + position.coords.latitude + 
    // "<br>Longitude: " + position.coords.longitude; 

    $.ajax({  
    type: 'POST',
    url: 'driver-accept-job.php', 
    data: { id: booking_id, latitude: position.coords.latitude, longitude: position.coords.longitude },
    success: function(response) {
        content.html(response);
    }
});

}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
</script>

driver-accept-job.php

$id = $_POST['id'];
$latitude = $_POST['latitude'];
$longitude = $_POST['longitude'];

Something to keep in mind that the geolocation data you receive is easily forged by a moderately-skilled malicious user. Depending on how important this data is to your business logic, it might be wise to silently compare it on the server to recent values submitted by the same user, in order to verify that it is physically possible for the user's location to have changed by such an amount in the time elapsed between data points. A location delta exceeding about 1.5 miles per minute suggests that the user is capable of either flight or teleportation. — Michael - sqlbot
– Michael - sqlbot, Commented Oct 29, 2017 at 4:59

miknik · Accepted Answer · 2017-10-29 02:41:07Z

You are very close with you current code. You can add the job ID to your existing button as a data element and then if you add this between the parenthesis of your onclick="getLocation()" you can retrieve it in your javascript. So this:

echo '<td><button class="btn btn-primary btn-block" onclick="getLocation()" >Accept Job</button></td>';

Becomes this:

echo '<td><button class="btn btn-primary btn-block" data-jobid="' . $row['booking_id'] . '" onclick="getLocation(this)" >Accept Job</button></td>';

Now declare your booking_id variable outside of a function so it's accessible globally, like you have done with var x

var booking_id;

Now change this

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);

to this

function getLocation(param) {
    if (navigator.geolocation) {
        booking_id = $(param).data('jobid');
        navigator.geolocation.getCurrentPosition(showPosition, showError);

Clicking a button will now set the booking_id variable to the job id for that button. You have already included that in your ajax call within your showPosition function, so as it's now accessible globally the rest of your code should work without modification

admcfajn · Accepted Answer · 2017-10-28 22:00:01Z

0

You could use a different onclick function:

// php
    echo '<td><a href="driver-accept-job.php?id=' . $row['booking_id'] . ' "class="btn btn-primary btn-block" "    " onclick="doThis('.$row['booking_id'].')" >Accept Job</a></td>';

// js
    var currentID=null;
    function doThis(theID){
      if (confirm(\'Are you sure you want to accept this job?\')) {
        currentID = theID;
      }
    }

answered Oct 28, 2017 at 22:00

admcfajn

2,1224 gold badges26 silver badges36 bronze badges

1 Comment

undefined variable Over a year ago

nice, but how do I then tie this in with ajax to POST the lat and long, do I not need to specify a url: in it?

Collectives™ on Stack Overflow

Adding geolocation to database using ajax

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related