When you follow the link to item-display, $_POST['name'] is not set, so you assign null to $_SESSION['name']. You need to check whether the POST variable is set before assigning it.
if (isset($_POST['name']) {
$_SESSION['name'] = $_POST['name'];
}
Note that your method of using AJAX first and then linking is not safe. Since AJAX is asynchronous, there’s no guarantee that the AJAX request will complete before you link to the page, so the session variable might not be set yet. It would be better to redirect in the .done() function:
.done(function() {
location.href = "itemDisplay.php?name=Dish";
})
I’m not sure why you feel the need to use AJAX for this. You can just put the parameter in the URLs, like this:
<a
class="dropdown-item"
href="itemDisplay.php?name=Dish"
id = "Dish">
Dish
</a>
Then use $_GET['name'] in the script.
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.js
<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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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!
@Nelles HTML attributes are case-insensitive, so it doesn’t matter.
@Barmar understood – I figured it was a more in depth issue.
@Barmar I saw your response to stop the redirect, but the problem is that I specifically want the click to redirect to a new page to display the information. Am I approaching this incorrectly?
@ratiugo I read your question more carefully, and update the anwer.
I was using AJAX literally only because I did not clue into sending the parameter in the URL. Whoops. I’m very new to back-end programming in general, and I had zero experience with PHP or JQuery before this project, so it’s been a bit tricky. Thanks so much though, that makes everything way easier!
