I'm making a simple app which lets a user view and edit items in a database, and add new ones as well.
I want a user to be able to click an item, say "Fiddle", on my 'index.php' page, and have it redirect to a new page, 'itemDisplay.php', where it displays the information (weight, length, width, height) of the item.
This is my dropdown selector:
'index.php'
<div class="btn-group w-25">
<button
type="button"
class="btn btn-outline-dark dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
Items
</button>
<div class="dropdown-menu w-100">
<a
class="dropdown-item"
href="itemDisplay.php"
id = "Fiddle"
onclick = "getItemInfo(this.id)">
Fiddle
</a>
<a
class="dropdown-item"
href="itemDisplay.php"
id = "Dish"
onclick = "getItemInfo(this.id)">
Dish
</a>
<a
class="dropdown-item"
href="itemDisplay.php"
id = "Spoon"
onclick = "getItemInfo(this.id)">
Spoon
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="./createItem.php">Create New Item</a>
</div>
</div>
And this is my 'getItemInfo()' function, in the same file:
'index.php'
<script>
function getItemInfo(id){
$.ajax({
url:"itemDisplay.php",
type: "POST",
data: {name: JSON.stringify(id)}
})
.fail(function(){
console.log("sad");
})
.done(function(response){
console.log(response);
});
}
</script>
Finally, here is the 'itemDisplay.php' file:
'itemDisplay.php'
<?php
session_start();
require_once "itemManagement/dbConnect.php";
require_once "itemManagement/items.php";
$_SESSION["name"] = json_decode($_POST["name"]);
$myItem = new Item;
$test = "test";
$itemWeight = $myItem -> getItemWeight($name);
$itemLength = $myItem -> getItemLength($name);
$itemWidth = $myItem -> getItemWidth($name);
$itemHeight = $myItem -> getItemHeight($name);
echo $_SESSION["name"];
echo $test;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="./problem4.css">
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>
<title>Item Display</title>
</head>
<body>
<header class="sans-serif">
<div class="cover bg-left bg-center-l">
<div class="pb5 pb6-m pb7-l">
<div class="tc-l mt4 mt5-m mt6-l ph3">
<h1 class="f2 f1-l fw2 black-90 mb0 lh-title">
<?php echo $_SESSION["name"]; ?>
</h1>
</div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
The logged response from the ajax call in the console shows this if I click "Fiddle":
'console.log(response) output from index.php'
Fiddletest
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="./problem4.css">
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>
<title>Item Display</title>
</head>
<body>
<header class="sans-serif">
<div class="cover bg-left bg-center-l">
<div class="pb5 pb6-m pb7-l">
<div class="tc-l mt4 mt5-m mt6-l ph3">
<h1 class="f2 f1-l fw2 black-90 mb0 lh-title">
Fiddle </h1>
</div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
My issue is that once the 'itemDisplay.php' page loads, the only thing rendered on the screen is "test" in the top left corner. I've been completely stuck on being able to display the $name variable.
After some research, I learnt that variables are not saved between requests, which I thought was my problem, so I changed the $name variable to a session variable. This did not seem to affect anything.
I also tried putting a conditional to only render the $test variable if 'isset($_SESSION["name])', to test if the variable wasn't displaying because it was NULL somehow, but that still just rendered "test".
I am quite stumped now because it seems that the variable is indeed set on that page load, but I don't have access to it.
Any help would be greatly appreciated!