Getting "is not defined" loading a function from external javascript - 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.

Related

Creating multiple fields in the same line

I'm trying to develop a dynamic form, where, if the user click on the plus icon, it should create two new fields in the same line.
The code that I have right now, it only create one single field, I tried to duplicate the same code in the funtion, but it only create two fields in vertical position and not in the same line.
Thank you Kindly !
Javascript code
var survey_options = document.getElementById('columna');
var add_more_fields = document.getElementById('add_more_fields');
var remove_fields = document.getElementById('remove_fields');
function Añadir(){
var newField = document.createElement('input');
newField.setAttribute('type','text');
newField.setAttribute('class','form-control');
newField.setAttribute('placeholder','Another Field');
survey_options.appendChild(newField);
}
function Eliminar(){
var input_tags = survey_options.getElementsByTagName('input');
if(input_tags.length > 2) {
survey_options.removeChild(input_tags[(input_tags.length) - 1]);
}
}
Html Code
<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- Awsome Fonts-->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Styling -->
<link rel="stylesheet" type="text/css" href="style.css">
<!-- My Title-->
<title>Hello, world!</title>
</head>
<body>
<form class="Form" id="formulario">
<h1>Factibilidad Técnica y Operativa</h1>
<h2>Análisis de Infraestructura</h2>
<!-- Campos en Columnas-->
<div class="container" id="contenedor">
<div class="row" id="campo">
<div class="col" id="columna">
<input type="text" class="form-control" placeholder="Infraestructura">
</div>
<div class="col" id="columna">
<input type="text" class="form-control" placeholder="Infraestructura">
</div>
</div>
</div>
<!-- Iconos de Agregar / Eliminar Campos-->
<div class="Controls">
<i class="fa fa-plus-square"></i>Añadir
<i class="fa fa-minus-square"></i>Eliminar
</div>
</form>
<!-- JS Script-->
<script src="script.js"></script>
</body>
</html>

Very first point id value must not repeat. It should be unique. For More Info
In html, inputs are embedded in div so you should follow the same in JS to get same result.
div.col-lg-6 makes tags inside them to set half of screen when screen size is large. It will helps to your design
As I said, I created div.col-lg-6.mb-2 in JS and embedded input in div to get final result. mb-2 gives margin-bottom
div is embedded in div#campo and final result is here
var survey_options = document.getElementById('campo');
var add_more_fields = document.getElementById('add_more_fields');
var remove_fields = document.getElementById('remove_fields');
function Añadir(){
var newDiv = document.createElement('div');
newDiv.setAttribute('class', 'col-lg-6 mb-2')
var newField = document.createElement('input');
newField.setAttribute('type','text');
newField.setAttribute('class','form-control');
newField.setAttribute('placeholder','Another Field');
survey_options.appendChild(newDiv)
newDiv.appendChild(newField);
}
function Eliminar(){
var input_tags = survey_options.getElementsByTagName('input');
if(input_tags.length > 2) {
survey_options.removeChild(input_tags[(input_tags.length) - 1]);
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- Awsome Fonts-->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<form class="Form" id="formulario">
<h1>Factibilidad Técnica y Operativa</h1>
<h2>Análisis de Infraestructura</h2>
<!-- Campos en Columnas-->
<div class="container" id="contenedor">
<div class="row" id="campo">
<div class="col-lg-6 mb-2">
<input type="text" class="form-control" placeholder="Infraestructura">
</div>
<div class="col-lg-6 mb-2">
<input type="text" class="form-control" placeholder="Infraestructura">
</div>
</div>
</div>
<!-- Iconos de Agregar / Eliminar Campos-->
<div class="Controls">
<i class="fa fa-plus-square"></i>Añadir
<i class="fa fa-minus-square"></i>Eliminar
</div>
</form>
</body>
Update
<!-- In HTML -->
<i class="fa fa-plus-square"></i>Añadir
<!-- In Script -->
function createTwoInput(){
Añadir();
Añadir();
}
If any clarification needed, Mention in comment

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.

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/

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

Categories

Resources