JavaScript not loading after PHP header() redirect

Question

I have a page where a user can sign in by submitting a basic form, the data is sent to a separate PHP script (for validation, etc). The PHP script ends with the header() function to direct the user to a welcome page:

// form validation above
header(Location: ../welcome.php);
exit();

I would like to be able to run some JavaScript on the welcome page, however I am noticing that even this basic code won't fire:

$(document).ready(function() {
    console.log("ready!");
});

I have split the welcome page using PHP include to separate the header, body, and footer:

The Header:

<?php 
session_start();
?>

<!DOCTYPE html>
<html>
<head>
    <!-- HOSTED ONLINE -->
    <!-- Google Fonts: Lato & Pacifio -->
    <link href="https://fonts.googleapis.com/css?family=Lato|Pacifico" rel="stylesheet">
    <!-- Font Awesome -->
    <script src="https://use.fontawesome.com/3d58889dd8.js"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Bootstrap jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- jQuery -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <!-- jQuery UI -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- LOCAL -->
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="resources/style.css">
    <!-- JavaScript -->
    <script type="text/javascript" src="resources/script.js"></script>
    <!-- Animate.css -->
    <link rel="stylesheet" href="resources/animate.css">

    <title>Website Title</title>
</head>

<body class="userBody">
    <!-- title card -->
    <div class="container-fluid titleCard">
        <h1 class="pacificoFont mainTitle">Website Title</h1>
    </div>

The Body:

<?php
include_once "user_header.php";
?>

<div>
    <?php
    echo "welcome " . $_SESSION["username"] . "!<br>";
    echo "Your email is " . $_SESSION["email"];
    echo '<form action="includes/logout_inc.php" method="POST">
    <button type="submit" name="submit">Logout</button></form>';
    ?>
</div>

<div class="test" id="test">
    Test
</div>

<?php
include_once "user_footer.php";
?>

The Footer:

</body>
</html>

I do believe the local JavaScript is properly linked, where it's in the same directory as the CSS and the styling is linked and working. I am also running this locally using MAMP (if that info helps).

It's probably quite noticeable that I am very new at PHP/JavaScript. Any help would be deeply appreciated! Thank you for taking the time :)

Well all seems fine only `header(Location: ../welcome.php);` should be `header('Location: ../welcome.php');`, I see you forgot the quotes. Do you see the content of `welcome.php` at all? — codtex, Aug 24 '17 at 14:29
Also, use an absolute url like `/welcome.php`. Does the H1 tag display? If you inspect element and look at the markup, is everything there? — delboy1978uk, Aug 24 '17 at 14:30
@codtex I do have the quotes in my code, for some reason the copy-paste removed them, sorry. I am able to see the welcome.php page. — Sam Sverko, Aug 24 '17 at 14:58
@delboy1978uk My H1 tag does display. Thank you both for your comments :) Emmanuel below fixed my issue. — Sam Sverko, Aug 24 '17 at 14:59
@Sam this is very strange that putting your script tag on the bottom of the document fixed your problem, because your code is wrapped inside `$(document).ready()` function which should make sure that the javascript passed inside the `ready()` method callback will always be executed once the document is fully loaded — codtex, Aug 25 '17 at 06:29

score 0 · Accepted Answer · answered Aug 24 '17 at 14:33

the javascript reference should be at the bottom of the HTML page before the closing body tag. Just cut the reference of the javascript to the the page bottom below:

<script type="text/javascript" src="resources/script.js"></script>
</body>
</html>

The problem is that jquery got rendered before your page load.

JavaScript not loading after PHP header() redirect

1 Answers1

Linked