I'm facing a problem of jQuery in index.php not running when i include the file header.php. The nav sidebar were included but when i press the chevron, nothing happened? It only worked if i include header_user.php directly without checking the UserType in header.php. I cant just include header_user.php directly since i need the page to be displayed based on the UserType. In this code, assume that the current UserType is a USER. Please help. I don't know what is the problem.
index.php
<?php
require_once 'session.php';
require_once 'connection.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nav Sidebar</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/dashboard.css" rel="stylesheet">
<script>
var change = true;
$(document).ready(function () {
$('[data-toggle=offcanvas]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
});
function toggle_caret() {
$("#caret1").toggleClass("glyphicon-chevron-down", change);
$("#caret1").toggleClass("glyphicon-chevron-left", !change);
change = !change
}
</script>
</head>
<body>
<?php include 'header/header.php'; ?>
<script src="jquery-1.11.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
header.php
<?php
$UType = $_SESSION['UserType'];
$tsql = "SELECT * FROM [dbo].[LOGIN] WHERE UserType='$UType'";
$result = sqlsrv_query( $conn, $tsql, array(), array( "Scrollable" => SQLSRV_CURSOR_KEYSET ));
while($row=sqlsrv_fetch_array($result))
{
if($UType == "USER")
{
include 'header_user.php';
}
else if ($UType == "SUPERIOR")
{
include 'header_superior.php';
}
else if ($UType == "ADMIN")
{
include 'header_admin.php';
}
else
die("Not a Valid User Type.");
}
?>
header_user.php
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#"><span class="glyphicon glyphicon-dashboard"></span> Dashboard<span class="sr-only">(current)</span></a>
</li>
<li onclick="toggle_caret()"><a href="#" data-toggle="collapse" data-target="#sub1"><span class="glyphicon glyphicon-list-alt"></span> Requisition<small><span style="float:right" id="caret1" class="glyphicon glyphicon-chevron-down"></span></small></a>
</li>
<ul class="nav collapse" id="sub1">
<li><a href="#"><span class="glyphicon glyphicon-file"></span> Form</a>
</li>
<li class="nav-divider"></li>
<li><a href="#">Status</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-ok"></span> Approved</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-remove"></span> Rejected</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-refresh"></span> In Process</a>
</li>
</ul>
</ul>
<ul class="nav nav-sidebar">
<li class="nav-divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span> Search</a>
</li>
</ul>
</div>
EDIT
I've found that after i changed the query as below, the jQuery worked. Can somebody explain why it happened?
header.php
<?php
$UType = $_SESSION['UserType'];
if($UType == "USER")
{
include 'header_user.php';
}
else if ($UType == "SUPERIOR")
{
include 'header_superior.php';
}
else if ($UType == "ADMIN")
{
include 'header_admin.php';
}
else
die("Not a Valid User Type.");
?>
I just gathered all the sources and tested your HTML locally. I'm getting some errors, so I suggest changing your code to this:
index.php (Moved JS code beneath jQuery and Bootstrap script tags)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
require_once 'session.php';
require_once 'connection.php';
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nav Sidebar</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/dashboard.css" rel="stylesheet">
</head>
<body>
<?php include 'header/header.php'; ?>
<script src="jquery-1.11.1.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>
var change = true;
$(document).ready(function () {
$('[data-toggle=offcanvas]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
});
function toggle_caret() {
$("#caret1").toggleClass("glyphicon-chevron-down", change);
$("#caret1").toggleClass("glyphicon-chevron-left", !change);
change = !change
}
</script>
</body>
</html>
header.php (Removed the database code, since that seemed to be the root of your problem)
<?php
$UType = $_SESSION['UserType'];
if($UType == "USER")
{
include 'header_user.php';
}
else if ($UType == "SUPERIOR")
{
include 'header_superior.php';
}
else if ($UType == "ADMIN")
{
include 'header_admin.php';
}
else
{
die("Not a Valid User Type.");
}
?>
header_user.php (Adding missing closing div tag)
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#"><span class="glyphicon glyphicon-dashboard"></span> Dashboard<span class="sr-only">(current)</span></a>
</li>
<li onclick="toggle_caret()"><a href="#" data-toggle="collapse" data-target="#sub1"><span class="glyphicon glyphicon-list-alt"></span> Requisition<small><span style="float:right" id="caret1" class="glyphicon glyphicon-chevron-down"></span></small></a>
</li>
<ul class="nav collapse" id="sub1">
<li><a href="#"><span class="glyphicon glyphicon-file"></span> Form</a>
</li>
<li class="nav-divider"></li>
<li><a href="#">Status</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-ok"></span> Approved</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-remove"></span> Rejected</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-refresh"></span> In Process</a>
</li>
</ul>
</ul>
<ul class="nav nav-sidebar">
<li class="nav-divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span> Search</a>
</li>
</ul>
</div>
</div>
</div>