Update Status in Highcharts - javascript

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

Related

Google sheet to Html Json Data - On Click Show New Box Show Data

I am trying to fetch data from the google sheet, through JSON format and show in HTML. which is fine.
What I want, onclick on items or arrow
Open the sidebar and fetch relative data of item with list like
Slip No : 1207
Client Name: Client
Email : exmple2#gmail.com
Delivery : Next Sunday
Like Whatsapp look at people's details onclick
$.getJSON("https://spreadsheets.google.com/feeds/list/1XaFRnQfNPRP86UPNcdgQuCCH6AeVe5FZOxBHaIPZDpM/od6/public/values?alt=json", function(data) {
var sheetData = data.feed.entry;
var i;
for (i = 0; i < sheetData.length; i++) {
var name = data.feed.entry[i]['gsx$slipno']['$t'];
var id = data.feed.entry[i]['gsx$id']['$t'];
var clientname = data.feed.entry[i]['gsx$clientname']['$t'];
// var email = data.feed.entry[i]['gsx$email']['$t'];
// var delivery = data.feed.entry[i]['gsx$delivery']['$t'];
document.getElementById('demo').innerHTML +=
('<tr class="dd d-flex justify-content-around">' +
'<td>' +
" <span id='" + 't' + id + "'>" + name + '</span>' +
'<span class="cn">' + clientname + '</span>' +
'</td>' +
'<td class="ml-auto gg">' +
'</td>' +
'</tr>');
}
});
tbody>tr>td>span {
text-align: left;
display: block;
}
.dd {
border-bottom: rgb(202, 202, 202) solid 1px;
display: block;
}
.cn {
font-weight: 700;
}
.gg::before {
content: ">";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#"> brand</a>
<ul class="navbar-nav mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<div class="container text-center my-4">
<!-- Table -->
<table class="table " id="testTable">
<!-- Table head -->
<thead>
<tr>
<th>Google Sheet Data</th>
</tr>
</thead>
<!-- Table head -->
<!-- Table body -->
<tbody id="demo">
</tbody>
<!-- Table body -->
</table>
<!-- Table -->
</div>
</body>
</html>

I created a global array called myData. When the service is called, the array is reset and records are added. Each record is built to contain the data that you want to work with. The index is saved to the record so it can be used to find the record in myData when an element is selected.
I decided to add onclick methods to the elements you want to use to show the details, which is clientname and the arrow icon. Clicking an element passes the index that is tied to the record and is used to reference the data in myData.
var myData = [];
// an example function that will get the data by index so it can be used however you want
function showDetails(index) {
var selectedData = myData[index];
alert(JSON.stringify(selectedData, null, 2));
}
$.getJSON("https://spreadsheets.google.com/feeds/list/1XaFRnQfNPRP86UPNcdgQuCCH6AeVe5FZOxBHaIPZDpM/od6/public/values?alt=json", function(data) {
myData = []; // reset whenever data loads
var sheetData = data.feed.entry;
var i;
for (i = 0; i < sheetData.length; i++) {
var dataPoint = {
name: data.feed.entry[i]['gsx$slipno']['$t'],
id: data.feed.entry[i]['gsx$id']['$t'],
clientname: data.feed.entry[i]['gsx$clientname']['$t'],
delivery: data.feed.entry[i]['gsx$delivery']['$t']
};
myData.push(dataPoint); // add data point to array to reference later
// var email = data.feed.entry[i]['gsx$email']['$t'];
// var delivery = data.feed.entry[i]['gsx$delivery']['$t'];
document.getElementById('demo').innerHTML +=
('<tr class="dd d-flex justify-content-around">' +
'<td>' +
" <span id='" + 't' + dataPoint.id + "'>" + dataPoint.name + '</span>' +
'<span class="cn" onclick="showDetails(' + i + ');">' + dataPoint.clientname + '</span>' +
'</td>' +
'<td class="ml-auto gg" onclick="showDetails(' + i + ');">' +
'</td>' +
'</tr>');
}
});
tbody>tr>td>span {
text-align: left;
display: block;
}
.dd {
border-bottom: rgb(202, 202, 202) solid 1px;
display: block;
}
.cn {
font-weight: 700;
}
.gg::before {
content: ">";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#"> brand</a>
<ul class="navbar-nav mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<div class="container text-center my-4">
<!-- Table -->
<table class="table " id="testTable">
<!-- Table head -->
<thead>
<tr>
<th>Google Sheet Data</th>
</tr>
</thead>
<!-- Table head -->
<!-- Table body -->
<tbody id="demo">
</tbody>
<!-- Table body -->
</table>
<!-- Table -->
</div>
</body>
</html>

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.

Results change without page load

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;
}
?>

How to fix my jQuery animation?

I'm trying to animate a .col-md-3 to slide from the left side of the screen after pressing a button and make it come back (aka side menu).
First part of the animation works perfect, but -$lefty.outerWidht():0 drags all the content at its right too much.
Here's the code:
<script type = "text/javascript">
$(function(){
$('.button').on('click', function(){
var $lefty = $('.col-md-3').css('display', 'block').next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0
});
if ($('.col-md-3').css('display')=='block') {
$('.col-md-9').css('width', '80%');
$('.col-md-9').css('margin-left', '20%');
}
if ($lefty.outerWidth=='0') {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
});
});
</script>
Here's my html:
<!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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src ="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/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>
<script src="js/jquery.glide.min.js"></script>
<!--Animate-->
<srcipt src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/contanter.css">
<!--Animate_Menu-->
<script type = "text/javascript">
$(function(){
$('.button').on('click', function(){
var $lefty = $('.col-md-3').css('display', 'block').next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth():
0
});
/*if ($('.col-md-3').css('display')=='block') {
$('.col-md-9').css('width', '80%');
$('.col-md-9').css('margin-left', '20%');
}*/
if ($lefty.outerWidth=='0') {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
});
});
</script>
</head>
<body>
<div class="header">
<div class="col-md-3">
<center>
<ul>
<li class="menu-link"><img alt="Brand" src="img/brand.png" style="height: 7em;"></li>
<li class="menu-link">Главная</li>
<li class="menu-link">О Нас</li>
<li class="menu-link">Контакты</li>
<li class="menu-link">Мы предлагаем</li> <!-- СДЕЛАТЬ DROPDOWN!!!!! -->
<li class="menu-link">Блог</li>
<li class="menu-link">Форум</li>
<div class="login-box">
<button type="button" class="btn btn-success"><div class = "glyphicon glyphicon-user"></div> Вход</button>
<button type="button" class="btn btn-warning"><div class = "glyphicon glyphicon-pencil"></div> Регистрация</button>
</div>
<div class="copyright"><li class="menu-link">©OrangeKampWeb</li></div>
</ul>
</center>
</div>
<div class="col-md-9">
<button type ="button" class = "button">
<div class = "glyphicon glyphicon-menu-hamburger">
</div>
</button>
<div class="slider">
<ul class="slides">
<li class="slide"><div class="box"><img src="img/1.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/2.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/3.jpg"></div></li>
</ul>
</div>
<script type="text/javascript">
var glide = $('.slider').glide({arrowRightText: '>', arrowLeftText: '<'}).data('api_glide');
$(window).on('keyup', function (key) {
if (key.keyCode === 13) {
glide.jump(3, console.log('Wooo!'));
};
});
$('.slider-arrow').on('click', function() {
console.log(glide.current());
});
</script>
</div>
</div>
</body>
</html>
<!-- begin snippet: js hide: false -->
Here's if's properties
if ($lefty.offset().left== 0) {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}

Your should use offset().left instead of outerWidth(). If you move the div to the left, the div gets an offset - and you need to move the div back based on this offset.
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.offset().left: 0
});
See the updated code below:
<!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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<script src ="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/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>
<script src="js/jquery.glide.min.js"></script>
<!--Animate-->
<srcipt src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/contanter.css">
<!--Animate_Menu-->
<script type = "text/javascript">
$(function(){
$('.button').on('click', function(){
var $lefty = $('.col-md-3').css('display', 'block').next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.offset().left: 0});
/*if ($('.col-md-3').css('display')=='block') {
$('.col-md-9').css('width', '80%');
$('.col-md-9').css('margin-left', '20%');
}*/
if ($lefty.outerWidth=='0') {
$('.col-md-9').css('width', '100%');
$('.col-md-9').css('margin-left', '0%');
}
});
});
</script>
</head>
<body>
<div class="header">
<div class="col-md-3">
<center>
<ul>
<li class="menu-link"><img alt="Brand" src="img/brand.png" style="height: 7em;"></li>
<li class="menu-link">Главная</li>
<li class="menu-link">О Нас</li>
<li class="menu-link">Контакты</li>
<li class="menu-link">Мы предлагаем</li> <!-- СДЕЛАТЬ DROPDOWN!!!!! -->
<li class="menu-link">Блог</li>
<li class="menu-link">Форум</li>
<div class="login-box">
<button type="button" class="btn btn-success"><div class = "glyphicon glyphicon-user"></div> Вход</button>
<button type="button" class="btn btn-warning"><div class = "glyphicon glyphicon-pencil"></div> Регистрация</button>
</div>
<div class="copyright"><li class="menu-link">©OrangeKampWeb</li></div>
</ul>
</center>
</div>
<div class="col-md-9">
<button type ="button" class = "button">
<div class = "glyphicon glyphicon-menu-hamburger">
</div>
</button>
<div class="slider">
<ul class="slides">
<li class="slide"><div class="box"><img src="img/1.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/2.jpg"></div></li>
<li class="slide"><div class="box"><img src="img/3.jpg"></div></li>
</ul>
</div>
<script type="text/javascript">
var glide = $('.slider').glide({arrowRightText: '>', arrowLeftText: '<'}).data('api_glide');
$(window).on('keyup', function (key) {
if (key.keyCode === 13) {
glide.jump(3, console.log('Wooo!'));
};
});
$('.slider-arrow').on('click', function() {
console.log(glide.current());
});
</script>
</div>
</div>
</body>
</html>
<!-- begin snippet: js hide: false -->
Here is the fiddle: https://jsfiddle.net/aaqtw3do/

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.

Categories

Resources