Search code examples
javascriptphphtmlsession-variables

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


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!


Solution

  • 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.