I created a Web App for a Delivery service. It incorporates google maps as well as queries a database for open deliveries. The problem is that when I hooked up a button to shift the delivery array by array_shift() through an ajax call, is wont recognize the array.
<?php
session_start();
require 'ConnectTest.php';
// IF YOU'RE NOT LOGGED IN, KICK BACK TO LOGIN SCREEN
if(!isset($_SESSION['username']) || !isset($_SESSION['password'])){
header("Location:signin.php");
}
$servername = "localhost:3306";
$user = "sonic_client";
$pass = "client";
$dbName = "sonicStrains";
$drop = "DROP TABLE ".$_SESSION['username']."_deliveries";
mysqli_query($server, $drop);
//CREATE INDIVIDUAL DRIVER TABLE TO HOLD DELIVERIES
$createQuery = "CREATE TABLE ".$_SESSION['username']."_deliveries (
transaction_id VARCHAR(13),
timePaid INT(11),
username VARCHAR(30),
user_location VARCHAR(255),
user_lat float(10,6),
user_long float(10,6),
item_name VARCHAR(20),
item_quantity float,
driver_username VARCHAR(60),
driver_lat float(10,6),
driver_long float(10,6),
on_delivery tinyint(1))"
;
$created = mysqli_query($server, $createQuery);
if ($created){
//query the deliveries for open deliveries up untill 5 deliveries
$queryString = "SELECT * FROM deliveries LIMIT 5";
$query = mysqli_query($server, $queryString);
if($query){
// CREATE ARRAY TO HOLD QUERY ROWS
$rows = array();
while($queryresult = mysqli_fetch_assoc($query)){
$rows = $queryresult;
}
//INSERT & UPDATE THE TABLES WITH DELIVERY QUERIES
foreach($rows as $row){
// INSERT INTO INDIVIDUAL DRIVER TABLE
$insertQuery = "INSERT INTO ".$_SESSION['username']."_deliveries (transaction_id, user_location, user_lat, user_long) VALUES('$row[transaction_id]', '$row[user_location]', '$row[user_lat]', '$row[user_long]')";
$insertExec = mysqli_query($server, $insertQuery);
// UPDATE MASTER LIST OF DELIVERIES SO THAT OTHER DRIVERS DONT QUERY SAME ORDER
$updateQuery = "UPDATE deliveries SET on_delivery=true, driver_username='$_SESSION[driver_id]' WHERE transaction_id='$row[transaction_id]'";
$updateExec = mysqli_query($server, $updateQuery);
}
}else{echo mysqli_error($server);}
}else{echo mysqli_error($server);}
if(isset($_GET['pop'])){
array_shift($rows);
}
echo<<<_
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style> /* the stylesheet below */ </style>
</head>
<body>
<div class="Banner">
<div class="TitleText">Sonic Strains ©</div>
</div>
<div class="login">Logout</div>
<div class="gallery" id="container">
<div class="map" id="mapInsert"></div>
<div class="navButton">Start Nav</div><div class="orderButton">Order Details</div>
<div class="abortButton">Abort</div><div class="confirmButton" onclick="shiftOrder()">Confirm</div><div class="disclaimer"></div>
</div>
<script>
function initMap() {
navigator.geolocation.getCurrentPosition(function(position) {
var initialLocation = {lat:$rows[user_lat], lng:$rows[user_long]};
var Map = new google.maps.Map(document.getElementById('mapInsert'));
Map.setCenter(initialLocation);
Map.setZoom(13);
// MAKE ANOTHER MARKER FOR THE CLIENT LOCATION
var userLocation = {lat:$rows[user_lat], lng:$rows[user_long]};
var marker = new google.maps.Marker({
position:userLocation,
map:Map,
draggable:false,
clickable:false
});
marker.setMap(Map);
}, function(positionError) {
//---------- User denied geolocation prompt - default to Chicago
Map.setCenter(new google.maps.LatLng(39.8097343, -98.5556199));
Map.setZoom(5);
},{enableHighAccuracy:true, timeout: 3000, maximumAge:1000});
}
function shiftOrder(){
var http = new XMLHttpRequest();
http.onreadystatechange = function(){
console.log(this.responseText);
}
http.open("GET", "driverIndex.php?pop='pop'", true);
http.send();
}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap"
async defer></script>
</body>
</html>
_;
?>
I have called print_r($rows) and it returns values as it should. I even use it to reference lat & long in my Google Maps, so why can't array_shift($rows) work?
If needed to reproduce my example above, here is the used CSS stylesheet:
.TitleText{
font-size:200%;
}
.Banner{ /*This is test code to hold the top ad*/
width:100%;
text-align:center;
border-style:solid;
border-color:grey;
color:green;
font-size:230%;
font-weight:heavy;
letter-spacing:1px;
}
.TopNav{
margin-top:20px;
}
a:link{
text-decoration:none;
}
.login{
margin-top:15px;
margin-right:15px;
float:right;
border-style:solid;
border-color:grey;
border-radius:10px;
background-color:blue;
color:white;
font-size:30px;
}
.gallery{ /*This will hold the gallery Items*/
text-align:center;
display: inline-block;
width: 100%;
height: auto;
margin-top: 16px;
border-style: solid;
border-color: green;
}
.map{
width:100%;
height:400px;
border-style:solid;
}
.navButton{
background-color:green;
color:white;
font-size:30px;
margin-top: 16px;
text-align:center;
width:100%;
display: inline-block;
border-radius:10px;
border-style:solid;
border-color:red;
}
.orderButton{
background-color:green;
color:white;
font-size:30px;
margin-top: 16px;
text-align:center;
float:right;
display: inline-block;
border-style:solid;
border-right:red;
border-color:purple;
border-radius:10px;
width:100%;
height:auto;
}
.abortButton{
background-color:green;
color:white;
font-size:30px;
margin-top: 16px;
text-align:center;
border-style:solid;
border-color:yellow;
border-radius:10px;
width:100%;
height:auto;
display: inline-block;
}
.confirmButton{
background-color:green;
color:white;
font-size:30px;
margin-top: 16px;
text-align:center;
border-style:solid;
border-color:pink;
border-radius:10px;
width:100%;
height:auto;
display: inline-block;
}
h1{
font-weight:bold;
}
h3{
font-weight:bold;
color:green;
}
.disclaimer{
width:100%;
height:30px;
border-style:solid;
border-radius:10px;
border-color:grey;
text-align:center;
}
