Javascript Uncaught Reference Error Anonymous Function [closed] - javascript

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.

Related

datatables is not working when fetching data from database

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.

I have data table in my page and data table sort is not working

I have data table in my page and I want to add sort in my table but its is not working.
View:
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/datatables/dataTables.bootstrap4.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/custom/css/custom_style.css">
<style>
.highlight { background-color: #1DA5FF; color:#fff; }
th,
td {
white-space: nowrap;
}
div.dataTables_wrapper {
direction: rtl;
}
div.dataTables_wrapper {
width: 1000px;
margin: 0 auto;
font-family: Vazir;
font-size: 10px;
}
th {
min-width: 80px;
height: 32px;
border: 1px solid #222;
white-space: nowrap;
}
td {
min-width: 80px;
height: 32px;
border: 1px solid #222;
white-space: nowrap;
text-align: center;
}
</style>
<style type="text/css" media="screen">
td{
padding: 0;
}
</style>
<form role="form" id="print_booking_register" method="POST" enctype="multipart/form-data">
<section class="content">
<div class="row">
<div class="table-responsive">
<table id="booking_register_table" class="table table-bordered table-sm" style=" overflow: auto;"> </table>
</div>
</div>
</section>
</form>
<button id="print" name="print" onclick="printContent('print_booking_register')" class="btn btn-block btn-outline-primary fa fa-newspaper-o col-10 offset-1" style="margin-top: 35px; margin-bottom: 25px;" data-clicked="unclicked"> Print Booking Register</button>
<!-- DataTables -->
<script src="<?php echo base_url(); ?>assets/plugins/datatables/jquery.dataTables.js"></script>
<script src="<?php echo base_url(); ?>assets/plugins/datatables/dataTables.bootstrap4.js"></script>
<script href=" https://code.jquery.com/jquery-3.3.1.js"></script>
<script src=" <?php echo base_url(); ?>assets/plugins/datatables/jquery.dataTables.min.js"></script>
<script href=" https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script href=" https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
<script>
$(document).ready(function() {
$('#booking_register_table').dataTable({
order: [[ 3, 'desc' ], [ 0, 'asc' ]]
});
});
</script>
<script>
function printContent(e1) {
event.preventDefault();
var allVals = [];
$('input[name=selectedrecord]:not(:checked').each(function() {
allVals.push($(this).val());
});
allVals.forEach(function(i){
$('tr').each(function(){
$(this).find('td, th').eq(i-1).css({
display:'none'
});
});
});
$('#print').css('visibility', 'hidden'); //hiding print button on print page
$('input[name=selectedrecord]').css('visibility', 'hidden'); //hiding Check box on print page
var restorepage = document.innterHTML;
var printContent = document.getElementById(e1).innterHTML;
document.innterHTML = printContent;
window.print();
document.location.href = "<?php echo base_url(); ?>";
location.href="<?php echo base_url(); ?>booking/report/booking_register/BookingRegisterController/bookingRegister", 'refresh';
}
</script>
</body>
</html>
Controller:
$modelResult = $this->reportModel->bookingRegisterReportByLrno($data);
?>
<table id="bilty_table" class="table table-bordered table-striped table-sm" style=" overflow: auto;">
<thead>
<tr>
<th class="col2"><input type="checkbox" name="selectedrecord" value="2">LR No</th>
<th class="col3"><input type="checkbox" name="selectedrecord" value="3">Consignor Name</th>
</tr>
</thead>
<tbody>
<?php foreach($modelResult as $bilty){?>
<tr>
<td><?php echo $counter;?></td>
<td><?php echo $bilty->lr_no;?></td>
<td><?php echo $bilty->consignor;?></td>
</tr>
<?php }?>
</tbody>
</table>
Added jquery file in my code but i this it not support.
I do not know that where I am wrong in my code.
I try this code but its not working.
I have table in my controller and I am showing in view page

Javascript Not working on form submit

I have wrote javascript in php file the thing is that i want to select input from dropdown using javascript the default value in dropdown is SELECT and when i submit the form i need the alert message like please select value in drop down lable. and apart from this i also need this for all dropdown option.wherever it found "SELECT" alert should be there with respective lable
My try is:
<?php
include("$_SERVER[DOCUMENT_ROOT]/riteshproject/config.php"); ?>
<?php if(isset($_POST['empsubmit'])) {
if(isset($_POST['areaname']) && isset($_POST['flat']) &&
isset($_POST['rentsale'])) {
$an=$_POST['areaname']; $flat=$_POST['flat'];
$rentsale=$_POST['rentsale'];
$_SESSION['an']=$an; $_SESSION['flat']=$flat; $_SESSION['rentsale']=$rentsale; }
} if(isset($_REQUEST['unsetsession'])) { session_destroy();;
header('location:home.php'); break; } ?>
<!DOCTYPE html> <html lang="en"> <head> <title>Shree Shree
Property,Kolhapur</title> <meta charset="utf-8"> <meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 1em 15px; margin-top: 50px;
border-radius: 0;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;} .active { background-color: #00bfff; }
} .col-sm-2{background-color: gray;} .col-sm-8{background-color: #e0e0eb; border-radius: 25px;}
.mainBlock4{background-color: gray; overflow: scroll; height:
220px;} .mainBlock5{background-color: gray; overflow: scroll;
height: 240px;} th{text-align: center; background-color:black;
color:white;} .td1{color:black;}
.tr1:nth-child(even) {
background-color: #e0e0eb; } .trclose{} .closebutton{ border-collapse: collapse;} .button {
background-color: black;
border-radius: 10px;
color: white;
padding: 0.1px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 2px 2px;
cursor: pointer; border: 2px solid red;} .button:hover {
background-color: gray; /* Green */
color: white;
</style> </head> <body>
<nav class="navbar navbar-inverse"> <div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="../riteshproject/logo.png" align="center" style="width:70px;height:50px;">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li> <li class="current" id="dddd"><a
href="../riteshproject/aboutus.php" >About US</a></li> <li>Contact US</li>
<li>Add Property</li> <li>Luxarious Property</li> <li><a href="#">Property For
Sale</a></li> <li>Other Services</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../riteshproject/Login/login.php"><span class="glyphicon glyphicon-log-in"></span><img
src="../riteshproject/login1.jpg" width="60" height="25"></a></li>
</ul>
</div> </div> </nav> <div class="container-fluid text-center"> <div class="row content">
<div class="col-sm-2 sidenav" align="center" id="2">
<head>
<title></title>
<script type="text/javascript">
var picPaths = ['../riteshproject/img/prop1.jpg','../riteshproject/img/prop2.jpg','../riteshproject/img/prop3.jpg','../riteshproject/img/prop4.jpg',
'../riteshproject/img/prop5.jpg'];
var curPic = -1;
//preload the images for smooth animation
var imgO = new Array();
for(i=0; i < picPaths.length; i++) {
imgO[i] = new Image();
imgO[i].src = picPaths[i];
}
function swapImage() {
curPic = (++curPic > picPaths.length-1)? 0 : curPic;
imgCont.src = imgO[curPic].src;
setTimeout(swapImage,2000);
}
window.onload=function() {
imgCont = document.getElementById('imgBanner');
swapImage();
}
</script>
</head>
<body>
<div>
<img id="imgBanner" src="" alt="" />
</div>
</body>
<div>
<p>Link</p>
<p>Link</p>
<p>Link</p>
</div>
</div>
<div class="col-sm-8 text-left"> <form action="" method="POST" onsubmit="notSELECT()">
<table><tr><td><h4><b>Welcome To Shree Shree Property,Kolhapur</b></h4></td></tr></table>
<hr>
<h5><b><i><marquee width="365px" height="10px" direction=slide BEHAVIOR=ALTERNATE left:355px>Search Property in
kolhapur... </marquee></i></b></h5>
</hr>
<table> <tr> </tr> <tr> </tr> <tr> <td width='35px'></td> <td>
<select name="rentsale" id="rentsale" value="select">
<option>RENT</option>
<option>SALE</option>
</select>
</td>
<td><input type="radio" name="radio" value="flat" checked>FLAT</td>
<td width='35px'></td> <td><input type="radio" name="radio" value="Bungalo">Bungalow</td> </tr> <tr height="60px">
<td height="20px" />Area
<td style="text-align:left">
<select name="areaname" id="areaname" value="select" class="NotEmpty">
<option value="SELECT" style="display:none">SELECT</option>
<?php
$query="select code,areaname from areamaster";
$query_run=mysql_query($query);
mysql_num_rows($query_run);
while($row=mysql_fetch_assoc($query_run))
{
?>
<option value="<?php echo $row['areaname']?>"><?php echo $row['areaname']?></option>
<?php
}
?>
</select>
</td>
<td></td>
<td>Flat</td>
<td style="text-align:left">
<select name="flat" id="flat" value="select">
<option value="SELECT" style="display:none">SELECT</option>
<?php
$query="select flat from flatmaster";
$query_run=mysql_query($query);
mysql_num_rows($query_run);
while($row=mysql_fetch_assoc($query_run))
{
?>
<option value="<?php echo $row['flat']?>"><?php echo $row['flat']?></option>
<?php
}
?>
</select>
</td>
</tr> <tr>
<td>
</td>
<td>
</td>
<td>
<input type="submit" name="empsubmit" style="width:75" id="submit" value="Search" class="button" onclick="showDiv()">
</td> </tr> </table> </form>
<?php if(isset($_SESSION['an'])) {
?>
<div class="heddendiv" width="30px">
<html><b>
Property Found for your search...</b>
<div Class="mainBlock4" style="width:100%">
<form name="leavesanction" action="" method="POST" onsubmit="notSELECT()" >
<table border=3px solid black;>
<tr>
<th width="15%" align="center">Area</th>
<th width="15%" align="center">Flat/Bungalo</th>
<th width="12%" align="center">BHK</th>
<th width="12%">Rent</th>
<th width="16%">Deposit</th>
<th width="10%">SQ Ft</th>
<th width="10%">FLoor</th>
<th width="10%">Lift</th>
</tr>
<?php
$select="select area,proptype,address,bhk,rent,diposit,sqft,floor,lift
from propertymaster where area='$an' and bhk='$flat' and rentorsale='$rentsale'";
$property=mysql_query($select);
while($row=mysql_fetch_assoc($property))
{
?>
<tr class="tr1">
<td class="td1">
<?php echo $row['area'];?>
</td>
<td align="center">
<?php echo $row['proptype'];?>
</td>
<td>
<?php echo $row['bhk'];?>
</td>
<td>
<?php echo $row['rent'];?>
</td>
<td>
<?php echo $row['diposit'];?>
</td>
<td>
<?php echo $row['sqft'];?>
</td>
<td>
<?php echo $row['floor'];?>
</td>
<td width="20px">
<?php echo $row['lift'];?>
</td>
</tr>
<?php
}
?>
</table>
<table class="closebutton">
<tr class="trclose" align="center">
<td></td>
<td width='260px'></td>
<td>
<a href="home.php?unsetsession=1">
<input type="submit" name="Close" style="width:75" id="Close" value="Close" class="button"></a>
</td>
</tr>
</table>
</form>
</div>
</html>
</div>
<?php } ?>
<?php if(!isset($_SESSION['an'])) { ?>
<div Class="mainBlock5" style="width:100%">
<p>testing div</p> </div>
<?php } ?>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>ADS</p> <img src="../riteshproject/login1.jpg" width="80" height="50">
</div>
<div class="well">
<p>ADS</p>
</div>
</div> </div> </div>
<footer class="container-fluid text-center">
<p><b><marquee>Designed,Developed and Maintened By Shree Shree
Property,Kolhapur Mob No 9373002173</b></marquee></p> </footer>
</body> </html>
<script> function notSELECT() {
var inputControls = document.getElementsByClassName("areaname");
if (inputControls.value== "SELECT") {
alert("Enter Proper search Values");
return false;
}
return true; }
</script>
in javascript i done following with function
i get the values using getElementByName
and using if condition i checked it with "SELECT"
and shown alert();
i wrote that function in form tag onsubmit="notSELECT()"
so plz help me out to show alert msg
please help me

In this code:
function notSELECT() {
var inputControls = document.getElementsByClassName("areaname");
if (inputControls.value== "SELECT") {
alert("Enter Proper search Values");
return false;
}
return true;
}
You try to select all elements with the className of "areaname", but I can't seem to find any class with that name. Perhaps this is what you wanted:
function notSELECT() {
var inputControls = document.getElementById("areaname");
if (inputControls.value== "SELECT") {
alert("Enter Proper search Values");
return false;
}
return true;
}
EDIT:
For your second question (you stated in the comments) here is the code:
function notSELECT() {
var inputControlsAreaName = document.getElementById("areaname");
var inputControlsFlat = document.getElementById("flat");
if (inputControlsAreaName.value== "SELECT") {
alert("Please select areaname");
return false;
}
if (inputControlsFlat.value== "SELECT") {
alert("Please select flat");
return false;
}
return true;
}

Trying to get the links when clicked to show the data in the divs?

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.

Character encoding not declared errors

Got some error in my local server "The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.", But in my production server,it never throw that kind of error.Well my problem is, I use my local server for testing and updates,but it will not output properly in a browser.
I use this global layout template.
<!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" xml:lang="en" lang="en">
<head>
<?php include_http_metas() ?>
<?php include_metas() ?>
<?php include_title() ?>
<link rel="shortcut icon" href="/favicon.ico" />
<?php include_stylesheets() ?>
<?php include_javascripts() ?>
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap-button.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap-collapse.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap-dropdown.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap-tooltip.js"></script>
<script type="text/javascript" src="/bootstrap/js/bootstrap-popover.js"></script>
<script type="text/javascript" src="/js/jquery.fixedheadertable.min.js"></script>
</head>
<body>
Some Contents
</body>
</html>
And this is the page with error
<style>
body{
/*margin-top: 100px;*/
font-family: 'Trebuchet MS', serif;
line-height: 1.6
}
.container{
/*width: 800px;*/
margin: 0 auto;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
/*padding: 10px 15px;*/
padding: 5px 5px;
cursor: pointer;
}
ul.tabs li.current{
background: #ededed;
color: #222;
}
.tab-content{
display: none;
background: #ededed;
/*padding: 15px;*/
padding: 5px;
}
.tab-content.current{
display: inherit;
}
table, td, th {
border: 1px solid green;
}
th {
background-color: green;
color: white;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
})
</script>
<script type="text/javascript">
$.ajax({
url: '<?php echo url_for("misc/total") ?>',
dataType: 'json',
success: function(data){
console.log(JSON.stringify(data));
console.log("Total: " + data.total);
// update a div content
$("#responsecontainer").html(data.total);
}
});
</script>
<body>
<div class="page-header">
<div id="overdue"><h2 class="btn btn-danger">Borrowers with Overdue/Ongoing Account</h2></div><br />
<div> Number Of Borrowers: <h2 id="responsecontainer" class="btn btn-info"> </h2> Total Number Of Overdue Accounts: <h2 class="btn btn-info"><?php echo "coming soon" ?>
</h2> Number Of Ongoing Acounts: <h2 class="btn btn-info"><?php echo "coming soon" ?></h2>
</div>
</div>
<marquee><h1>Under Construction <span>Testing</span> <?php echo date('l,F d, Y') ?></h1></marquee>
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Bulacan</li>
<li class="tab-link" data-tab="tab-2">Novaliches</li>
<li class="tab-link" data-tab="tab-3">Manila</li>
<li class="tab-link" data-tab="tab-4">Commonwealth</li>
<li class="tab-link" data-tab="tab-5">Pasig</li>
<li class="tab-link" data-tab="tab-6">Libertad</li>
<li class="tab-link" data-tab="tab-7">Parañaque</li>
<li class="tab-link" data-tab="tab-8">Frisco</li>
<li class="tab-link" data-tab="tab-9">San Mateo</li>
<li class="tab-link" data-tab="tab-10">Batasan</li>
<li class="tab-link" data-tab="tab-11">Kamuning</li>
<li class="tab-link" data-tab="tab-12">Marikina</li>
<li class="tab-link" data-tab="tab-13">Makati</li>
</ul>
<div id="tab-1" class="tab-content current">
<p> Total numbers of Borrowers: <small id="divID" style="color: red"></small> Total no of loans <small id="result" style="color: red"></small> Total completed <small style="color: red">Testing</small> Loans overdue<small style="color: red"> Testing</small> Ongoing<small style="color: red">Testing</small></p>
<table class="table table-bordered table-condensed table-striped" id="tableId">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Added On</th>
<th>Totals</th>
<th>Completed</th>
<th>Overdue</th>
<th>Ongoing</th>
</tr>
</thead>
<tbody>
<?php foreach($applicants as $app): ?>
<?php if($app->area_id ==2): ?>
<tr class="<?php echo fmod($i, 2) ? 'even' : 'odd' ?>">
<td><?php echo mb_strtoupper(mb_substr($app->Areas->name,0,4)) ?>000<?php echo $app->id ?></td>
<td><?php echo $app->getFirstname(), ' ' ,$app->getLastname(), ' ', $app->getMiddlename() ?></td>
<td><?php echo date ('M j, Y', strtotime($app->date_created));?></td>
<td class="d"><small style="font-family:Arial;color: #FF0000"><?php echo (count($app->Loans)); ?></small></td>
<td>
<?php foreach($app->Loans as $loan): ?>
<?php if($loan->is_completed == 'Y'): ?>
<?php echo ($loan->batch_no) ?>,
<?php endif; ?>
<?php endforeach; ?>
</td>
<td>
<?php foreach($app->Loans as $loan): ?>
<?php if($loan->is_completed =='N'): ?>
<?php $dueDate = strtotime($loan['due_date']);?>
<?php $today = time(); ?>
<?php if($dueDate <= $today): ?>
<?php echo($loan->batch_no) ?>,
<?php endif; ?>
<?php endif; ?>
<?php endforeach; ?>
</td>
<td>
<?php foreach($app->Loans as $loan): ?>
<?php if($loan->is_completed =='N'): ?>
<?php $dueDate = strtotime($loan['due_date']);?>
<?php $today = time(); ?>
<?php if($dueDate >= $today): ?>
<?php echo ($loan->batch_no) ?>,
<?php endif; ?>
<?php endif; ?>
<?php endforeach; ?>
</td>
</tr>
<?php endif; ?>
<?php endforeach; ?>
</tbody>
</table>
<script type="text/javascript">
(function() {
var div = document.getElementById('divID');
div.innerHTML = document.getElementById('tableId').getElementsByTagName("tbody") [0].getElementsByTagName("tr").length;
})();
</script>
<script type="text/javascript">
$(calculateSum);
function calculateSum() {
var sum = 0;
$(".d").each(function() {
var value = $(this).text();
//add only if the value is number
if(!isNaN(value) && value.length!=0) {
sum += parseFloat(value);
}
});
$('#result').text(sum);
};
</script>
</div>
Instead of Parañaque,the text is "gargled"...

Categories