Results change without page load

Results change without page load - javascript

I am working on a site. If you select city "Karachi" it would show you results. I want to filter the results. I have added the filter options. I am looking for ways to interact with the database so the results change as I select a filter. Please guide.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>Tuition Teacher</title>
<!-- Custom styles for this template -->
<link href="sticky-footer-navbar.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.navbar-nav{
float:right;
}
#slider-range, #slider-range2 {
width:300px;
margin-top:10px;
}
#slider-range2.ui-slider-horizontal {
border: 0 none;
}
#slider-range2.ui-slider-horizontal .ui-slider-range, #slider-range2.ui-slider-horizontal .ui-slider-handle {
background: url("http://unbug.ru/examples/jquery/slider/slide.png") repeat scroll 0 0 transparent;
}
#slider-range2.ui-slider-horizontal .ui-slider-range {
background-position: 0 -42px;
background-repeat: repeat-x;
height: 21px;
}
#slider-range2.ui-slider-horizontal .ui-slider-handle {
background-position: 0 0;
background-repeat: no-repeat;
border: 0 none;
height: 21px;
top: 0;
width: 21px;
}
#slider-range2.ui-slider-horizontal .ui-slider-handle:focus {
outline: 0 none;
}
#slider-range2.ui-slider-horizontal .ui-slider-handle + .ui-slider-handle {
background-position: -21px 0;
}
</style>
<script>
$(function() {
var availableTags = [
"Lahore",
"Karachi",
"Islamabad",
"Rawalpindi",
"Faisalabad",
"Multan",
"Gujranwala",
"Quetta",
"Peshawar",
"Hyderabad",
"Sialkot"
];
$( "#city" ).autocomplete({
source: availableTags
});
});
</script>
<script>
$(document).ready(function() {
$(function() {
$( "#slider-range, #slider-range2" ).slider({
range: true,
min: 15,
max: 100,
values: [15, 100 ],
slide: function( event, ui ) {
$( "#amount" ).val(ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" -" + $( "#slider-range" ).slider( "values", 1 ) );
});
});
</script>
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>^
</div>
-->
<div id="navbar" class="collapse navbar-collapse text-right">
<ul class="nav navbar-nav ">
<li >Teachers Log In </li>
<li>Teachers Sign Up</li>
<li>Tour</li>
<!--Sign Up
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
-->
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Begin page content -->
<div class="container">
<div class="row">
<div class="col-md-3">
<h2>Filter</h2>
City:<br>
<input id="city" placeholder="<?php echo $_POST['city'] ?>">
<br>
Gender:<br>
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female<br>
<p>
<label for="amount">Age range:</label>
<input type="text" id="amount"/>
</p>
<div id="slider-range"></div>
Education:<br>
<input type="radio" name="education" value="high school">High School<br>
<input type="radio" name="education" value="intermediate">Intermediate<br>
<input type="radio" name="education" value="professional degree">Professional Degree<br>
</div>
<div class="col-md-9">
<h2>Search Results</h2>
<?php
$servername = "hidden";
$username = "hidden";
$password = "hidden";
$dbname = "hidden";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$city = $_POST["city"];
$sql = "SELECT id,full_name, email, password,full_address,city,age,contact_number,gender,education FROM users WHERE city='$city'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "Name:" . $row["full_name"]."<br> Email:". $row["email"]. "<br>City: " . $row["city"]. "<br>Age: " . $row["age"]. "<br>Contact Number:". $row["contact_number"]. "<br> Gender: " . $row["gender"]. "<br>Education:" . $row["education"];
echo "<br><hr>";
}
} else {
echo "0 results";
}
$conn->close();
?>
</div>
</div>
</div> <!-- Container ends -->
<footer class="footer">
<div class="container">
<div class="row">
<p class="text-muted text-left col-md-6">Copyright 2015. All Rights Reserved.</p>
<p class="text-muted text-right col-md-6">Facebook - Twitter - LinkedIn.</p>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="dropdown.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="ie10-viewport-bug-workaround.js"></script>
</body>
</html>

Using ajax. It is technology that allow you:
Update a web page without reloading the page.
Request data from a server - after the page has loaded
Receive data from a server - after the page has loaded.
Send data to a server - in the background
A simple ajax syntax is:
jQuery.ajax({
type: 'POST',
url: "index.php?task=testfunction",
data: '',
dataType: 'html',
beforeSend: function() {
//do function show when loading
},
success : function(result) {
//do function show when success
jQuery('#result').html(result);
}
});
In php you have to write
<?php
function testfunction(){
echo 'This is result';
die;
}
?>

Related

Syntax Error 'SCRIPT1002' using Internet Explorer 11

SCRIPT1002: Syntax error
index.php, line 4 character 37
I got this error in IE11 and my .click() handlers are not working on the page where the error occurs (only in IE11). On lines 1 to 10 I got some standart meta tags so that shouldn't be the problem (I removed them and still received the error).
Because I got a lot of code and I don't know where exactly this error occurs. What's the best way to find the responsible code for this error?
Here is the index.php file referenced in the error:
<!DOCTYPE html>
<html lang="en">
<?php
include("database/connect.php");
include("modul/session/session.php");
$sql = "SELECT * FROM `tb_appinfo`;";
$result = $mysqli->query($sql);
if (isset($result) && $result->num_rows == 1) {
$appinfo = $result->fetch_assoc();
}
$sql = "SELECT * FROM `tb_ind_design` WHERE tb_user_ID = $session_userid;";
$result = $mysqli->query($sql);
if (isset($result) && $result->num_rows == 1) {
$row = $result->fetch_assoc();
}
?>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="<?php echo $appinfo["description"];?>">
<meta name="author" content="A.Person">
<title><?php echo $appinfo["title"];?></title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<?php
if (preg_match("/(Trident\/(\d{2,}|7|8|9)(.*)rv:(\d{2,}))|(MSIE\ (\d{2,}|8|9)(.*)Tablet\ PC)|(Trident\/(\d{2,}|7|8|9))/", $_SERVER["HTTP_USER_AGENT"], $match) != 0) {
echo '<link href="css/evaStyles_ie.css" rel="stylesheet">';
} else {
if(isset($row)){
echo '
<meta name="theme-color" content="'.$row["akzentfarbe"].'"/>
<style>
:root {
--hintergrund: '.$row["hintergrund"].';
--akzentfarbe: '.$row["akzentfarbe"].';
--schrift: '.$row["schrift"].';
--link: '.$row["link"].';
}
html {
--hintergrund: '.$row["hintergrund"].';
--akzentfarbe: '.$row["akzentfarbe"].';
--schrift: '.$row["schrift"].';
--link: '.$row["link"].';
}
</style>
<link href="css/evaStyles.css" rel="stylesheet">
';
} else {
echo '
<meta name="theme-color" content="'.$appinfo["akzentfarbe"].'"/>
<style>
:root {
--hintergrund: '.$appinfo["hintergrund"].';
--akzentfarbe: '.$appinfo["akzentfarbe"].';
--schrift: '.$appinfo["schrift"].';
--link: '.$appinfo["link"].';
}
html {
--hintergrund: '.$appinfo["hintergrund"].';
--akzentfarbe: '.$appinfo["akzentfarbe"].';
--schrift: '.$appinfo["schrift"].';
--link: '.$appinfo["link"].';
}
</style>
<link href="css/evaStyles.css" rel="stylesheet">
';
}
}
?>
</head>
<body>
<div class="loadScreen">
<span class="helper"></span><img class="img-responsive" id="loadingImg" src="img/loading.svg"/>
</div>
<div id="pageContents" style="opacity: 0;">
<!-- Navigation -->
<div id="naviLink">
<nav class="navbar navbar-expand-lg navbar-inverse bg-color fixed-top" id="slideMe" style="display: none;">
<div class="container">
<a class="navbar-brand" href="modul/dashboard/dashboard.php">
<img src="<?php echo $appinfo["logo_path"];?>" width="<?php echo $appinfo["logo_width"];?>" alt="Logo">
<span style="margin-left:20px;"><?php echo $appinfo["title"];?></span>
</a>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<?php
$userID = ($mysqli->query("SELECT ID FROM tb_user WHERE bKey = '$session_username'")->fetch_assoc());
$sql1 = "SELECT mg.ID, mm.file_path, mm.title FROM tb_ind_nav AS mg INNER JOIN tb_modul AS mm ON mm.ID = mg.tb_modul_ID WHERE mg.tb_user_ID = " . $userID['ID'] . " ORDER BY mg.position";
$result = $mysqli->query($sql1);
if (isset($result) && $result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$link = '
<li class="nav-item">
<a class="nav-link" navLinkId="'. $row["ID"].'" href="'. $row["file_path"].'">'. $translate[$row["title"]].'</a>
</li>
';
echo $link;
}
} else {
$link = '
<li class="nav-item" id="editNavLink">
<a class="nav-link" href="modul/settings/settings.php">'. $translate[15].'</a>
</li>
';
echo $link;
}
?>
</ul>
</div>
</div>
</nav>
</div>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-10 offset-md-1">
<div page="<?php if(isset($_SESSION["user"]["currentPath"])){ echo $_SESSION["user"]["currentPath"]; } else { echo "modul/dashboard/dashboard.php";} ?>" id="pageContent">
</div>
</div>
</div>
</div>
<!-- /.container -->
<footer class="footer" id="slideMeFoot" style="display: none;">
<div class="container">
<a class="foot-link" href="modul/settings/settings.php"><?php echo $translate[16] ?></a><i class="text-muted"> | <?php echo $_SESSION["user"]['username']; ?></i><span class="text-muted">© HTML Link | 2018 | <?php echo $appinfo["title"];?> v.1.0</span>
</div>
</footer>
</div>
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<!-- Own JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script type="text/javascript">
var translate = {};
<?php
foreach ($translate as $key => $value) {
echo ("translate['".$key."'] = '".$value."';");
};
?>;
</script>
<script src="js/index.js"></script>
</body>
</html>

If you are using arrow syntax like value.foreach(param => {}); It can also cause this error in IE 11 since it does not understand shorthand functions. Need to change the function to be: value.foreach(function(param){});

The problem probably resides in your dashboard.js file. On line 4 you have a setInterval():
var id = setInterval(frame, speed, );
There is either a parameter missing or you accidentally added an extra comma.
To reproduce this you can include the dashboard.js file on any page and the syntax error will be displayed.

JavaScript Print function issue

When I clicked Ön Izleme (Span/Button) , i come the back i cant use my JavaScript Function Like Draggable Resize method on my divs. Do anyone can help me ? Önizleme Button job is print
When i back to from print screen i cant use my JavaScript function Like Draggable and resize. What is the my fault do anyone can help me?
<!DOCTYPE html>
<html>
<head>
<style>
.divKolon {width:50px;height:50px;padding:10px;border:3px solid #DD4B39; background-color: #E98A7E;float:left;}
.divKolon-resizable-e{
height: 50px !important;
}
.divUstKolon {width:50px;height:50px;padding:10px;border:3px solid #DD4B39; text-align:center;float:left;margin-right:20px;}
.shadow(#shadow){
-webkit-box-shadow:#shadow;
-mox-box-shadow:#shadow;
box-shadow:#shadow;
}
.label-danger{
margin-left:10px;
margin-top:10px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
var Bosluk=0;
var SecilenItem;
var VTBilgileri=[];
var YaziFont;
var YaziBoyutu;
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
//console.log(ev.target);
}
function drop(ev) {
ev.stopPropagation()
var EklenecekDiv=ev.target;
var data = ev.dataTransfer.getData("text");
//console.log(ev.target);
console.log($(ev.target).parent());
var divim=ev.target;
var c = divim.children;
console.log(c.lenght);
/*if(c[2]==null)
{
EklenecekDiv=$($(ev.target).parent());
EklenecekDiv.append()
var label1=document.getElementById(data);
var MyLabelAdd1=document.createElement("div");
MyLabelAdd1.appendChild(document.createTextNode($(label1).html()));
$(MyLabelAdd1).attr("name","KolonAdi");
EklenecekDiv.append(MyLabelAdd1);
divim.remove();
label1.remove();
return;
console.log(EklenecekDiv);
}
if(c[3]!=null)
{
c[3].remove();
}*/
var label=document.getElementById(data);
var MyLabelAdd=document.createElement("div");
MyLabelAdd.appendChild(document.createTextNode($(label).html()));
$(MyLabelAdd).attr("name","KolonAdi");
if(YaziFont!=null&&YaziBoyutu!=null){MyLabelAdd.style.fontFamily=YaziFont; }
if(YaziBoyutu!=null){alert(YaziBoyutu); MyLabelAdd.style.fontSize =YaziBoyutu+"px"; }
EklenecekDiv.appendChild(MyLabelAdd);
label.remove();
}
function tiklandi()
{
alert("Okey");
}
function Click(e){
if(SecilenItem==null)
{
alert("Lütfen Alan Seçiniz");
return;
}
var item=SecilenItem;
var div=document.getElementById("Itemler");
var label=document.createElement("span");
$(label).addClass("label label-danger col-xs-1");
$(label).attr("id","drag");
$(label).attr("draggable","true");
$(label).attr("ondragstart","drag(event)");
$(label).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
label.appendChild(document.createTextNode(item));
div.appendChild(label);
//console.log($(label).html());
var KolonDiv=document.createElement("div");
$(KolonDiv).attr("ondrop","drop(event)")
$(KolonDiv).attr("ondragover","allowDrop(event)");
$(KolonDiv).addClass("divKolon");
KolonDiv.style.marginLeft=Bosluk+"px";
$(KolonDiv).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
$(KolonDiv).resizable();
$(KolonDiv).draggable();
var Kolonlar=document.getElementById("Kolonlar");
Kolonlar.appendChild(KolonDiv);
};
function CiktiGetir(e){
var KolonlarinChildren=document.getElementsByClassName("divKolon");
var printContents = document.getElementById("Kolonlar");
var originalContents = document.body.innerHTML;
printContents=printContents.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
function TabloAlanTiklandi (e){
SecilenItem=$(e).text();
$(e).parents(".dropdown").find('.btn').html( $(e).text() );
//e.remove();
}
function FontLi(e)
{
YaziFont=$(e).text();
$(e).parents(".dropdown").find('.btn').html( $(e).text() );
}
function StilDegistir(e)
{
}
function EkAlanClick(e){
if($("#EkAlan").val()==null)
{
alert("Lütfen Alan Giriniz");
return;
}
var h1=document.createElement("h1");
var item=$("#EkAlan").val();
var div=document.getElementById("Itemler");
var label=document.createElement("span");
$(label).addClass("label label-danger col-xs-1");
$(label).attr("id","drag");
$(label).attr("draggable","true");
$(label).attr("ondragstart","drag(event)");
$(label).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
label.appendChild(document.createTextNode(item));
div.appendChild(label);
//console.log($(label).html());
var KolonDiv=document.createElement("div");
$(KolonDiv).attr("ondrop","drop(event)")
$(KolonDiv).attr("ondragover","allowDrop(event)");
$(KolonDiv).addClass("divKolon");
$(KolonDiv).mousedown(function(e){
if( e.button == 2 ) {
$(this).remove();
return false;
}
return true;
});
$(KolonDiv).resizable();
$(KolonDiv).draggable();
var Kolonlar=document.getElementById("Kolonlar");
Kolonlar.appendChild(KolonDiv);
$("#EkAlan").val("");
}
function BoslukEkle(e)
{
if($("#Aralik").val().lenght==0)
{
alert("Aralik Degeri Giriniz");
return;
}
Bosluk=$("#Aralik").val();
alert(Bosluk);
$("#Aralik").val("");
}
function BoyutEkle(e)
{
if($("#YaziBoyutu").val().lenght==0)
{
alert("Boyut Degeri Giriniz");
return;
}
YaziBoyutu=$("#YaziBoyutu").val();
$("#YaziBoyutu").val("");
}
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Calendar</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<!-- Left side column. contains the logo and sidebar -->
<!-- Content Wrapper. Contains page content -->
<!-- Content Header (Page header) -->
<!-- Main content -->
<div class="divUstKolon col-xs-12" id="Itemler" style="height:50px"></div>
<div class=" col-xs-12" style="margin-top:20px" >
<div class="dropdown col-xs-1" style="height:32px " >
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Alan Ekle
<span class="caret"></span></button>
<ul id="Secenekler" class="dropdown-menu">
<li><a onClick="TabloAlanTiklandi(this)" href="#">Isim</a></li>
<li><a onClick="TabloAlanTiklandi(this)"href="#">SoyIsim</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Adress</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Numara</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Yaş</a></li>
<li><a onClick="TabloAlanTiklandi(this)" href="#">Tanıdık 1</a></li>
</ul>
</div>
<label class="btn btn-default col-xs-1" style="margin-left :10px ; height:32px " id="Ekle" onClick="Click(this)"> Ekle </label>
<div class="col-xs-1"></div>
<input style="margin-left :10px ; height:32px " type="text" class="col-xs-1" id="EkAlan">
<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" id="Ekle" onClick="EkAlanClick(this)"> Ek Alan Ekle </label>
<div class="col-xs-4" ></div>
<label class="btn btn-danger col-xs-1" id="CiktiGetir" style="margin-right :10px" onClick="CiktiGetir(this)" >Ön İzleme</label>
<label class="btn btn-primary col-xs-1" id="CiktiGetir" style="margin-right :10px" onClick="CiktiGetir(this)" >Ana Sayfa</label>
</div>
<div class="col-xs-12" style="margin-top:10px">
<input style="margin-left :10px ; height:32px " type="text" class="col-xs-1" id="YaziBoyutu" placeholder="Yazı Boyutu">
<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" onClick="BoyutEkle(this)"> Değiştir</label>
<div class="col-xs-1" ></div>
<div class="dropdown col-xs-2" style="height:32px " >
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Yazı Font
<span class="caret"></span></button>
<ul id="Fontlar" class="dropdown-menu">
<li><a onClick="FontLi(this)" href="#">Georgia</a></li>
<li><a onClick="FontLi(this)"href="#">Palatino Linotype</a></li>
<li><a onClick="FontLi(this)" href="#">Book Antiqua</a></li>
<li><a onClick="FontLi(this)" href="#">Times New Roman</a></li>
<li><a onClick="FontLi(this)" href="#">Arial</a></li>
<li><a onClick="FontLi(this)" href="#">Helvetica</a></li>
<li><a onClick="FontLi(this)" href="#">Arial Black</a></li>
<li><a onClick="FontLi(this)" href="#">Impact</a></li>
<li><a onClick="FontLi(this)" href="#">Lucida Sans Unicode</a></li>
<li><a onClick="FontLi(this)" href="#">Tahoma</a></li>
<li><a onClick="FontLi(this)" href="#">Verdana</a></li>
<li><a onClick="FontLi(this)" href="#">Courier New</a></li>
<li><a onClick="FontLi(this)" href="#">Lucida Console</a></li>
</ul>
</div>
<label style="margin-left :10px ; height:32px" class="btn btn-default col-xs-1" id="Ekle" onClick="StilDegistir(this)"> Yazi Stil Değiştir</label>
<div class="col-xs-1" ></div>
</div>
<div class="col-xs-12" id="Kolonlar" style="margin-top :10px"> </div>
<!-- /.content -->
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
<!-- ./wrapper -->
<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- fullCalendar 2.2.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="plugins/fullcalendar/fullcalendar.min.js"></script>
<!-- Page specific script -->
</body>
</html>

It's not an optimal solution but can you try replacing CiktiGetir function with this:
function CiktiGetir(e){
var htmlElement = document.querySelector("html");
var printContents = document.getElementById("Kolonlar");
// Make body invisible, append new element to HTML
document.body.style.display = "none";
htmlElement.appendChild(printContents);
window.print();
// Make body visible again, remove the added element
document.body.style.display = "initial";
htmlElement.removeChild(printContents);
}
Replacing HTML content breaks the JS events and dynamic contents.

You are replacing the body HTML
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
So you will need to reatach the events.
Try the "on" jquery method. Something like
$(document).on('click', '#CiktiGetir', function() { CiktiGetir(); });

My code was just an example. You will have to adapt it to your code.
You need to reatach the events after replace body content.
If, you dont want to to this, you can refresh the entire page.
function CiktiGetir(e){
var KolonlarinChildren=document.getElementsByClassName("divKolon");
var printContents = document.getElementById("Kolonlar");
printContents=printContents.innerHTML;
document.body.innerHTML = printContents;
window.print();
location.reload();
}

Update Status in Highcharts

I've been trying to find a way to update the chart data within highcharts every 5 second. I'm collecting data from an MSSQL server using PHP and have been runnin gthis successfully. I'm struggling with the calling of th latest data and passing it through to the chart.
Here is the php file planlivephp.php:
<?php
// CONNECT TO LOCAL SERVER
require_once('server.php');
// DATA TABLE 12a - PLAN DATA POINTS
$tsql12a = "SELECT * FROM AggCurrentPlanUtilStatus";
$stmt12a = sqlsrv_query( $conn, $tsql12a);
$occ = array(0=>'#009900', 1=>'#FF0000'); // GREEN RED
$data12a = "";
while( $row = sqlsrv_fetch_array( $stmt12a, SQLSRV_FETCH_NUMERIC)){
$data12a .= "{name: ";
$data12a .= "'$row[2]',";
$data12a .= " color: '";
$data12a .= $occ[$row[3]];
$data12a .= "', x: $row[6],";
$data12a .= " y: $row[7]";
$data12a .= "},";
}
$data12a = substr($data12a,0,strlen($data12a)-1);
// ECHO STATEMENTS TO CHECK DATA IF WORKING PROPERLY
// echo "$data12a";
// CLOSE THE CONNECTION TO THE SERVER
sqlsrv_free_stmt( $stmt12a);
sqlsrv_close( $conn); // closes the connection
?>
I've then added a getStatus function with a setTimeout of 5 seconds at the begining of the highcharts script to call the php file and load it to the div id.
$(function ) {
getStatus();
});
function getStatus(){
$('#chart1').load('planlivephp.php');
setTimeout("getStatus()",5000);
}
Here is the full code altogether with the javascript feeding the div id "#chart1" in the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Mosaddek">
<meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
<link rel="shortcut icon" href="img/favicon.png">
<title>INOVU Dashboard</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reset.css" rel="stylesheet">
<!--external css-->
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<!--right slidebar-->
<link href="css/slidebars.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section id="container" class="sidebar-closed"> <!-- LEAVE BLANK "" IF YOU WNAT THE MENU TO ALWAYS APPEAR ON OPENNING
<!--header start-->
<header class="header white-bg">
<!--<div class="sidebar-toggle-box">
<div data-original-title="Toggle Navigation" data-placement="right" class="fa fa-bars tooltips"></div>
</div>
<!--logo start-->
<!-- Ino<span>Vu</span> -->
<a class="navbar-brand" href="../index.html"><img src="../VUF/img/inovu_logo.png" alt="" style="height: 26px"></a>
<!--logo end-->
<div class="nav notify-row" id="top_menu">
<!-- DASHBOARD ICON BUTTONS START -->
<ul class="nav top-menu">
<!--home page-->
<li data-original-title="Home" data-placement="right" class="dropdown tooltips">
<a href="../index.html">
<i class="fa fa-home"></i>
</a>
</li>
<!--home page end-->
<!--map page-->
<li data-original-title="Location Map" data-placement="right" class="dropdown tooltips">
<a href="location.php">
<i class="fa fa-map-marker"></i>
</a>
</li>
<!--map page end-->
<!--floor plan page-->
<li data-original-title="Floor Plan" data-placement="right" class="dropdown tooltips">
<a href="plan.php">
<i class="fa fa-file-o"></i>
</a>
</li>
<!--floor plan end-->
<!--dashboard page-->
<li data-original-title="Dashboard" data-placement="right" class="dropdown tooltips">
<a href="dashboard.php">
<i class="fa fa-bar-chart-o"></i>
</a>
</li>
<!--dashboard end-->
</ul>
<!-- DASHBOARD ICON BUTTONS END-->
</div>
<div class="top-nav ">
<ul class="nav pull-right top-menu">
<!--<li>
<input type="text" class="form-control search" placeholder="Search">
</li>-->
<!-- user login dropdown start-->
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<img alt="" src="img/avatar1_small.jpg">
<span class="username">Dave Dash</span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu extended logout">
<div class="log-arrow-up"></div>
<li><i class=" fa fa-suitcase"></i>Profile</li>
<li><i class="fa fa-cog"></i> Settings</li>
<li><i class="fa fa-bell-o"></i> Notification</li>
<li><i class="fa fa-key"></i> Log Out</li>
</ul>
</li>
<!-- user login dropdown end -->
</ul>
</div>
</header>
<!--header end-->
<script src="jquery.min.js" type="text/javascript"></script>
<!--main content start-->
<section id="main-content">
<section class="wrapper site-min-height">
<!-- portlet page start-->
<div class="row-fluid" id="draggable_portlets">
<div class="sortable">
<!-- BEGIN Portlet PORTLET-->
<div class="panel">
<header class="panel-heading">HSSMI Floor Plan
<span class="tools pull-right">
</span>
</header>
<div class="panel-body">
<div id="chart1" style="width: 1000px; height: '100%';"></div>
<div id="drag"></div>
<div id="drop"></div>
</div>
</div>
<!-- END Portlet PORTLET-->
</div>
</div>
<!-- page end-->
</section>
</section>
<!--main content end-->
<!--footer start-->
<footer class="site-footer">
<div class="text-center">
© 2015 INOVU
<SCRIPT language="Javascript">
document.write("Refreshed: " + document.lastModified +"");
</SCRIPT>
<a href="#" class="go-top">
<i class="fa fa-angle-up"></i>
</a>
</div>
</footer>
<!--footer end-->
</section>
<!-- js placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="assets/jquery-ui/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script class="include" type="text/javascript" src="js/jquery.dcjqaccordion.2.7.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
<script src="js/respond.min.js" ></script>
<script src="js/draggable-portlet.js"></script>
<!--right slidebar-->
<script src="js/slidebars.min.js"></script>
<!--common script for all pages-->
<script src="js/common-scripts.js"></script>
<script>
jQuery(document).ready(function() {
DraggablePortlet.init();
});
</script>
<!-- HIGHCHART SCRIPT FILES -->
<!-- <link rel="stylesheet" href="/Highcharts/css/HcHSSMImain.css"> -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/Highcharts/js/highcharts.js"></script>
<script src="/Highcharts/js/highcharts-more.js"></script>
<script src="/Highcharts/js/modules/heatmap.js"></script>
<script src="/Highcharts/js/modules/drilldown.js"></script>
<script src="/Highcharts/js/modules/exporting.js"></script>
<script src="/Highcharts/js/draggable-points.js"></script>
<script src="/Highcharts/js/export-csvRob.js"></script>
<script type="text/javascript"> // PLAN INDICATING OCCUPIED OR UNOCCUPIED DESKS
$(function ) {
getStatus();
});
function getStatus(){
$('#chart1').load('planlivephp.php');
setTimeout("getStatus()",5000);
}
$('#chart1').highcharts({
chart: {
plotBackgroundImage: '/Highcharts/graphics/HSSMIPLAN.png',
height: 600,
animation: false
},
credits: {
enabled: false
},
title: {
text: null //'HSSMI Occupancy Plan (Live)'
},
xAxis: {
min: 0,
max: 1000,
labels: {enabled:false},
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0
},
yAxis: {
min: 0,
max: 600,
title: false,
gridLineWidth: 0,
labels: {enabled:false},
lineColor: 'transparent',
},
legend: {
enabled: false
},
plotOptions: {
series: {
cursor: 'ns-resize',
point: {
events: {
drag: function (e) {
$('#drag').html(
'Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.newY, 0) + '</b>');
},
drop: function () {
$('#drop').html(
'In <b>' + this.series.name + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 0) + '</b>');
}
}
},
//stickyTracking: false
},
},
tooltip: {
borderColor: 'rgb(43, 110, 151)',
formatter: function () {
return 'Sensor: <b>'+ this.point.name + '</b><br>X Value: <b>' +
this.point.x + '<br>Y Value: <b>' + this.point.y +'</b>';
}
},
series: [{
type: 'bubble',
minSize: 25,
maxSize: 25,
cursor: 'pointer',
draggableX: false,
draggableY: false,
data: [<?php echo $data12a?>]
}]
});
$('#getcsv').click(function () {
var csv = "Series;Name;X;Y\n";
$.each(Highcharts.charts[0].series, function(i,s){
$.each(s.points, function(j,p){
csv += s.name + ";" + p.name + ";" + p.x + ";" + p.y + "\n";
});
});
alert(csv);
});
});
</script>
</body>
</html>
Any suggestions or corrections you could put forward.
Thanks
Rob

Create a simple booking system using Jquery UI datepicker

I'm building a simple booking system for a friend's holiday house and I'm really struggling to implement it. Only one group can stay in the cottage at one time. First let me run through what the booking system must be able to do (things I've already completed are in brackets).
Receive emails from guests with the dates they want to stay
(completed but haven't included as not relevant).
Admin can then choose those dates in Jquery UI datepicker and
store the fromDate and toDate in the database (completed but not
sure if correct).
The fromDate and toDate are then retrieved from the database and then
disabled in the Jquery UI datepicker (Don't know how to do this).
When the fromDate and toDate are disabled all the dates in between
those dates should be disabled, with the fromDate and toDate in a
slightly different colour to indicate the check in and check out
times (No idea how to do this).
The admin should be able to edit and delete dates stored in the
database. No need for taking payment as this will be handled
offline.
Ok, I'm going to paste in all the code that I have completed so far. I used includes in my file but I will post each file separately here in the order they appear. The most important ones, where all the action is happening are calendar.php and datepicker-admin.js but I've posted everything for context. I really am gazzumped here so if someone could walk me through a solution and help me understand what's going on I would really appreciate it. I took on this project because I thought it would be a good way to learn PHP but I'm a little over my head.
config.php
<?php
define("DB_HOST", "localhost");
define("DB_NAME", "calendar");
define("DB_PORT", "XXXX"); // Not going to display my port online
define("DB_USER", "db_user");
define("DB_PASS", "db_password");
database.php
<?php
require('config.php');
try {
$db = new PDO("mysql:host=" . DB_HOST . ";dbname=" . DB_NAME . ";port=" . DB_PORT,DB_USER,DB_PASS);
$db->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
$db->exec("SET NAMES 'utf8'");
} catch (Exception $e) {
echo "Could not connect to the database";
exit;
}
header.php
<!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.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Sticky Footer Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/sticky-footer-navbar.css" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/style.css">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Muscheltraum</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--container-->
</div><!--navbar-->
calendar.php
<?php
require('inc/header.php');
require('database.php');
// a request method of post indicates that
// we are receiving a form submission
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$fromDate = trim($_POST["fromDate"]);
$toDate = trim($_POST["toDate"]);
if ($fromDate == "") {
$error_message = "You must select a from date";
}
if ($toDate == "") {
$error_message = "You must select a to date";
}
else {
try {
$results = $db->prepare("INSERT INTO availability (fromDate, toDate) VALUES (?, ?)");
$results->bindParam(1, $fromDate);
$results->bindParam(2, $toDate);
$results->execute();
} catch (Exception $e) {
echo "Data could not be inserted.";
exit;
}
header("Location: " . "calendar.php/?status=thanks");
}
}
try {
$results = $db->prepare("SELECT fromDate, toDate FROM availability");
$results->execute();
} catch (Exception $e) {
echo "Data could not be retrieved.";
exit;
}
$disablethese = $results->fetch(PDO::FETCH_ASSOC);
?>
<div class="container">
<div class="row">
<div class="col-md-12">
<?php if (isset($_GET["status"]) AND $_GET["status"] == "thanks") { ?>
<p class="alert alert-success">Successful!</p>
<?php } else { ?>
<?php
if (isset($error_message)) {
echo '<p class="alert alert-danger">' . $error_message . '</p>';
}
} ?>
<form action="calendar.php" method="post">
<div class="form-group">
<label for="fromDate">From</label>
<input type="text" id="fromDate" name="fromDate" data-disablethese="<?=json_encode($disablethese)?>">
<?php echo '<pre>';
var_dump($disablethese);
?>
</div>
<div class="form-group">
<label for="toDate">To</label>
<input type="text" id="toDate" name="toDate"></input>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
<?php require('inc/footer.php');?>
footer.php
</div><!--endwrap-->
<div id="footer">
<div class="container">
<p class="text-muted credit">Place sticky footer content here.</p>
</div>
</div>
<!-- Bootstrap core Javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/jquery.ui.datepicker-de.js"></script>
<script src="js/datepicker.js"></script>
<script src="js/datepicker-admin.js"></script>
</body>
</html>
datepicker-admin.js
var disablethese = $("#fromDate").data("disablethese");
console.log(disablethese);
$('#fromDate').datepicker({
beforeShowDay: function (date) {
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [disablethese.indexOf(string) == -1];
}
});
This is what my table looks like at the moment. It only has one row at the moment. id: 10 fromDate: 2014-02-28 toDate: 2014-02-23

Getting "is not defined" loading a function from external javascript

I have two files: index.php and local.js.
This is index.php:
<!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.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<!-- FontAwesome: font-set designed for Bootstrap -->
<link href="css/font-awesome.css" rel="stylesheet">
<title>Befair-Timetracker</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/time.css" rel="stylesheet">
<!-- Template HTML to build up a new row on the table -->
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<?php
//include("dbconn.php");
?>
<div class="navbar navbar-inverse navbar-fixed-top navbar-time" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle navbarbtn" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Timetracker</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Tracking</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control input-sm">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control input-sm">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron jumbotime">
<div class="container">
<h1 class="time">Timetracker management</h1>
<p class="timepar">Nella tabella sottostante verranno inserite la varie attività, classificabili in base al proprio CH e agli utenti che le svolgono.</p>
<!--<p><a class="btn btn-primary btn-lg" role="button">Learn more »</a></p>-->
</div>
</div>
<div class="container">
<h3 class="time">Risultati attesi</h3>
<hr>
<div class="selection"> <!-- inserire well nella classe per ottenere riquadro blu -->
<span class="titolosel">Centro di costo</span>
<select class="form-control selecttime">
</select>
</div>
<hr>
<!-- Table containing the info about CH, users and RA -->
<table id ="timetable" class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Users</th>
<th>Activities</th>
<th>Timer</th>
</tr>
</thead>
<tbody class="ra hide">
</tbody>
</table>
<footer>
© BeFair 2013 - Website developed by Riccardo Pancotti
<div class="pull-right">
<!--<img src="images/beFair.jpg" alt="beFair-logo" class="img-rounded imglogo">-->
</div>
</footer>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="js/local.js"></script>
<script type="text/javascript" charset="utf-8">
//**ANIMATED DIV/TABLE/TIMER**
function showact(ID){
$(".tr-act"+ID).animate({"height": "toggle"}, { duration: 300 });
//$(".hide").animate({"display":"toggle"}, { duration: 300 });
}
</script>
<script type="text/javascript" charset="utf-8">
//**LOADING JSON**
$(document).ready(function()
{
starttimer(2);
$.getJSON('js/test2.json', function(json) {
$.each(json.ch,function(key,val)
{
var chname=("<option value="+val.name+">"+val.name+"</option>");
$(".selecttime").append(chname);
});
});
});
</script>
<script type="text/javascript" charset="utf-8">
//$(document).ready(startimer(4));
//**CENTRO DI COSTO SELECTION**
$('.selecttime').change(function()
{
var pippo = "";
console.clear();
//setValue();
var pippo = $('.selecttime').val();
var chtable=("<tbody class=\"ra\"><tr>");
$.ajaxSetup( { "async": false } ); //Chiamata asincrona al server per il JSON
$.getJSON('js/test3.json', pippo,function(json) {
for (var i = 0, len = json.ch.length; i < len; i++) {
var namera = json.ch[i].name;
console.log(namera);
if (pippo === namera)
{
console.log("RA " +json.ch[i].ra_list.length);
for (var k = 0, lungh = json.ch[i].ra_list.length; k < lungh; k++)
{
//CICLO PER AGGIUNGERE NUOVE RA
var print = json.ch[i].ra_list[k];
chtable +=("<td>"+print.id+"</td>");
chtable +=("<td>"+print.name+"</td>");
chtable +=("<td>"+print.users+"</td>");
//***VECCHIA RIGA, MOSTRA TIMER***
//chtable +="<td><i class=\"fa fa-plus-square\"></i></td>";
//********************************
chtable +="<td class=\"timertd\"><i class=\"fa fa-plus-square\">+</i></td>";
chtable +="<td></td>";
console.log("Attività " + print.activities.length);
tract = "";
list_act = "";
count = 0;
for (var j = 0, lungh_in = json.ch[i].ra_list[k].activities.length; j < lungh_in; j++)
{
//CICLO PER AGGIUNGERE NUOVE ATTIVITA'
list_act += ("<tr style=\"display:none\" class=\"tr-act"+k+"\">");
list_act += "<td></td><td></td><td></td>";
list_act += "<td>";
list_act += print.activities[j].name;
list_act += "</td>";
list_act += "<td>" + "setValue()" + "</td>";
list_act += ("</tr>");
count++;
}
chtable += list_act;
chtable += "</tr>";
$(".ra").replaceWith(chtable);
}
}
}
});
});
</script>
</body>
</html>
And this is local.js:
var starttimer = function(idt)
{
alert(idt);
};
I'm trying to call this function here (it's part of the index.html):
<script type="text/javascript" charset="utf-8">
//**LOADING JSON**
$(document).ready(function()
{
starttimer(2);
$.getJSON('js/test2.json', function(json) {
$.each(json.ch,function(key,val)
{
var chname=("<option value="+val.name+">"+val.name+"</option>");
$(".selecttime").append(chname);
});
});
});
</script>
but it keeps telling me "function is not defined".
What's the problem?
Probably it's something about the scope but i don't know what.

Solved, i was refering to the wrong file.

Develop Reference

JavaScript is the programming language of the Web.

Results change without page load - javascript

Related

Syntax Error 'SCRIPT1002' using Internet Explorer 11

JavaScript Print function issue

Update Status in Highcharts

Create a simple booking system using Jquery UI datepicker

Getting "is not defined" loading a function from external javascript

Categories

Resources