JavaScript not loading after PHP header() redirect - javascript

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 :)

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.

Related

Javascript is not working after implementing bootstrap

Hy Guys
I have a problem with my Javascript. Since I implementet Bootstrap it won't work anymore. Even simple things like an alert with an onclick function won't work.
Here is my code:
Implementet Scripts
<link type="text/css" href="../CSS/main1.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<script type="text/javascript" src="../JS/main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
Simple HTML
<!DOCTYPE html>
<html>
<head>
<?php require 'scripts.php'; ?>
</head>
<header>
<?php include 'header.php'; ?>
</header>
<body>
<div class="container-fluid d-block d-sm-none">
<!-- LAYOUT FOR MOBILE -->
<div class="row">
<div class="col">
<button class="s-button" id="show-login" onclick="test()">Login</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="s-button">Register</button>
</div>
</div>
</div>
</body>
</html>
Javascript
function test(){
alert('hallo');
}
I am programming since a bit know so it could be possible that I'm overlooking somthing simple but I'm not seeing it.
Make sure to put the JS function before the actual call in HTML. Also check your JS console to see if there are any errors there.
your javascript should load though, and you can just use this directly <script src="../JS/main.js"></script>
and ensure it is properly addressed i.e the JS is really uppercase.
and you could also put the main.js file above the bootstrap js file
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Try this:
Using <script type="text/javascript" src="JS/main.js"></script> as the link to your HTML, assuming the JS directory is in the same directory as your index.html file.
Put your links to external stuff in the HTML head. (It was unclear from your post whether or not you did.) You don't need to put them at the end of your HTML if you use $(document).ready(function(){ //do stuff here }); which you should use anyway because jQuery is already included in your project since you're using Bootstrap. (You can declare your test function outside of the document ready call, and should.)
I am pretty sure the Bootstrap CSS link you were using was corrupted (or something), so I changed that to use MaxCDN.
My guess is your CSS isn't working either. Try changing something obvious with it to check. The '..' in a link means to move 'back' one directory, so chances are the browser is looking for this file somewhere that it doesn't exist.
Take a look at this for more information about how to link to files, and consider trying an HTML validator.
Please let me know if you have any questions or if this doesn't work for you. When I started web development, I would spend hours trying to figure this stuff out.
So your HTML would look like:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="../CSS/main1.css" rel="stylesheet" />
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
<script type="text/javascript" src="JS/main.js"></script>
<?php require 'scripts.php'; ?>
</head>
<header>
<?php include 'header.php'; ?>
</header>
<body>
<div class="container-fluid d-block d-sm-none">
<!-- LAYOUT FOR MOBILE -->
<div class="row">
<div class="col">
<button class="s-button" id="show-login" onclick="test()">Login</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="s-button">Register</button>
</div>
</div>
</div>
</body>
</html>
For bonus points: if you need to see the console or to know anything about what is going on in either Firefox or Chrome, hit ctrl shift i and click around. If you think something has gone wrong, just hit the refresh button.
So after spending another hour figuring out what is wrong with the code I found out that the code is correct form day one. The problem is that I am using Firefox Mobile Emulator to test the app and this won't show any alert window. When I deactivate the emulation and run the website as normal the alert box will show up as the button is clicked. So now I have installed Chrome and tested it there (also with the mobile emulator) and it works fine. So Firefox knows the problem (as forums post show) but they didn't fix it yet.
Anyway thank you all for the help.

Bootstrap CSS not loading properly, looks like a typical HTML/CSS drop down menu instead

I found the bootstrap plugin for Select2 on github here and can't seem to get it properly working on my website. I will paste my code below. I can't tell if theres too much competing CSS already on the server, or if I just have things placed in the wrong place. I am kinda new to using this stuff, but I am trying to get it all figured out.
<?php
/*==================================================================================
README:
This global var (`root_dir`) must be set to the relative path
of the root directory.
E.g.
If this page is in "career.clemson.edu/coop/"
then the line should read
$GLOBALS["root_dir"]="../";
or if this page is in "career.clemson.edu/coop/students/";
then the line should read
$GLOBALS["root_dir"]="../../";
The template automatically includes common meta elemtents (keywords, etc),
common CSS files (ours, bootstrap, font-awesome), a fallback fon non-HTML5 compliant
browsers, and some basic javasript files at the end of the page.
Feel free to add any other things as needed on a per page basis!
All includes *should* in %root_dir%/includes
==================================================================================*/
$GLOBALS["root_dir"]="../";
require_once $GLOBALS["root_dir"].'includes.inc';
?>
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<?php
require_once $GLOBALS['include_loc']."common_meta.inc";
require_once $GLOBALS['include_loc']."common_css.inc";
require_once $GLOBALS['include_loc']."html5_shiv.inc";
?>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<title>Resumes and Cover Letters</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- jQuery library -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Latest compiled JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<?php require_once $GLOBALS["include_loc"]."top_menu.inc";?> <!-- Top Menu -->
<div class span="row">
<script type="text/javascript">
$(".js-example-placeholder-multiple").select2({
placeholder: "Select a state"
});
</script>
<select class="js-example-placeholder-multiple">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
<?php require_once $GLOBALS["include_loc"]."footer.inc";?> <!-- Footer -->
<?php require_once $GLOBALS['include_loc']."basic_js.inc"; ?> <!--Include JS Files at the end for speed-->
</body>
</html>
There are four things wrong here.
You haven't included Bootstrap JS.
To do so, just include this:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
In either the <head> tag or the <body> tag.
You haven't included jQuery either. Both Bootstrap and select2 require jQuery.
To include jQuery, insert this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
In either the <head> tag or the <body> tag, but make sure that it is before the Bootstrap and select2 JS.
Your <select> has the class js-example-basic-single, but you are calling the select2 plugin on the class js-example-placeholder-multiple.
Fix this, and the plugin should work.
(This one is minor) This div: <div class span="row"> isn't closed with a </div> in your code. Also, <div class span="row"> doesn't seem quite right.
$(".js-example-basic-single").select2({
placeholder: "Select a state"
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<title>Resumes and Cover Letters</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<!-- Top Menu -->
<div class span="row">
<select class="js-example-basic-single">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</div>
</body>
</html>

Putting jQuery at the bottom of my HTML templates is inflexible

I have been re-factoring some of my templates and have put the link to jQuery code at the bottom of my template files to keep page load speeds fast.
I also have some javascript modules that I only use on specific pages so I don't include these in the main template but rather inside the content.
Here is how the templates look....
<html>
<head>
</head>
<body>
<!-- navigation -->
<nav></nav>
<!-- end navigation -->
<!-- main content -->
<?php $this->load->view($module . '/' . $view_file); ?>
<!-- end main content -->
<!-- footer -->
<footer></footer>
<!-- end footer -->
<!-- javascript dependencies -->
<script src="<?php echo base_url('bower_components/jquery/dist/jquery.min.js'); ?>"></script>
</body>
</html>
If I add custom js code to a specific page inside the template like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- navigation -->
<nav></nav>
<!-- end navigation -->
<!-- main content -->
<?php $this->load->view($module . '/' . $view_file); ?>
<!-- end main content -->
<script src="some custom js that uses jQuery"></script>
<!-- footer -->
<footer></footer>
<!-- end footer -->
<!-- javascript dependencies -->
<script src="<?php echo base_url('bower_components/jquery/dist/jquery.min.js'); ?>"></script>
</body>
</html>
I get errors
ReferenceError: $ is not defined
So do I have to put my jQuery and other dependencies in the document head or is there another way?
You get this error because the script is running before jQuery has been loaded, so it is undefined.
To fix this, just place your custom script in the line below the jQuery import and it should work.
Alternatively, put the jQuery import higher in the page so it is always above your custom scripts and it will work.

Javascript not loaded when loading php file which need other javascript file

I develop a chat widget using php (chat.php) and want to add it into another php page (blank.php). chat.php requires script that I put in Javascript files outside.
So in blank.php, I included js files that chat.php needed.
<!DOCTYPE html>
<html lang="en">
<head>
<!--code-->
</head>
<body>
<div id='includedContent'></div>
<!--dependency for chat.php-->
<link type="text/css" href="http://localhost/chatbox/gplus/chat.css" rel="stylesheet" />
<link type="text/css" href="http://localhost/chatbox/gplus/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://localhost/chatbox/gplus/bootstrap.min.js"></script>
<script type="text/javascript" src="http://localhost/chatbox/gplus/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/chatbox/gplus/chat.js"></script>
<script type="text/javascript" src="http://localhost/chatbox/gplus/moment.min.js"></script>
<!--end-->
<!--include chat.php-->
<script>
$("#includedContent").load("http://localhost/chatbox/gplus/chat.php");
</script>
<!--end-->
</body>
</html>
chat.php is loaded but the Javascript does not load for chat.php.
I also tried to use this and it works
<!--include chat.php-->
<?php
$chat = file_get_contents('http://localhost/chatbox/gplus/chat.php');
echo $chat;
//or by using - include './chat.php';
?>
<!--end-->
But I wonder if there is a solution using javascript so I can include chat.php into blank.php, and chat.php can execute the js script included in blank.php. I put the script in blank.php to avoid script conflict between widget and hosting page.
Thank you.
I think what you need to use is include statement in PHP. See this LINK.
Basic example on how to use:
For vars.php:
<?php
$color = 'green';
$fruit = 'apple';
?>
Included in test.php:
<?php
echo "A $color $fruit"; // A
include 'vars.php';
echo "A $color $fruit"; // A green apple
?>

Javascript redirection is not working

I am creating a mobile version of my application . This is a part of the settings page (mysettings.php).
if(!isset($_SESSION['access_token']))
{
echo("<script type='text/javascript'> window.top.location.href='http://www.example.com/mobile/login.php'</script>");
}
If the access_token is not set then it should redirect to the login.php but i cant understand why isnt it working.
In the rendered source code I can see because the redirection is not occurring is ( The redirection code exists )
<script type='text/javascript'> window.top.location='http://www.example.com/mobile/login.php'</script>
<!DOCTYPE html>
<html>
<head>...
.
.
.</html>
I am using Chrome and this is source code from where I am logging to mysettings.php page
<?php
session_start();
$logins=0;
?>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Settings</h1>
</div><!-- /header -->
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">Settings </div>
<div class="ui-block-b">My Pictures </div>
</div>
</div><!-- /content -->
<div data-role="footer">
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
You can use the header PHP function to perform a redirect:
<?php
if(!isset($_SESSION['access_token'])) {
header("Location: http://www.example.com/mobile/login.php");
exit;
}
?>
Note that this will need to be performed before sending any HTML markup
Perhaps try using the php header("Location: http://some/url"); or also try to use window.location.href instaed of top lastly try to put the script instead the document markup instead of before it (might work?...)
I added
data-ajax="false"
to the button on mysettings.php and it started working fine. Thank you

Categories