checklogin.php
<?php
session_start();
$host="localhost"; // Host name
$username="root"; // Mysql username
$password="bonjour3"; // Mysql password
$db_name="itit"; // Database name
$tbl_name="members"; // Table name
// Connect to server and select databse.
$mysqli = new mysqli("$host", "$username", "$password", "$db_name")or die("cannot connect");
// Define $myusername and $mypassword
$myusername=$_POST['myusername'];
$mypassword=$_POST['mypassword'];
$sql = $mysqli->prepare("SELECT * FROM $tbl_name WHERE username=? and password=?");
$sql->bind_param('ss',$myusername,$mypassword);
$sql->execute();
$sql->store_result();//apply to prepare statement
$numRows = $sql->num_rows;
if($numRows === 1){
$_SESSION['username'] = $myusername;
var_dump($_SESSION['username']);
}
else
{
echo "Wrong Username or Password";
session_destroy();
}
?>
The above script runs when someone logs in using this form:
templates/indexforms.php
<?php
session_start();
?>
<form id="login" method="post" action="checklogin.php">
<h1>Member Login</h1>
<p>Username:<input name="myusername" type="text" id="myusername"></p>
<p>Password:<input name="mypassword" type="password" id="mypassword"></p>
<input type="submit" name="Submit" value="Login">
</form>
The above template gets loaded into index.php (below). I am trying to write an SPA so everything is being loaded and unloaded into the "main" div using jquery.
index.php
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>it IT</title>
<script src="reqscripts/jquery.js" type="text/javascript"></script>
<script src="js/application.js" type="text/javascript"></script>
</head>
<body>
<div id="main"></div>
</body>
</html>
Here is the jquery/ajax code which loads and unloads elements:
js/application.js
$(document).ready(function() {
$("#main").load("templates/indexforms.php", function () {
//When login form is submitted
$("#login").submit(function(e) {
e.preventDefault();
$.post("checklogin.php", $(this).serialize(), function() { //ajax post call
$("#main").load("templates/login_success.php"); //load template
$("#login").remove(); //remove form
});
});
$(document).on("click", "#logoutlinkdiv a", function(e) {
e.preventDefault();
$("#main").empty();
$("#main").load("templates/logout.php");
});
$(document).on("click", "#loginlinkdiv a", function(e) {
e.preventDefault();
$("#main").empty();
$("#main").load("templates/indexforms.php");
});
});
});
After login, the jquery loads a "login_success.php" template:
templates/login_success.php
<?php
session_start();
?>
<h1>Login Successful</h1>
<h2>Username: <? echo $_SESSION['username']?></h2>
<div id="logoutlinkdiv" >
<a href = "#" >Log out</a>
</div>
If you click the "logoutlinkdiv" link, the jquery loads a template "logout.php":
templates/logout.php
<?php
session_start();
session_destroy();
?>
<div id="loginlinkdiv" >
<h2>You have been logged out.</h2>
<a href = "#">Log in</a>
</div>
If you click the "Log in" link on the above template...the indexforms.php template gets loaded (above). Then, I try to login again. The checklogin.php script gets run and 'string(4) "obey"' gets displayed. This makes sense because I did a var_dump() for the username (obey) in the if block of checklogin.php. However, it seems like the jquery doesn't get executed...because the login_success.php page never loads. If I reload "index.php" and login again...it works - Basically, I don't understand why the flow of my program is acting like this.
UPDATE
Here is what I see in the firebug console under the NET tab. A bunch of requests stack up - until I go to login for a second time. Then, the requests clear...and only one request remains:
I load the index page and I see:
GET http://localhost/~Eamon/ 200 OK
GET http://localhost/~Eamon/templates/indexforms.php 200 OK
I click the login link and see:
POST http://localhost/~Eamon/checklogin.php 200 OK
GET jquery.js 304 Not Modified
GET application.js 304 Not Modified
GET http://localhost/~Eamon/templates/login_success.php 200 OK
I click the logout link and see:
GET http://localhost/~Eamon/templates/logout.php 200 OK
Then I click the link that brings me to the login page again, and I see:
GET http://localhost/~Eamon/templates/indexforms.php 200 OK
Then, I enter my info and log in again and all the requests clear, and I only see:
POST http://localhost/~Eamon/checklogin.php 200 OK
I think I should be seeing:
POST http://localhost/~Eamon/checklogin.php 200 OK
GET jquery.js 304 Not Modified
GET application.js 304 Not Modified
