CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
undefined variable
undefined variable

Reputation: 67

Adding geolocation to database using ajax

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'];

Upvotes: 1

Views: 1354

Answers (2)

miknik
miknik

Reputation: 5941

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

Upvotes: 1

admcfajn
admcfajn

Reputation: 2083

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;
      }
    }

Upvotes: 0

Related Questions