I am using DataTables to have a pagination.
I think I set the script correctly, since I followed the instruction in their website. But feel free to pinpoint if there's any wrong/mistake to the indicated script link
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin Reservation Management</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/datepicker3.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$('#myTable').DataTable();
});
</script>
<!--Custom Font-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style type="text/css">
td,tr {
white-space: nowrap;
width: 45%;
}
th{
text-align: center;
}
form {
display: inline;
}
</style>
</head>
And now this is my table and stuff, I am fetching the datas from my database.
I did some research here in Stackoverflow, regarding to this issue and the results that I've found was they did not put and which I included, but feel free to pinpoint if I haven't included any.*
php
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<div class="row">
<ol class="breadcrumb">
<li> <em class="fa fa-home"></em></li>
<li class="active">Manage Room</li>
</ol>
</div>
<div class="row">
<div class="col-lg-12">
<br>
<h3> Super Admin Reservation Management </h3>
<hr>
<!-- ################### FUNCTIONALITY ####################### -->
<!-- ################### FUNCTIONALITY ####################### -->
<div class="container">
</div>
<br>
<div class="container">
<table class="table table-bordered" id="myTable" style="background-color: white;" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th> Room Number</th>
<th> Room Availability </th>
<th> Action </th>
</tr>
</thead>
<!-- ############################################# FETCHING DATA FROM THE DATABASE ######################################################### -->
<?php
$connection = mysqli_connect("localhost", "root");
$db = mysqli_select_db($connection, 'db_hotelreservation');
$query = "SELECT * FROM tbl_reservation WHERE room_status = 'Pending' OR room_status ='Booked'";
$query_run = mysqli_query($connection, $query);
$resultCheck = mysqli_num_rows($query_run);
if($resultCheck > 0)
{
while($row = mysqli_fetch_assoc($query_run))
{
?>
<tbody>
<tr>
<td style="display: none;"> <?php echo $row['ID'];?> </td>
<td> <?php echo $row['room_number']; ?></td>
<td> <?php echo $row['room_status'];?></td>
<td style="display: none;"> <?php echo $row['room_type'];?> </td>
<td style="display: none;"> <?php echo $row['first_name'] . " " .$row['last_name']?> </td>
<td style="display: none;"> <?php echo $row['check_in'];?> </td>
<td style="display: none;"> <?php echo $row['check_out'];?> </td>
<td style="display: none;"> <?php echo $row['contact_number'];?> </td>
<td style="display: none;"> <?php echo $row['numberof_days'] ." ". "day/s";?> </td>
<td style="display: none;"> <?php echo $row['calculated_price'];?> </td>
<td>
<form action="approve.php" method="POST" onclick="return confirm('Are you sure you want to Approve this Booking?');">
<input type="hidden" name="id" value="<?php echo $row['ID'] ?>" style="">
<input type="submit" name="update" class="btn btn-success" value="Approve">
</form>
<button type="button" class="btn btn-primary viewbtn">View Details</button>
</td>
</tr>
</tbody>
<?php
}
}
else{
echo "No Records Found";
}
?>
</table>
</div>
</div>
</div>
</div>
This might be because of delayed data binding, you can try datatable ajax approach to bind the data. Refer datatable option.
Related
I have created only one file index.php
in the header part I have included CSS link form the datatables.net
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<title>Crud application</title>
</head>
I have given the id as table in body section
<table class="table" id="mytable">
<thead>
<tr>
<th scope="col">Sno</th>
<th scope="col">Title</th>
<th scope="col">Descriptioin</th>
<th scope="col">Action</th>
</tr>
</thead>
I have included JS CDN from datables.net and also the function at the end of the body tag
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</body>
but the tables are displaying as shown in the datatables.net.
there are no errors in the console.
full code
<?php
//INSERT INTO `note` (`sno`, `title`, `description`, `tstamp`) VALUES (NULL, 'Buy fruits', 'buy fruits now', current_timestamp());
$insert = false;
$server = "localhost";
$user = "root";
$password = "";
$dbase = "notes";
// create a connection
$conn = mysqli_connect($server, $user, $password, $dbase);
// die connection if not connected
if(!$conn){
die("sorry connection not established".mysqli_connect_error());
}
// updating the database
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$title = $_POST['title'];
$description = $_POST['description'];
}
global $title; global $description;
// adding the query
$sqld = "INSERT INTO `note` (`title`, `description`) VALUES ('$title', '$description')";
$resultd = mysqli_query($conn, $sqld);
// checking the query wether updated
if($resultd){
//echo "success";
$insert = true;
}
else{
echo "not success". mysqli_connect_error();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<title>Crud application</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">PHP Crud</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<?php
if($insert){
echo"<div class='alert alert-success alert-dismissible fade show' role='alert'>
<strong>Success</strong> your notes submitted successfully.
<button type='button' class='close' data-dismiss='alert' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>";
}
?>
<div class="container my-4">
<form action="/crud/index.php" method="POST">
<h2>Add a note</h2>
<div class="form-group">
<label for="title">Note title</label>
<input type="text" class="form-control" id="title" name="title" aria-describedby="emailHelp" placeholder="note">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="description">note description</label>
<textarea class="form-control" id="description" name="description" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Add note</button>
</form>
</div>
<div class="container">
<table class="table" id="mytable">
<thead>
<tr>
<th scope="col">Sno</th>
<th scope="col">Title</th>
<th scope="col">Descriptioin</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM `note`";
$result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_assoc($result)){
echo "<tr>
<th scope='row'>". $row['sno']."</th>
<td>". $row['title']."</td>
<td>". $row['description']."</td>
<td>Actions</td>
</tr>";
}
?>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</body>
</html>
6) screenshot
screentshot of tables
(1) Change $('#myTable').DataTable(); to $('#mytable').DataTable();
this worked fine for me and displayed my search table
Please help me, again. Because I'm newbie.
i've problem with my datatable. when i load in my chrome, it give me feedback like this:
i try to add this code, but it also doesnt work. what must i do?
<script type="text/javascript">
$(document).ready(function(){
siswa.php code:
<?php
$this->load->view('admin/head.php');
?>
<body>
<div class="wrapper">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Data Berhasil Dimasukkan</h4>
<br>
<a class="btn btn-info" href="<?php echo site_url("admin/nav_admin");?>" role="button" float="right">Back To</a>
<br>
<br>
<table class="table table-striped" style="width:100%">
<thead>
<tr>
<th style="width:20%">NISN</th>
<th style="width:35%">Nama</th>
<th style="width:15%">Jenis Kelamin</th>
<th style="width:20%">Nilai</th>
<th style="width:20%">Jurusan</th>
</tr>
</thead>
<tbody>
<?php
if( ! empty($import)){ // Jika data pada database tidak sama dengan empty (alias ada datanya)
foreach($import as $data){ // Lakukan looping pada variabel siswa dari controller
echo "<tr>";
echo "<td>".$data->nisn."</td>";
echo "<td>".$data->nama."</td>";
echo "<td>".$data->jenis_kelamin."</td>";
echo "<td>".$data->nilai_rata."</td>";
echo "<td>".$data->kode_jurusan."</td>";
echo "</tr>";
}
} else{ // Jika data tidak ada
echo "<tr><td colspan='4'>Data tidak ada</td></tr>";
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript"> // uncaught referenceerror $ is not defined in datatable
$(function(){
$("table").DataTable();
});
</script>
here's the head.php code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Halaman Admin</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="<?php echo base_url('assets/css/stylesidebar.css');?>">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>
Put your js code in:
jQuery(function($){
});
I am making a portal of games where different games are showing on index page.
There are two procedures of playing games:
When user opens the index page and clicks on any game, if he is not logged-in already, then login form is showing on play.php; when user logs in then game will start
When user opens the index page and if he/she is already logged-in then login form will not appear. He can directly play a game.
Issue is that when a game is running on play.php, after playing user clicks back button in browser to return to the index page. But browser is showing play.php first and user has to click back button again to see index.php
Is there any way when click on back button then directly show index.php not show play.php again
index.php
<?php
$i=0;
$Res_games=mysqli_query($con, "SELECT * from tbl_games where
category_id=".$Row_Cat['id']);
while($Row_games = mysqli_fetch_array($Res_games)){
$img = $Row_games['icon_large'];
$game_url = $Row_games['url'];
$game_name = $Row_games['title'];
$formid=$Row_Cat['prefix'].$i;
?>
<div class="productCarousel-slide">
<article class="card ">
<figure class="card-figure">
<form id="<?php echo $formid; ?>" method="post" action="play.php">
<input type="hidden" name="url" value="<?php echo $game_url; ?>">
</form>
<a href="#" onclick="document.forms['<?php echo $formid; ?>'].submit();" title="<?php echo $game_name1; ?>">
<img class="card-image" src="<?php echo $img; ?>" alt="<?php echo $game_name;?>" title="<?php echo $game_name;?>">
</a>
<figcaption class="card-figcaption">
<div class="card-figcaption-body">
<div class="card-buttons">
</div>
<div class="card-buttons card-buttons--alt">
</div>
</div>
</figcaption>
</figure>
<div class="card-body">
<h4 class="card-title" style="text-align: center !important;">
<?php echo $game_name;?>
</h4>
</div>
</article>
</div>
<?php
$i++;
}
?>
Play.php
<?php
include('assets/db_connect.php');
$url1 = urlencode($_REQUEST['url']);
header("Cache-Control: no cache");
session_cache_limiter("private_no_expire");
if(isset($_SESSION['loginid'])){
?>
<html>
<head>
<style>
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}}
</style>
</head>
<body>
<div class="resp-container">
<iframe class="resp-iframe" src="page1.php?url=<?php echo $url1;?>" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
</body>
</html>
<?php } else { ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="assets/images/blue_logo.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/iconic/css/material-design-iconic-font.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/animate/animate.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/css-hamburgers/hamburgers.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/animsition/css/animsition.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/select2/select2.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/daterangepicker/daterangepicker.css">
<link rel="stylesheet" type="text/css" href="assets/css/util.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body>
<?php
if($_SESSION['loginid']!='' && !isset($_REQUEST['login'])){ ?>
<script>location.replace("index.php");</script>
<?php
}
if(isset($_POST['login'])){
$msisdn = $_REQUEST['msisdn'];
//Check Mobile No.
$chk_Zero= substr($msisdn, 0, 1);
$chk_92= substr($msisdn, 0, 3);
if ($chk_Zero==0){
$msisdn = substr($msisdn, 1);
$msisdn = '92'.$msisdn;
}
if($chk_92=='923'){
$msisdn = $msisdn;
}
$cdate = date("Y-m-d H:i:s");
$rows=0;
$SQL1="SELECT * FROM tbl_useraccount where msisdn='$msisdn' and status=1";
$result = mysqli_query($con,$SQL1);
$GetRows=mysqli_fetch_array($result);
if($GetRows['msisdn']==$msisdn)
{
$ID=$GetRows['id'];
//Store OTP
/* $otp= rand(1000,9999);
$OTP_Insert=mysqli_query($con,"Update tbl_usersotp set otp='$otp', modify_date='$cdate' where userid='$ID' and msisdn = '$msisdn' and sms_status=1");
$Message="Dear User,\n\nYour Verification Code is $otp. \n\nTelenor Games";
file_get_contents("http://115.186.146.246:13013/cgi-bin/sendsms?username=tester&password=foobar&to=".$msisdn."&text=".urlencode($Message));
*/
$_SESSION['loginid']=$ID;
$_SESSION['msisdn']=$msisdn;
//Login Attempt Information
$userid=$ID;
$localIP = getHostByName(getHostName());
$server_ip=$_SERVER['REMOTE_ADDR'];
$session_id = session_id(); $_SESSION['session_id'] = $session_id;
$CInsert=mysqli_query($con,"INSERT INTO tbl_login_attempt (userid, date_time, local_ip, server_ip, login_status, session_id) VALUES ('$userid', '$cdate', '$localIP', '$server_ip', '1', '$session_id')");
if(isset($_REQUEST['game_url'])){
?>
<form id="frm_url1" action="play.php" method="post">
<input type="hidden" name="url" value="<?php echo $_REQUEST['game_url'];?>" />
</form>
<script type="text/javascript">
document.getElementById("frm_url1").submit();
</script>
<?php } ?>
<?php }else{$message = "<font color='#bb0000'>Invalid Mobile Number. Please re-enter the details and login again.</font>";}
}
?>
<div class="limiter">
<div class="container-login100" style="background-color:#000000">
<!-- background-image: url('assets/images/bg-01.jpg'); -->
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
<form class="login100-form validate-form" action="play.php" method="post" enctype="multipart/form-data">
<?php echo $message; ?>
<input type="hidden" name="game_url" value="<?php echo urldecode($url1);?>" />
<span class="login100-form-title p-b-49">
<img class="logo-responsive" src="assets/images/logo-white.png"/>Login
</span>
<div class="wrap-input100 validate-input m-b-23" data-validate = "Mobile Number is required">
<span class="label-input100">Mobile Number</span>
<input class="input100 allownumericwithoutdecimal" type="text" name="msisdn" placeholder="03XX1234567">
<span class="focus-input100" data-symbol=""></span>
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn" type="submit" name="login">
Login
</button>
</div>
</div>
<br><br><br>
<!--<div class="txt1 text-center p-t-54 p-b-20">
<span>
Or Login Using
</span>
</div>
<div class="flex-c-m">
<a href="#" class="login100-social-item bg1">
<i class="fa fa-facebook"></i>
</a>
</div>-->
<div class="flex-col-c p-t-155">
<span class="txt1 p-b-17">
Not registered?
</span>
<a href="register.php" class="txt2">
Register
</a>
</div>
</form>
</div>
</div>
</div>
<div id="dropDownSelect1"></div>
<script src="assets/vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="assets/vendor/animsition/js/animsition.min.js"></script>
<script src="assets/vendor/bootstrap/js/popper.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/vendor/select2/select2.min.js"></script>
<script src="assets/vendor/daterangepicker/moment.min.js"></script>
<script src="assets/vendor/daterangepicker/daterangepicker.js"></script>
<script src="assets/vendor/countdowntime/countdowntime.js"></script>
<script src="assets/js/main.js"></script>
<script>
$(".allownumericwithoutdecimal").on("keypress keyup blur",function (event) {
$(this).val($(this).val().replace(/[^\d].+/, ""));
if ((event.which < 48 || event.which > 57)) {
event.preventDefault();
}
});
</script>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
-I run a javascript file and jquery in a .php file. But anytime it runs I get the following error.
this is the javascript code : scroll.js
function setTableBody() {
$(".table-body").height(
$(".inner-container").height() - $(".table-header").height());
}
$(document).ready(function() {
var marginLeft = $(".outer-container").position().left; //Create var and calculate the difference from left
setTableBody();
$(window).resize(setTableBody);
$(".table-body").scroll(function() {
$(".table-header").offset({
left: marginLeft - this.scrollLeft //minus the difference while table header scroll with table body
});
});
});
This is the code from the header php file
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript" type='text/javascript' src="jquery-1.11.3.min.js"></script>
<script language="javascript" type='text/javascript' src='scroll.js'></script>
</head>
<body>
<header>
<a href="/datacentre/admin/index.php" title="Return to the homepage" id="logo">
<img src="/datacentre/images/cagd_logo.jpg" alt="CAGD logo"
style="width:30px;height:30px;"/>
</a>
<span class="headerspan">CAGD Data Centre</span>
<a href="/datacentre/webhelp/index.htm" title="Return to the homepage" id="helpfile">
help
</a>
</header>
<div class="nav-div" id="nav-div">
<nav>
<ul id="nav-ul">
<li>Home</li>
<li>Booking</li>
<li>Activities <span class="caret"></span>
<div id=drop-down-div>
<ul>
<li>Waiting Approval</li>
<li>Approved</li>
<li>Work in process</li>
<li>Completed</li>
</ul>
</div>
</li>
<li>Manage User<span class="caret"></span>
<div id=drop-down-div>
<ul>
<li>Create User</li>
<li>Delete User</li>
</ul>
</div>
</li>
<li>Manage System<span class="caret"></span>
<div id=drop-down-div>
<ul>
<li>Request Table</li>
<li>Update Event</li>
<li>Delete Event</li>
</ul>
</div>
</li>
<li>Report<span class="caret"></span>
<div id=drop-down-div>
<ul>
<li>Main</li>
<li>Sort By<span class="caret"></span>
<div id=drop-down-div>
<ul>
<li>Name</li>
<li>Purpse</li>
</ul>
</div>
</ul>
</div>
</li>
<form id="search-form" method="post" action="search.php">
<input name="searcher" id="search-bar" type="text" placeholder="Type to Search">
<input id="search-button" type="submit" value="Find">
</form>
</ul>
</nav>
</div>
This is the main php file
<?PHP
session_start();
if (!(isset($_SESSION['login_user']) && $_SESSION['login_user'] != '')) {
header ("Location: loginForm.php");
}
?>
<?php
include('/templates/header.php');
$host = "localhost"; // Host name
$username = "root"; // Mysql username
$password = ""; // Mysql password
$db_name = "datacentre"; // Database name
$tbl_name = "data_centre_users"; // Table name
$server_name = "localhost";
// Create connection
$con = new mysqli($server_name, $username, $password, $db_name, 3306);
if($con->connect_error){
die("Connection failed: ".$con->connect_error);
}
// Check connection
if($con->connect_error){
die("Connection failed: ".$conn->connect_error);
}
$sql = "SELECT * FROM $tbl_name ";
$result = $con->query($sql);
function myDate($x){
if ( !strtotime($x)) {
return "00-00-0000 00:00:00";
}
else{
return strftime('%Y-%m-%dT%H:%M:%S',
strtotime($x));
}
return "";
}
?>
<section id="content">
<div class="outer-container">
<div class="inner-container">
<div class="table-header">
<table id="headertable">
<thead>
<tr>
<th class="center"><strong>ID</strong></th>
<th class="center"><strong>FirstName</strong></th>
<th class="center"><strong>Lastname</strong></th>
<th class="center"><strong>Department</strong></th>
<th class="center"><strong>Unit</strong></th>
<th class="center"><strong>Request</strong></th>
<th class="center"><strong>Purpose</strong></th>
<th class="center"><strong>Description</strong></th>
<th class="center"><strong>Booking Time</strong></th>
<th class="center"><strong>Access Time</strong></th>
<th class="center"><strong>Exit Time</strong></th>
<th class="center"><strong>Status</strong></th>
<th class="center"><strong>Approved / Denied By</strong></th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<table id="bodytable">
<?php
if($result->num_rows > 0){
// output data of each row
while($rows = $result->fetch_assoc()){ ?>
<tbody>
<tr>
<td class="center"><?php echo $rows['id']; ?></td>
<td class="center"><?php echo $rows['first_name']; ?></td>
<td class="center"><?php echo $rows['last_name']; ?></td>
<td class="center"><?php echo $rows['department']; ?></td>
<td class="center"><?php echo $rows['unit']; ?></td>
<td class="center"><?php echo $rows['request']; ?></td>
<td class="center"><?php echo $rows['purpose']; ?></td>
<td class="center"><?php echo $rows['description']; ?></td>
<td class="center" >
<input name="booking_time" type="datetime-local" id="booking_time" value="<?php echo myDate($rows ['booking_time']); ?>" size="15">
</td>
<td class="center">
<input name="access_time" type="datetime-local" id="access_time" value="<?php echo myDate($rows ['access_time']); ?>" size="15">
</td>
<td class="center">
<input name="exit_time" type="datetime-local" id="exit_time" value="<?php echo myDate($rows['exit_time']);
?>" size="15" </td>
<td class="center"><?php echo $rows['status']; ?></td>
<td class="center"><?php echo $rows['approved_by']; ?></td>
</tr>
</tbody>
<?php
}
}
?>
</table>
</div>
</div>
</div>
</section>
<?php
$con->close();
function concantName($first , $second){
return $first." ".$second;
}
?>
</body>
</html>
This is the CSS code
* {
padding: 0;
margin: 0;
}
body {
height: 100%;
width: 100%;
}
table {
border-collapse: collapse;
}
.outer-container {
background-color: #ccc;
position: absolute;
top: 10em;
left: 10em;
right: 200em;
bottom: 40em;
height:400px;
width:400px;
}
.inner-container {
height: 100%;
overflow: hidden;
position:relative;
}
.table-header {
position: relative;
}
.table-body {
overflow: auto;
}
.header-cell {
background-color: yellow;
text-align: left;
height: 40px;
}
.body-cell {
background-color: blue;
text-align: left;
}
.col1, .col3, .col4, .col5 {
width: 120px;
min-width: 120px;
}
.col2 {
min-width: 300px;
}
Any suggestion for a solution
The console is telling you the problem. You have an error when the browser is trying to reach http://localhost/datacentre/admin/jquery-1.11.3.min.js
The file name is wrong or maybe not here at all.
I am not sure why this is not working. When I click the links the data suppose to show up in the divs, but for some reason nothing is showing up. Anyone have any suggestion on why that is? I am not sure if my script is setup right.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>test</title>
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/custom.css" rel="stylesheet">
<script>
$('a').on('click', function() {
var div_id = $(this).data('id');
$('.toggle_content').hide();
$('#' + div_id).toggle();
});
</script>
</head>
<body>
<nav>
Received
<a href="#" target="_top" data-id="one">
<?php
//conects to the database
require_once("../db_connect.php");
$stmt = $db->prepare ("SELECT COUNT(*) AS rows_cnt FROM receivingrequests WHERE status='Received'");
$stmt->execute();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo $row['rows_cnt'];
}
?></a>
<br>
Info Div #2<br> Info Div #3
<br>
Info Div #4
</nav>
<div id="one" class="toggle_content">
<?php
//conects to the database
require_once("../db_connect.php");
//prepared statement with PDO to query the database
$stmt = $db->prepare("SELECT * FROM receivingrequests WHERE Status='RECEIVED'");
$stmt->execute();
?>
<?php //start of the while loop ?>
<?php while( $row = $stmt->fetch(PDO::FETCH_ASSOC) ) { ?>
<table border="1" style="border: thin #000000; table-layout: fixed; width: 100%; background-color: #FFFFFF; display: table;" class="style1">
<tr>
<th style="width:15%; background-color: #000000;color: #FFFFFF;" class="style3">
<strong>Request#</strong></th>
<th style="width:15%; background-color: #000000;color: #FFFFFF;" class="style3">
<strong>Status</strong></th>
<th style="width:20%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Comments</strong></th>
<th style="width:10%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Date Requested</strong></th>
<th style="width:20%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Name</strong></th>
<th style="width:10%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Department</strong></th>
<th style="width:10%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>VasLblDate</strong></th>
</tr>
<tr>
<?php $id = $row['RequestNumber'];?>
<?php echo "<td> <a href='../update.php?id=$id'>$id</a></td>"?>
<td class="style2" style="width: 62px"><strong><?php echo $row['Status']; ?></strong></td>
<td class="style2"><strong><?php echo $row['Comments']; ?></strong></td>
<td class="style2"><strong><?php echo $row['DATEREQUESTED']; ?></strong></td>
<td class="style2"><strong><?php echo $row['EmpName']; ?></strong></td>
<td class="style2"><strong><?php echo $row['Department']; ?></strong></td>
<td class="style2"><strong><?php echo $row['VasLbDate']; ?></strong></td>
</tr>
</table>
<?php } //end of the while loop?>
</div>
<div id="two" class="toggle_content">Lorem ipsum... Two</div>
<div id="three" class="toggle_content">Lorem ipsum... Three</div>
<div id="four" class="toggle_content">Lorem ipsum... Four</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../javascript/jquery.js"></script>
<script src="../javascript/bootstrap.js"></script>
</body>
</html>
I was using the wrong Jquery. I also needed to put the Jquery script at the bottom of the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>test</title>
<link href="../css/custom.css" rel="stylesheet">
</head>
<body background="../images/background.jpg">
<nav>
Received
<a href="#" target="_top" data-id="one">
<?php
//conects to the database
require_once("../db_connect.php");
$stmt = $db->prepare ("SELECT COUNT(*) AS rows_cnt FROM receivingrequests WHERE status='Received'");
$stmt->execute();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo $row['rows_cnt'];
}
?></a>
<br>
Info Div #2<br> Info Div #3
<br>
Info Div #4
</nav>
<div id="one" class="toggle_content">
<?php
//conects to the database
require_once("../db_connect.php");
//prepared statement with PDO to query the database
$stmt = $db->prepare("SELECT * FROM receivingrequests WHERE Status='RECEIVED'");
$stmt->execute();
?>
<?php //start of the while loop ?>
<?php while( $row = $stmt->fetch(PDO::FETCH_ASSOC) ) { ?>
<table border="1" style="border: thin #000000; table-layout: fixed; width: 100%; background-color: #FFFFFF; display: table;" class="style1">
<tr>
<th style="width:15%; background-color: #000000;color: #FFFFFF;" class="style3">
<strong>Request#</strong></th>
<th style="width:15%; background-color: #000000;color: #FFFFFF;" class="style3">
<strong>Status</strong></th>
<th style="width:20%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Comments</strong></th>
<th style="width:10%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Date Requested</strong></th>
<th style="width:20%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Name</strong></th>
<th style="width:10%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Department</strong></th>
<th style="width:10%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>VasLblDate</strong></th>
</tr>
<tr>
<?php $id = $row['RequestNumber'];?>
<?php echo "<td> <a href='../update.php?id=$id'>$id</a></td>"?>
<td class="style2" style="width: 62px"><strong><?php echo $row['Status']; ?></strong></td>
<td class="style2"><strong><?php echo $row['Comments']; ?></strong></td>
<td class="style2"><strong><?php echo $row['DATEREQUESTED']; ?></strong></td>
<td class="style2"><strong><?php echo $row['EmpName']; ?></strong></td>
<td class="style2"><strong><?php echo $row['Department']; ?></strong></td>
<td class="style2"><strong><?php echo $row['VasLbDate']; ?></strong></td>
</tr>
</table>
<?php } //end of the while loop?>
</div>
<div id="two" class="toggle_content">Lorem ipsum... Two</div>
<div id="three" class="toggle_content">Lorem ipsum... Three</div>
<div id="four" class="toggle_content">Lorem ipsum... Four</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$('a').on('click', function() {
var div_id = $(this).data('id');
$('.toggle_content').hide();
$('#' + div_id).toggle();
});
</script>
</body>
</html>
</body>
</html>
Also, for running any code you want to run after the page has fully loaded, get into the habit of surrounding your code with this:
$( document ).ready(function() {
...
});
So for the your page, you'll want this:
<script>
$( document ).ready(function() {
$('a').on('click', function() {
var div_id = $(this).data('id');
$('.toggle_content').hide();
$('#' + div_id).toggle();
});
});
</script>
As one of the other posters has mentioned, you need to add JQuery to your project.
First, create a folder called "jquery" inside your web-page's directory. Then download the latest JQuery js file and save it inside your the "jquery" directory.
The latest JQuery (accurate at the time of posting this comment) is here.
http://code.jquery.com/jquery-2.1.3.min.js
After that, add this code to where the other links are:
<link href="jquery/jquery-2.1.3.min.js" rel="stylesheet">
Then adjust your href as necessary depending on whether your web-page is in the root directory or one of the sub-directories for your site.