How do I reload an html page to make changes visible after a user logs in?

Question

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!

Unless you use JavaScript to update your page after the login is complete, then you won't see any change to the echoed Session status text unless you refresh your page - because AJAX requests don't automatically update the page, they only do a request in the background. — ADyson
– ADyson, Commented Feb 6, 2024 at 14:41
profile.php only executes (and generates output, which will either be "true" or "false") when website_creation.php includes it. Or if you include it from some other page that you are loading. Why don't you return that html from the ajax request and display it? — James
– James, Commented Feb 6, 2024 at 14:52
// Make an AJAX call to set the session variable - that so absolutely makes no sense ... Why did the profile_creation_and_log_in.php script, which you presumably sent the login credentials to for verification, not already set this session value itself? And what would stop me from making such a POST request to set_session_variable.php myself? Then your system would consider me "logged in", even if I never provided any valid credentials in the first place. — C3roe
– C3roe, Commented Feb 7, 2024 at 8:12

Marina Gurova · Accepted Answer · 2024-02-08 17:27:59Z

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.

Collectives™ on Stack Overflow

How do I reload an html page to make changes visible after a user logs in?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related