I am using angularjs for front end and php for backend.I have written some code in angular it is working fine before including the header.php function.But, after including the header.php it is not working.It is not giving any error also.I am not getting where I went wrong also.
showAllproject.php is,
<?php
include_once 'C:\wamp64\www\Performance\header\src\demo\header.php';
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!--Angularjs-->
<script data-require="angular.js#*" data-semver="1.6.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular.js"></script>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'PROJECT'},
{name:'| DESCRIPTION'},
{name:'| CREATED ON'},
{name:'| LAST UPDATED'},
{name:'| '}
];
});
</script>
</head>
<body style="height:100%">
<div class="row" >
<div class="container-fluid">
<div class="col-lg-14" style="background-color:#DCDCDC;height:50px;position:fixed">
</div>
<div ng-app="myApp" ng-controller ="namesCtrl" style="background-color:#DCDCDC;height:500px;margin-top:1cm;margin-left:1cm;margin-right:2cm;" class=" row vertical-center-row">
<div class="col-lg-12" style="background-color:green;height:1cm;">
<div class="row">
<div ng-repeat="x in names" style="margin-right:4cm;margin-left:1cm;" class="col-xs-6">
{{x.name}}
</div>
</div>
</div>
<div class="col-lg-12" style="background-color:blue;height:80%;max-height:80%;overflow: auto;">
<div class="row">
<div ng-repeat="x in names" style="margin-right:4cm;margin-left:1cm;" class="col-xs-6">
</div>
</div>
</div>
<div class="col-lg-12" style="background-color:green;height:1cm;">
</div>
</div>
</div>
</div>
</body>
</html>
header.php is,
<?php
//calling methods of methods.php file
include_once 'C:/wamp64/www/performance/header/src/demo/methods.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" type="image/png" href="http://localhost/performance/login/images/merahkee.png" />
<title> Merahkee Technology Soluctions</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- SmartMenus jQuery Bootstrap 4 Addon CSS -->
<link href="../addons/bootstrap-4/jquery.smartmenus.bootstrap-4.css" rel="stylesheet">
<!--Angularjs-->
<script data-require="angular.js#*" data-semver="1.6.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<!--This version is for title attribute-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
<!--Angularjs starts-->
<script>
var rootApp = angular.module('rootApp', ['firstApp','secondApp']);
var firstApp = angular.module('firstApp', []);
firstApp.controller('firstController', function($scope) {
$scope.pageTitle = "MerahkeeCloudMeter";
});
var secondApp = angular.module('secondApp', []);
secondApp.controller('SecondController', function($scope) {
$scope.Reports="Reports";
});
var fourApp = angular.module('fourApp', []);
secondApp.controller('fourController', function($scope) {
$scope.Test="Test";
});
var thirdApp = angular.module('thirdApp', []);
secondApp.controller('thirdController', function($scope) {
$scope.Project="Project";
});
var fifthApp = angular.module('fifthApp', []);
secondApp.controller('fifthController', function($scope) {
$scope.Report="Report";
});
var sixthApp = angular.module('sixthApp', []);
secondApp.controller('sixthController', function($scope) {
$scope.default="Default Workspace";
$scope.details = [
{name:'help',href:'#'},
{name:'settings',href:'#'},
{name:'logout',href:'http://localhost/performance/login/logout.php?logout'}
];
});
var seventhApp = angular.module('seventhApp', []);
secondApp.controller('seventhController', function($scope) {
$scope.sdc_pro = [
{name:'Show All Projects',href:'http://localhost/performance/showAll_project.php?user_id='},
{name:'Delete',href:'http://localhost/performance/delete_test.php?user_id='},
{name:'Create Projects',href:'http://localhost/performance/Create_test.php?user_id='}
];
});
var eighthApp = angular.module('eighthApp', []);
secondApp.controller('eigthController', function($scope) {
$scope.sdc_test = [
{name:'Show All Tests',href:'http://localhost/performance/showAll_test.php?user_id='},
{name:'Delete',href:'http://localhost/performance/delete_project.php?user_id='},
{name:'Create Tests',href:'http://localhost/performance/Project_form.php?user_id='}
];
});
</script>
</head>
<body style="padding-top:80px;">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<div ng-app="rootApp" class="container">
<a ng-app = "firstApp" ng-controller = "firstController" class="navbar-brand" href="#">{{ pageTitle }}</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<!-- Left nav -->
<ul class="nav navbar-nav mr-auto">
<!--Display project dropdown-->
<li ng-app = "thirdApp" ng-controller = "thirdController" class="nav-item dropdown" style="padding-right:15px;" ><a class="nav-link dropdown-toggle" href="#">{{Project}}</a>
<ul class="dropdown-menu">
<?php
echo '<li><a class="dropdown-item">Recent Projects </a></li>';
for($i=0;$i<$projectcount;$i++){
//calling test_name() method and storing those values in a string
$test=project_name($count_uid,$user_id,$pro_sql);
$project_name=$test[$i];
if(strlen($project_name)>=25){
$projectName=substr($project_name,0,25);
$projectName=$projectName.'..';
}
else{
$projectName=$project_name;
}
echo'<li><a class="dropdown-item" href="http://localhost/performance/ShowTest_of_project.php?project_name='.$project_name.'&user_id='.$user_id.'" title="'.$project_name.'">'.$projectName.'</a></li>';
}//for loops ends
//show all projects
echo'<li ng-app = "seventhApp" ng-controller = "seventhController"><a ng-repeat="x in sdc_pro" class="dropdown-item" href="{{x.href}}'.$user_id.'">{{x.name}}</a></li>';
?>
</ul><!--dropdown-menu closes-->
</li><!--project dropdown ends-->
<li ng-app = "fourApp" ng-controller = "fourController" class="nav-item dropdown"><a style="padding-right:15px;" class="nav-link dropdown-toggle" href="#">{{Test}}</a>
<ul class="dropdown-menu">
<?php
echo '<li><a class="dropdown-item">Recent Tests </a></li>';
for($i=0;$i<$testcount;$i++){
//calling test_name() method and storing those values in a string
$test1=recent_test1($test_sql);
$test_name1=$test1[$i];
//project name
$project=recentTest_project($test_sql);
$project_name=$project[$i];
//platform file name
$platform=platform_file();
$platform_file=$platform[$i];
//project id
$project_id=pro_id($test_sql);
$pro_id=$project_id[$i];
//calling file_name() method and storing those values in a string
//$file=load_file_name();
//$file_name=$file[$i];
//echo' <a type="submit" name="testname" href='.$file_name.'>'.$test_name.'</a><br>';
if(strlen($test_name1)>=25){
$testName=substr($test_name1,0,25);
$testName=$testName.'..';
}
else{
$testName=$test_name1;
}
echo'<li><a class="dropdown-item" href="http://localhost/performance/RunTest_09.php?test_name='.$test_name1.'&project_name='.$project_name.'" title="'.$test_name1.'">'.$testName.'</a></li>';
}//for loops ends
//show all projects ,delete project and create project
echo'<li ng-app = "eighthApp" ng-controller = "eigthController"><a ng-repeat="x in sdc_test" class="dropdown-item" href="{{x.href}}'.$user_id.'">{{x.name}}</a></li>';
?>
</ul>
</li><!--test dropdown ends-->
<li ng-app = "fifthApp" ng-controller = "fifthController" class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">{{Report}}</a>
<ul class="dropdown-menu">
<li></li>
</ul>
</li><!--report list ends-->
</ul>
<ul class="nav navbar-nav">
<li ng-app = "sixthApp" ng-controller = "sixthController" class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">{{default}}</a>
<ul class="dropdown-menu">
<li><a ng-repeat="x in details" class="dropdown-item" href="{{x.href}}">{{x.name}}</a></li>
</ul>
</li>
</ul>
</div><!--collapse navbar-collapse-->
</div>
</nav>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery Bootstrap 4 Addon -->
<script type="text/javascript" src="../addons/bootstrap-4/jquery.smartmenus.bootstrap-4.js"></script>
<?php
session_destroy();
?>
</body>
</html>
Related
I want to open and have access to my 2 different databases from mysql and display it on 2 different charts respectively. I have put a bootstrap carousel that would ease navigation between 2 charts. Below is my code.
$connect = mysqli_connect("localhost", "root", "", "ws_monitoring");
$query = "SELECT mb_weight, mb_weight_dt, mb_refno, mb_date, mb_weight FROM conveyor_in_entry";
$result = mysqli_query($connect, $query);
$chart_data = '';
while($row = mysqli_fetch_array($result))
{
$chart_data .= "{ mb_weight_dt:'".$row["mb_weight_dt"]."', mb_refno:".$row["mb_refno"].", mb_date:".$row["mb_date"].", mb_weight:".$row["mb_weight"]."}, ";
}
$chart_data = substr($chart_data, 0, -2);
$newconnection = mysqli_connect("localhost", "root", "", "cut" )
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>chart with PHP & Mysql | lisenme.com </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<h2>Carousel Test</h2>
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="2000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div id="chart" class="chart" style="width:100%; height:300px;"></div>
</div>
<div class="item">
<div id="chart1" class="chart" style="width:100%; height:300px;"></div>
</div>
<div class="item">
<div id="chart2" class="chart" style="width:100%; height:300 px;"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel" href="#carousel" role="button" data-slide="prev">
<span class="sr-only"></span>
</a>
<a class="right carousel" href="#carousel" role="button" data-slide="next">
<span class="sr-only "></span>
</a>
</div>
</body>
</html>
<script>
Morris.Line({
element : 'chart',
data:[<?php echo $chart_data; ?>],
xkey:'mb_weight_dt',
ykeys:['mb_refno', 'mb_date', 'mb_weight'],
labels:['mb_refno', 'mb_date', 'mb_weight'],
hideHover:'auto',
stacked:true
});
</script>
Chart2 will be coming from a new from a different database with different attributes, so far when I create another query for mysql the same database from the first one appears for the 2nd chart.
I am using AngularJS in header.php and create_test.php files. It is working fine when I execute the files separately.
Then I am calling this header.php create_test.php file.
After calling create_test.php file AngularJS codes are not working.
Why is it so? Can anyone assist me to solve this?
In header.php file,
<?php
//calling methods of methods.php file
include'C:/wamp64/www/performance/header/src/demo/methods.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" type="image/png" href="http://localhost/performance/login/images/merahkee.png" />
<title> Merahkee Technology Soluctions</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- SmartMenus jQuery Bootstrap 4 Addon CSS -->
<link href="../addons/bootstrap-4/jquery.smartmenus.bootstrap-4.css" rel="stylesheet">
<!--Angularjs-->
<script data-require="angular.js#*" data-semver="1.6.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<!--This version is for title attribute-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
<!--Angularjs starts-->
<script src="http://localhost/performance/header/src/addons/bootstrap-4/header.js"></script>
</head>
<body style="padding-top:80px;">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<div ng-app="rootApp" class="container">
<a ng-app = "firstApp" ng-controller = "firstController" class="navbar-brand" href="#">{{ pageTitle }}</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<!-- Left nav -->
<ul class="nav navbar-nav mr-auto">
<!--Display project dropdown-->
<li ng-app = "thirdApp" ng-controller = "thirdController" class="nav-item dropdown" style="padding-right:15px;" ><a class="nav-link dropdown-toggle" href="#">{{Project}}</a>
<ul class="dropdown-menu">
<?php
echo '<li><a class="dropdown-item">Recent Projects </a></li>';
for($i=0;$i<$projectcount;$i++){
//calling test_name() method and storing those values in a string
$test=project_name($count_uid,$user_id,$pro_sql);
$project_name=$test[$i];
if(strlen($project_name)>=25){
$projectName=substr($project_name,0,25);
$projectName=$projectName.'..';
}
else{
$projectName=$project_name;
}
echo'<li><a class="dropdown-item" href="http://localhost/performance/project/ShowTest_of_project.php?project_name='.$project_name.'&user_id='.$user_id.'" title="'.$project_name.'">'.$projectName.'</a></li>';
}//for loops ends
//show all projects
echo'<li ng-app = "seventhApp" ng-controller = "seventhController"><a ng-repeat="x in sdc_pro" class="dropdown-item" href="{{x.href}}'.$user_id.'">{{x.name}}</a></li>';
?>
</ul><!--dropdown-menu closes-->
</li><!--project dropdown ends-->
<li ng-app = "fourApp" ng-controller = "fourController" class="nav-item dropdown"><a style="padding-right:15px;" class="nav-link dropdown-toggle" href="#">{{Test}}</a>
<ul class="dropdown-menu">
<?php
echo '<li><a class="dropdown-item">Recent Tests </a></li>';
for($i=0;$i<$testcount;$i++){
//calling test_name() method and storing those values in a string
$test1=recent_test1($test_sql);
$test_name1=$test1[$i];
//project name
$project=recentTest_project($test_sql);
$project_name=$project[$i];
//platform file name
$platform=platform_file();
$platform_file=$platform[$i];
//project id
$project_id=pro_id($test_sql);
$pro_id=$project_id[$i];
//calling file_name() method and storing those values in a string
//$file=load_file_name();
//$file_name=$file[$i];
//echo' <a type="submit" name="testname" href='.$file_name.'>'.$test_name.'</a><br>';
if(strlen($test_name1)>=25){
$testName=substr($test_name1,0,25);
$testName=$testName.'..';
}
else{
$testName=$test_name1;
}
echo'<li><a class="dropdown-item" href="http://localhost/performance/RunTest_09.php?test_name='.$test_name1.'&project_name='.$project_name.'" title="'.$test_name1.'">'.$testName.'</a></li>';
}//for loops ends
//show all projects ,delete project and create project
echo'<li ng-app = "eighthApp" ng-controller = "eigthController"><a ng-repeat="x in sdc_test" class="dropdown-item" href="{{x.href}}'.$user_id.'">{{x.name}}</a></li>';
?>
</ul>
</li><!--test dropdown ends-->
<li ng-app = "fifthApp" ng-controller = "fifthController" class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">{{Report}}</a>
<ul class="dropdown-menu">
<li></li>
</ul>
</li><!--report list ends-->
</ul>
<ul class="nav navbar-nav">
<li ng-app = "sixthApp" ng-controller = "sixthController" class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">{{default}}</a>
<ul class="dropdown-menu">
<li><a ng-repeat="x in details" class="dropdown-item" href="{{x.href}}">{{x.name}}</a></li>
</ul>
</li>
</ul>
</div><!--collapse navbar-collapse-->
</div>
</nav>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="http://localhost/performance/header/src/jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery Bootstrap 4 Addon -->
<script type="text/javascript" src="http://localhost/performance/header/src/addons/bootstrap-4/jquery.smartmenus.bootstrap-4.js"></script>
</body>
</html>
In cteate_test file,
<?php
include_once 'C:\xampp\htdocs\Performance\header\src\demo\header.php';
include_once 'C:\xampp\htdocs\Performance\project\methods\methods.php';
?>
<!DOCTYPE html>
<html>
<head>
<script>
function ConfirmDelete() {
return confirm("Are you sure you want to delete?");
}
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://localhost/performance/project/css/showAllProject.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!--Angularjs-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular.js"></script>
<script >
var app = angular.module("myApp", []);
app.controller("namesCtrl", function($scope) {
$scope.names = [
{name:'PROJECT'},
{name:' |DESCRIPTION'},
{name:' |CREATEDON'},
{name:' |LASTUPDATED'},
{name:' |'},
]
$scope.hrefs = [
{href:'http://localhost/performance/deleteProject_showAll_pro.php?project_name=',src:'http://localhost/performance/css/delete.png',title:'delete',alt:'delete',onclick:'return ConfirmDelete()'},
{href:'http://localhost/performance/editProject_form.php?project_name=',src:'http://localhost/performance/css/edit.ico',title:'edit',alt:'edit',onclick:''},
{href:'http://localhost/performance/copyProject_form.php?project_name=',src:'http://localhost/performance/css/copy_pro.png',title:'copy',alt:'edit',onclick:''},
]
});
</script>
</head>
<body style="font-size:12px;">
<div class="row">
<div class="container">
<div class="col-lg-10" id="col-lg-14" >
</div>
<div ng-app="myApp" ng-controller ="namesCtrl" class="row vertical-center-row" id="myApp">
<div class="col-lg-20" id="myApp-main">
<div class="row">
<div ng-repeat="x in names" class="col" id="col">
{{x.name}}
</div>
</div>
</div>
<div class="col-lg-12" id="project" >
<?php
for($i=0;$i<$procount;$i++){
//calling test_name() method and storing those values in a string
$project=project_name1($user_id);
$project_name=$project[$i];
//description
$desctipt=project_description1($user_id);
$description=$desctipt[$i];
// project creation date
$date=ProjectCreated_date($user_id);
$created_on=$date[$i];
//project edited on
$editDate=ProjectEdited_date($user_id);
$edited_on=$editDate[$i];
//for displaying the project
if(strlen($project_name)>=25){
$projectName=substr($project_name,0,25);
$projectName=$projectName.'..';
}
else{
$projectName=$project_name;
}
//for displaying the description of the project
if(strlen($description)>=25){
$description=substr($description,0,25);
$description=$description.'..';
}
else{
$description=$description;
}
//display project name, discription,created date and deleted date date
echo '<div class="row" id="row" ng-mouseover="changeImage=true" ng-mouseleave="changeImage=false" ng-init="changeImage=false">';
//projectName
echo'<div class="col">';
echo $projectName;
echo '</div>';
//description
echo'<div class="col" >';
echo $description;
echo '</div>';
//created date
echo'<div class="col" >';
echo $created_on;
echo '</div>';
//last updated date
echo'<div class="col" >';
echo $edited_on;
echo '</div>';
//
echo'<div class="col col-sm-1" ng-repeat="x in hrefs">';
echo '
<img src="{{x.src}}" title="{{x.title}}" alt="{{x.alt}}" style="width:15px;height:15px;border:0;" Onclick=""/>';
//<img ng-show="changeImage" src="http://localhost/performance/css/edit.ico" title="edit" alt="running test" style="width:15px;height:15px;border:0;margin-left:0.5cm">
//<img ng-show="changeImage" src="http://localhost/performance/css/copy_pro.png" title="copy" alt="running test" style="width:15px;height:15px;border:0;margin-left:0.5cm"/>';
echo '</div>';
echo'</div>';//display project name, discription,created date and deleted date date div ends
echo '<hr id="hr">';}//for loop ends
?>
</div> <!--project div ends-->
<div class="col-lg-12" id="createProject" >
<center><img src="http://localhost/performance/css/create.png" title="Create Test" alt="Create New Project" id="createProjectIMG"></center>
</div>
</div><!--myApp div ends-->
</div><!--container-fluid div ends-->
</div><!--row div ends-->
</body>
</html>
I have taken a look at other related questions but unable to understand or change this to get it working. Basically i am trying to save a pdf of presented flot data contained in tab0 . for some reason the pdf output cuts half the page off, even though I am using the largest size a0 and it is also missing the legend of charts, here is the code.
(function ($) {
$(function() {
// $.plot($("#placeholder0"), [ { label: 'Test', data: [[0, 0], [1, 1]] } ], { yaxis: { max: 1 } });
$("#generate0").on("click", function(e) {
var pdf = new jsPDF('p', 'pt', 'a0');
// var pdf = new jsPDF();
var canvas = pdf.canvas;
canvas.height = 6000;
html2canvas($('#content').get(0), {
canvas:canvas,
allowTaint: true,
onrendered: function(canvas) {
// document.body.appendChild(canvas);
console.log("rendered");
/* var iframe = document.createElement('iframe');
iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:10000px; width:500px');
document.body.appendChild(iframe);
iframe.src = pdf.output('datauristring'); */
pdf.save("Current Data2.pdf")
//var div = document.createElement('pre');
//div.innerText=pdf.output();
//document.body.appendChild(div);
}
});
});
});
}(jQuery))
all i want to do is allow the saved pdf to capture all of the data even if it means spanning over 3 or 10 pdf pages. Any help greatly recieved... oh here is the html/php ...
<!DOCTYPE html>
<html lang="en">
<head>
<!-- start: Meta -->
<meta charset="utf-8">
<title>Vibe Music Therapy Dashboard</title>
<meta name="description" content="Vibe Music Therapy Daashboard - OpenFace Service user 1 Data">
<meta name="author" content="Greg Hanford">
<meta name="keyword" content="Vibe, MusicTherapy, Dashboard, Metrics, disability, support, research, kpi">
<!-- end: Meta -->
<!-- start: Mobile Specific -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- end: Mobile Specific -->
<!-- start: CSS -->
<!-- <link id="bootstrap-style" href="css/bootstrap.min.css" rel="stylesheet"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link id="base-style" href="css/style.css" rel="stylesheet">
<link id="base-style-responsive" href="css/style-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="css/graphing.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/91366f1215.js"></script>
<!-- end: CSS -->
<!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link id="ie-style" href="css/ie.css" rel="stylesheet">
<![endif]-->
<!--[if IE 9]>
<link id="ie9style" href="css/ie9.css" rel="stylesheet">
<![endif]-->
<!-- start: Favicon -->
<link rel="shortcut icon" href="img/favicon.ico">
<!-- end: Favicon -->
<!-- Piwik -->
<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ?
"https://sweb5.secure-secure.co.uk/musictherapy.co.uk/piwik/" :
"http://musictherapy.co.uk/piwik/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch (err) {}
</script><noscript><p><img src="http://musictherapy.co.uk/piwik/piwik.php?idsite=1" style="border:0" alt="" /></p></noscript>
<!-- End Piwik Tracking Code -->
</head>
<body>
<!-- start: Header -->
<div class="navbar">
<div class="navbar-inner"><img class="main-logo" style="width: 150px; height: 74px;" alt="vibe dashboard logo" src="img/Vibe-dashboard-logo.png">
<a class="brand" href="index.html"><span>Music Therapy Dashboard</span></a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse">
</a>
</div>
</div>
<!-- start: Header -->
<div class="container-fluid-full">
<div class="row-fluid">
<!-- start: Main Menu -->
<div id="sidebar-left" class="span2">
<div class="nav-collapse sidebar-nav">
<ul class="nav nav-tabs nav-stacked main-menu">
<li>
<a class="dropmenu" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> Davenham Metrics</span></a>
<ul>
<li><a class="submenu" href="overview-main1.html"><i class="icon-dashboard"></i><span class="hidden-tablet"> Overview</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser1.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Joyce</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser2.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Margaret</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser3.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Jenny</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser4.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Gillian</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser5.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Alf</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser6.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Jean</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser7.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Maureen</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser8.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Judith</span></a></li>
<li><a class="submenu" href="musictherapy-serviceuser9.html"><i class="icon-bar-chart"></i><span class="hidden-tablet"> Wendy</span></a></li>
</ul>
</li><li>
<a class="dropmenu" href="#"><i class="icon-folder-close-alt"></i><span class="hidden-tablet"> OpenFace Data</span></a>
<ul>
<?php
$data = "./data";
$dir = scandir($data);
$users = [];
// $i starts at 2 to skip the dir entries '.' and '..'
for ($i = 2, $size = count($dir); $i < $size; ++$i) {
$users[] = explode("-", $dir[$i])[0];
}
foreach (array_unique($users) as $user){
echo '<li> <a class="submenu2" href="graph.php?user=' . $user . '">',
'<i class="icon-bar-chart"></i><span class="hidden-tablet">' . $user . '</span></a></li>';
}
?>
</ul>
</li>
</ul>
</div>
</div>
<!-- end: Main Menu -->
<noscript>
<div class="alert alert-block span10">
<h4 class="alert-heading">Warning!</h4>
<p>You need to have JavaScript enabled to use this site.</p>
</div>
</noscript>
<!-- start: Content -->
<div id="content" class="span10">
<?php
$user = $_GET['user'];
$data_dir = "./data";
$dir_listing = scandir($data_dir);
$users = [];
// $i starts at 2 to skip the dir entries '.' and '..'
for ($i = 2, $size = count($dir_listing); $i < $size; ++$i) {
$split = explode("-", $dir_listing[$i]);
$users[$split[0]][] = $split[1];
}
$dates = array_unique($users[$user]);
$overview = array_search('Overview', $dates);
if($overview) {
unset($dates[$overview]);
array_unshift($dates,'Overview');
}
$dates = array_values($dates);
// print_r("DATES");
// print_r($dates);
?>
<div class="box-content">
<ul class="nav nav-pills" id="myTab">
<?php
echo '<li class="active">' . $dates[0] . '</li>';
for($i = 1, $size = count($dates); $i < $size; ++$i) {
echo '<li>' . $dates[$i] . ' </li>';
}
?>
</ul>
</div>
<div id="myTabContent" class="tab-content">
<?php
foreach ($dates as $id => $date) {
if ($id == 0) {
echo '<div class="tab-pane active" id="tab0">';
} else {
echo '<div class="tab-pane" id="tab' . $id . '">';
}
echo <<<END
<div class="row-fluid">
<button type="button" disabled class="select-chart btn btn-primary btn-lg" data-toggle="modal" data-target="#main-variable$id">
Loading chart data</button>
<button type="button" disabled class="select-features btn btn-primary btn-lg">
Loading features data</button>
<button type="button" id="generate$id">Generate pdf</button>
<div id="triple-chart-holder$id" class="container charts"></div>
<div id="single-chart-holder$id" class="container charts"></div>
<div id="features-chart-holder$id" class="container charts"></div>
<div id="features$id" class="f-chart", style="height:382px"></div>
<div id="features-translation$id" class="f-chart", style="height:282px"></div>
<div id="features-rotation$id" class="f-chart", style="height:282px"></div>
<div class="container charts">
<div id="radar$id" style="width:1000px; height:1000px"></div>
</div>
<div id="dial-chart-holder$id" class="container charts"></div>
<div id="placeholder$id" style="width:600px;height:300px"></div>
</div>
<!-- Modal -->
<div class="modal fade" id="comparison$id" tabindex="-1" role="dialog" aria-labelledby="choose comparisions modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Select datasets for comparison</h4>
</div>
<div class="modal-body">
<div class="row">
<div id="IMT$id" class="col-md-6 col-sm-6 col-xs-12">
IMT
</div>
<div id="OOT$id" class="col-md-6 col-sm-6 col-xs-12">
OOT
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="plot-chart btn btn-primary">Plot</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="main-variable$id" tabindex="-1" role="dialog" aria-labelledby="main variable modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Select independent dataset</h4>
</div>
<div class="modal-body">
<div class="row">
<div id="IMT-main$id" class="col-md-6 col-sm-6 col-xs-12">
IMT
</div>
<div id="OOT-main$id" class="col-md-6 col-sm-6 col-xs-12">
OOT
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="select-all-imt btn btn-secondary">Select all, IMT</button>
<button type="button" class="select-all-oot btn btn-secondary">Select all, OOT</button>
<button type="button" class="main-variable btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
</div>
END;
}
?>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>
<span style="text-align:left;float:left">© 2016 Vibe Music Therapy Dashboard</span>
</p>
</footer>
<!-- start: JavaScript-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-migrate-1.0.0.min.js"></script>
<script src="js/jquery-ui-1.10.0.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<script src="js/modernizr.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script src="js/bootstrap.min.js"></script> -->
<script src="js/jquery.cookie.js"></script>
<script src="js/excanvas.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>
<script src="js/jquery.cleditor.min.js"></script>
<script src="js/jquery.knob.js"></script>
<script src="js/jquery.sparkline.min.js"></script>
<script src="js/counter.js"></script>
<script src="js/retina.js"></script>
<script src="js/papaparse.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/jquery.viewport.js"></script>
<script src="js/jquery.flot.downsample.js"></script>
<script src="js/jquery.flot.animator.min.js"></script>
<script src="js/jquery.flot.selection.js"></script>
<script src="js/jquery.flot.JUMlib.js"></script>
<script src="js/jquery.flot.spider.js"></script>
<script src="js/jquery.flot.grow.js"></script>
<script type="text/javascript" src="js/async.min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/prepareplots.js"></script>
<script type="text/javascript" src="js/jspdf.min.js"></script>
<script type="text/javascript" src="js/image.js"></script>
<script type="text/javascript">
(function () {
// defensively json_encode(ing) to make sure nothing odd gets passed to the
// javascript.
var dirRoot = <?php echo json_encode($data_dir . "/" . $user . "-") ?>;
var dates = <?php echo json_encode($dates) ?>;
$(function () {
preparePlots(0, dirRoot + dates[0]);
});
$('.nav-pills a').on('click', function() {
var id = $(this).parent('li').index();
preparePlots(id, dirRoot + dates[id]);
});
})();
</script>
<!-- end: JavaScript-->
</body>
</html>
I'm facing the same issue, I found that it's not the problem of jsPDF page size, but the html2canvas.
If you indicate canvas option to html2canvas, then html2canvas won't probably capture the element $('#content').get(0) by its width, it will capture this element by the width of whole window, if the width of the canvas is less than the window's, the captured picture cutting off.
have a try :
canvas.width = document.body.clientWidth
It's not a final solution, but works for me.
I have a problem with tab navigation. I am not able to display the second and third tab.
Here's the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Dynamic Tabs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab('show');
});
});
</script>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Add Employee</li>
<li>Employee List</li>
<li>Employee Schedule</li>
</ul>
<div class="tab-content">
<div id="add" class="tab-pane active">
<?php include('addempform.php');?>
</div>
<div id="sch" class="tab-pane">
<?php include('addschform.php');?>
</div>
<div id="list" class="tab-pane">
<?php include('emplist.php');?>
</div>
</div>
</div>
</body>
</html>
I noticed the error is with the ?php include('xxx.php')?>. How can i fix this problem?
Thanks.
Hello to put some php code in tab panel you must insert it between Iframe
like :
<iframesrc="xxx.php"></iframe>
Ive just corrected your code, jQuery has to be loaded BEFORE bootstrap!
Greetings
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Dynamic Tabs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab('show');
});
});
</script>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Add Employee</li>
<li>Employee List</li>
<li>Employee Schedule</li>
</ul>
<div class="tab-content">
<div id="add" class="tab-pane active">
<?php include('addempform.php');?>
</div>
<div id="sch" class="tab-pane">
<?php include('addschform.php');?>
</div>
<div id="list" class="tab-pane">
<?php include('emplist.php');?>
</div>
</div>
</div>
</body>
</html>
jquery mobile list view to load json data is not working please help me
i am created php code to ganerate json file, i am trying load that json data to my jquery mobile list view but it is not loading
crome console error is: "Uncaught ReferenceError: json is not defined "
please solve this
my jquery mobile index.html code is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>View Source</title>
<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-2.0.2.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<link href="css/mystyles.css" rel="stylesheet" type="text/css"/>
<script src="js/myscript.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="cat">
<div data-role="header" data-position="fixed">
<h1>Categories</h1>
</div>
<div data-role="content">
<ul id="list" data-role="listview">
</ul>
</div>
<script type="text/javascript">
$(document).on('pagebeforeshow', '#cat', function(){
var url="http://localhost:8888/coupns/index.php";
$.getJSON(url,function( data ){
//loop through deals
$.each(json.posts,function(i,dat){
$("#list").append("<li><b>ID: </b>"+dat.id+
"<b> Name: </b>"+dat.shop+
"<b> Description: </b>"+dat.dec+
"<b> Limit: </b>"+dat.cat+
"<b> Rest ID </b>"+dat.expdate+
"</li>");
});
$("#list").listview('refresh');
});
});
</script>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a data-icon="grid" class="ui-btn-active ui-state-persist" href="#">Categories</a></li>
<li><a data-icon="grid" href="#bys">By Shop</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
<div data-role="page" id="bys">
<div data-role="header" data-position="fixed">
<h1>By Shop</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Page Two</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a data-icon="grid" href="#cat">Categories</a></li>
<li><a data-icon="grid" class="ui-btn-active ui-state-persist" href="#">By Shop</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
</body>
</html>
my php json encode code is
<?php
$con=mysqli_connect("localhost","root","root","coupns");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM coupns");
$posts = array();
if(mysqli_num_rows($result)) {
while($post = mysqli_fetch_assoc($result)) {
$posts[] = array('post'=>$post);
}
}
header('Content-type: application/json');
echo json_encode(array('posts'=>$posts));
?>
my json data out put is is
{"posts":[{"post":{"id":"1","shop":"ebay.in","cat":"online shopping all ","expdate":"2013-06-30","dec":"Credit Card\t 6% Off!\tUse Coupon Code:\r\nCHDFCEBAY1"}}]}
$.each(json.posts,function(i,dat){ this should be $.each(data.posts,function(i,dat){