I am developing a web application using jQuery mobile 1.4.5.
The error:
Uncaught Error: cannot call methods on page prior to initialization; attempted to call method 'bindRemove'
It appears when I connect the front end with back end (using PHP to connect to the database) and I try to login: Link to web app
You should've got an error message displayed on the screen if you haven't typed anything
User: 10001 | Pass: 1q2w3e
You can also notice that it is going to log you in, but only if you refresh the page. Log out by pressing on the avatar
If i disable jQuery mobile, the Login works fine and I do not receive the console error (back end is functional on it's own)
I guess the problem is the order in which I call or initialize some functions. I think the best way would be to post my files here. If you have any suggestions about how can we help each other solve the problem quicker, please let me know.
Thank you ^_^
index.php
<?php
ob_start();
include 'core/init.php'; // Database connection (works)
include 'includes/header.php';
// Checkes is it is an admin session
if (logged_in() === true){
if (is_admin($session_user_id) === true){
header('Location:admin.php');
exit();
}
}
include 'includes/footer.php';
ob_end_flush();
?>
header.php
<!DOCTYPE html>
<html lang="en">
<?php
include 'includes/head.php';
if (logged_in() === true) {
include 'loggedin.php'; // Landing screen
}
else{
include 'core/widgets/login.php'; // Login screen
}
?>
head.php
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Configuration for Chrome web app -->
<link rel="manifest" href="manifest.json">
<!-- Fallback application metadata for legacy browsers -->
<meta name="application-name" content="SHO Loyalty">
<link rel="icon" sizes="128x128" href="128.png">
<link rel="apple-touch-icon" href="128.png">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="Sebastian Teo Popa, Viesturs Beinarovics">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Studenterhus Odense - Loyalty Program</title>
<!-- Preloader -->
<script src="js/queryloader2.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
new QueryLoader2(document.querySelector("body"), {
barColor: "#f4f4f4",
backgroundColor: "#2b2b2b",
percentage: true,
barHeight: 1,
//minimumTime: 200,
maxTime: 300,
fadeOutTime: 300
});
});
</script>
<!-- Font -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
<!-- Mobile jQuery Core CSS -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<!-- Custom styles for this template -->
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
login.php
<?php
ob_start();
include 'core/init.php';
logged_in_redirect();
include 'includes/header.php';
if (empty($_POST) === false) {
$user_id = $_POST['username'];
$password = $_POST['password'];
if (empty($user_id) === true || empty ($password) === true) {
$errors[] = 'You need to enter a username and password';
}
else if (user_exists($user_id) === false) {
$errors[] = 'We cant find that card number!';
}
/*else if (user_active($username) === false) {
$errors[] = 'you havent activated your account!'; }*/
else {
$login = login($user_id, $password);
if ($login === false) {
$errors[] = 'That username/password combination is incorrect';
} else {
$_SESSION['user_id'] = $login;
?>
<script>
//Adding the changeHash: false to avoid an issue with the iframe
$.mobile.changePage( "index.php", { transition: "fade" });
</script>
<?php
// header('Location: index.php');
exit();
}
}
} else { $errors[] = 'No data received';}
if (empty($errors) === false) {
ob_end_flush();
?>
<h4 style="color:red;"> We tried to log you in, but... </h4>
<?php
echo output_errors($errors);
}
include 'includes/footer.php';
?>
loggedin.php
<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="true">
<div data-role="header">
<h1>Card number</h1>
</div>
<div role="main" class="ui-content">
<h1 class="ui-title">123353</h1>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
<a href="logout.php" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" >Log out</a>
</div>
</div>
<!-- Header -->
<div class="header h-long cyan valign-parent">
<div class="valign-child">
<img id="logo" alt="logo" src="images/logo.png">
<a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" data-role="none" class="avatar-big center-block">
<?php echo '<img class="img-circle" src="', $user_data['profile'], '" alt="', $user_data['first_name'],' \'s profile image">'; ?>
</a>
<h1><?php echo $user_data['first_name'], ' ', $user_data['last_name']; ?></h1>
<h4><?php echo $user_data['points']; ?><sup>P</sup></h4>
</div>
</div> <!-- /bigHeader -->
<div class="fullBlurWrapper">
<div class="fullBlur"></div>
</div>
<div role="main" class="ui-content no-padding landing">
<div class="ui-grid-a">
<div class="ui-block-a valign-parent sec-button">
<div class="sec-inner valign-child">
<a href="pointShop.php" data-prefetch="true" data-transition="slideup" class="fa fa-gift img-circle red"></a>
<h4>POINT SHOP</h4>
</div>
</div>
<div class="ui-block-b valign-parent sec-button">
<div class="sec-inner valign-child">
<a href="achievements.html" data-prefetch="true" data-transition="slideup" class="fa fa-star img-circle yellow"></a>
<h4>ACHIEVEMENTS</h4>
</div>
</div>
<div class="ui-block-a valign-parent sec-button">
<div class="sec-inner valign-child">
<a href="highscores.html" data-prefetch="true" data-transition="slideup" class="fa fa-group img-circle green"></a>
<h4>HIGHSCORES</h4>
</div>
</div>
<div class="ui-block-b valign-parent sec-button">
<div class="sec-inner valign-child">
<a href="howto.html" data-prefetch="true" data-transition="slideup" class="fa fa-info img-circle purple"></a>
<h4>HOW TO</h4>
</div>
</div>
</div>
</div><!-- /content -->
core/widgets/login.php
<div class="container">
<h1> LOG IN </h1>
<form action="login.php" method="post">
<ul id="login">
<li>
Card number: <br>
<input type="text" name="username">
</li>
<li>
Password: <br>
<input type="password" name="password">
</li>
<li>
<input type="submit" value="Log in">
</li>
</ul>
