Edited: I didn't understand the nature of the problem earlier
If I use javascript functions with page display changes from block to none and vice versa for redirecting between pages, how do I update pages after a user logs in to reflect the changes? I am a beginner in javascript and php, so there might be some obvious errors here, but my teacher couldn't find the problem either.
I have the file "Profile.php" with the code:
<div id="profile" style="display: none;">
<h1>Personal Profile</h1>
<?php
if ($_SESSION['logged_in'] == false){
echo('session logged in is false');}
else{
echo('session logged in is true');
}?>
</div>
In this file "session logged in is false" is always echoed, and this is the problem which I want to solve. This file is called in the file "Website_creation.php":
<?php
session_start();
$_SESSION['logged_in'] = false;
?>
<!DOCTYPE html>
<html>
<head>
<title>Nonograms website</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<?php
include "Main_menu.php";
include "Profile.php";
include "Nonogram_solving.php";
include "Profile_creation_and_log_in.php";
?>
</body>
<script src="Website creation.js" defer></script>
<script src="Save nonogram dimensions.js" defer></script>
<script src="Profile_creation_and_log_in.js" defer></script>
<script src="Log_in.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>
</html>
In "profile_creation_and_log_in.php", I call the js function "log_into_profile()" which is supposed to change _$SESSION["logged_in"] to True. A part of this function is:
if (xhr.status === 200) {
if (xhr.responseText === "PHP: Logged in successfully!") {
alert('Logged in successfully!');
// Make an AJAX call to set the session variable
$.ajax({
url: 'set_session_variable.php',
method: 'POST',
data: { logged_in: true },
});
goToProfileFromLogIn("profile-creation");
Where "set_session_variable.php" is
<?php
session_start();
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_POST['logged_in']) && $_POST['logged_in'] === 'true') {
$_SESSION['logged_in'] = true;
error_log("PHP: session set to logged in", 3, "session.log");
echo 'Session variable set successfully';
}
}
and the function "goToProfileLogIn" is
function goToProfileFromLogIn(pageId){
document.getElementById(pageId).style.display = 'none';
document.getElementById('profile').style.display = 'block';
}
So, how can I edit the code so that "session logged in is true" is output after the user logs in? Thank you!
So, the problem was that I didn't reload the html page after the user logged in, which is why the changes weren't displayed. To do that, the log_into_profile() function needed to be modified:
if (xhr.status === 200) {
if (xhr.responseText === "PHP: Username and password are valid") {
alert('Profile saved successfully!');
// Make an AJAX call to set the session variable
$.ajax({
url: 'set_session_variable.php',
method: 'POST',
data: { logged_in: true },
success: function(response) {
if (response === 'Session variable set successfully') {
// Profile_after_login.html contains all the html code for the version of the profile page that needs to be displayed now
$('#profile').load('Profile_after_login.html', function() {
goToProfileFromLogIn("profile-creation");
});
} else {
console.error('Failed to update session variable');
}
},
error: function() {
console.error('Failed to make AJAX call');
}
});
}
There might still be some issues with this code, because I have very little experience with js and php, but it solved my problem.