so i'm trying to upload mp3 and mp4 files into my server but it doesn't seem to be uploading. the plugin uploads every other format but mp3 and mp4, it shows it uploading the mp3 and mp4 format but when i check the server the files are not there as they were not uploaded. I am using the drpozone.js plugin. It is a bit lengthy so i can't type it below so i will put the link below.
Here is my Upload page (index.html):
<!DOCTYPE html>
<!--[if IE 8 ]><html class="no-js oldie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="no-js oldie ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<!--- basic page needs
================================================== -->
<meta charset="utf-8">
<title>Samuel NewDay</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- mobile specific metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/vendor.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/dropzone.css" />
<!-- script
================================================== -->
<script src="js/modernizr.js"></script>
<script src="js/dropzone.js"></script>
<!-- favicons
================================================== -->
<link rel="shortcut icon" href="favicon.png" >
</head>
<body>
<!-- header
================================================== -->
<header id="main-header">
<div class="row">
<div class="logo">
Samuel Newday
</div>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">
<span class="menu-icon">Menu</span>
</a>
<a class="mobile-btn" href="#" title="Hide navigation">
<span class="menu-icon">Menu</span>
</a>
<ul id="nav" class="nav">
<li><a class="smoothscroll" href="#eps">Upload Albums/EPs.</a></li>
<li class="current"><a class="smoothscroll" href="#singles">Singles.</a></li>
<li><a class="smoothscroll" href="##photos">Photoshoots.</a></li>
<li><a class="smoothscroll" href="#events">Events.</a></li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
<ul class="header-social">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</ul>
</div>
</header> <!-- end header -->
<!-- homepage
================================================== -->
<section id="top">
<div class="row hero-content">
<div class="twelve columns hero-container">
<!-- hero-slider start-->
<div id="hero-slider" class="flexslider">
<ul class="slides">
<!-- slide -->
<li>
<div class="flex-caption">
<h1 class="">Admin Backend</h1>
<h3 class="" style="color: white">Here you can upload <a class="smoothscroll" href="#eps" title="portfolio" >Albums/EPs</a>, <a class="smoothscroll" href="#singles" title="portfolio" >Singles</a>, <a class="smoothscroll" href="#photos" title="portfolio" >Photoshoots</a> and <a class="smoothscroll" href="#events" title="portfolio" >Upcoming Events!</a><br />You can also edit some of the website's information here!</h3>
</div>
</li>
</ul>
</div> <!-- end hero-slider -->
</div> <!-- end twelve columns-->
</div> <!-- end row -->
<div id="more">
<a class="smoothscroll" href="#eps">Manage Site<i class="fa fa-angle-down"></i></a>
</div>
</section> <!-- end homepage hero -->
<!-- Album/EP Upload Section
================================================== -->
<section id="Section1">
<div class="row section-head">
<div class="twelve columns">
<h1>Upload Album/EP<span>.</span></h1>
<hr />
<p>Upload Album/EP according to the steps below.</p>
</div> <!-- end section-head -->
</div>
<div class="row mobile-no-padding">
<div class="process bgrid-half tab-bgrid-whole group">
<div class="bgrid">
<h3>Album/EP Artwok.</h3>
<p>
<div class="image_upload_div">
<form action="upload.php" class="dropzone">
</form>
</div>
</p>
</div>
<div class="bgrid">
<h3>Tracks.</h3>
<p>
<div class="image_upload_div">
<form action="upload.php" class="dropzone">
</form>
</div>
</p>
</div>
</div> <!-- end process -->
</div> <!-- end row -->
</section> <!-- end album/ep upload -->
<!-- Footer
================================================== -->
<footer>
<div class="row">
<div class="twelve columns content group">
<ul class="social-links">
<li><i class="fa fa-facebook-square"></i></li>
<li><i class="fa fa-twitter-square"></i></li>
<li><i class="fa fa-google-plus-square"></i></li>
<li><i class="fa fa-youtube-play"></i></li>
<li><i class="fa fa-vimeo-square"></i></li>
<li><i class="fa fa-flickr"></i></li>
<li><i class="fa fa-skype"></i></li>
</ul>
<hr />
</div>
<ul class="copyright">
<li>© Copyright 2017 Samuel NewDay.</li>
</ul>
<div id="go-top">
<a class="smoothscroll" title="Back to Top" href="#top">Back to Top<i class="fa fa-angle-up"></i></a>
</div>
</div> <!-- end row -->
</footer> <!-- end footer -->
<div id="preloader">
<div id="loader"></div>
</div>
<!-- Java Script
================================================== -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/jquery.placeholder.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Here is the upload.php file:
<?php
if(!empty($_FILES)){
//database configuration
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'uploads';
//connect with the database
$conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
if($mysqli->connect_errno){
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}
$targetDir = "uploads/";
$fileName = $_FILES['file']['name'];
$targetFile = $targetDir.$fileName;
if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile)){
//insert file information into db table
$conn->query("INSERT INTO files (file_name, uploaded) VALUES('".$fileName."','".date("Y-m-d H:i:s")."')");
}
}
?>
The JScript file for Dropzone can be found at the below link:
Dropzone Link
Please let me know how i can make it to upload mp3 and mp4 formats. Thank you.
If you're uploading files you have to set the enctype of your form to multipart/form-data otherwise file uploads don't happen (iirc the filename gets sent as the value of the file). Take a look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form for a good reference. The enctype attribute is talked about there.
Related
I have a login/register website. both admin and users are in the same table in mysql.
My users table is below:
There is certain pages where only admins can visit. I have made an access column and put the values like in the image. I have the following php code for checking whether its admin or not
<?
include("config.php");
session_start();
$user_email=$_SESSION['email'];
$check_user="select * from users WHERE user_email='$user_email'";
$run=mysqli_query($dbcon,$check_user);
while($row = $run->fetch_assoc())
{
$user_name=$row['user_name'];
}?>
<div class="sing"><?php
if ($_SESSION['access'] != 'admin') {
header("Location: login.php");
}
else if (isset($_SESSION['email']) && $_SESSION['email'] == true) {
echo "   You logged in as " . $_SESSION['email'] ;
echo "<div style='float: right;'><a href='logout.php'>logout</a> </div>";
}
else{}
?>
<!DOCTYPE html>
<html>
<head>
<title>Nurses Pulse </title>
<!--/tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript">
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!--//tags -->
<link rel="icon" type="image/png" href="images/imageedit_2_5125240109.gif"/>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/appointment_style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //for bootstrap working -->
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700" rel="stylesheet">
</head>
<body>
<!-- header -->
<div class="header" id="home">
<div class="content white">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="index.php">
<h1 style="color:#e50000"><span class="fa fa-heartbeat" aria-hidden="true"></span>Nurses Pulse </h1>
</a>
</div>
<!--/.navbar-header-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<nav>
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Exams <b class="caret"></b>
<ul class="dropdown-menu">
<li>PROMETRIC</li>
<li class="divider"></li>
<li>HAAD</li>
<li class="divider"></li>
<li>MOH</li>
<li class="divider"></li>
</ul>
</li>
<li>About Us</li>
</ul>
</nav>
</div>
<!--/.navbar-collapse-->
<!--/.navbar-->
</div>
</nav>
</div>
</div>
<!-- banner -->
<!--//banner -->
<!-- about -->
<!-- emergency -->
<!-- //emergency -->
<!-- services -->
<div class="services">
<div class="container">
<h3 class="heading-agileinfo" style="color:#e50000"><span>Sorry! You Have Timed Out!</span></h3>
<div class="services-top-grids">
<div> </div><br>
<br>
<?php
$session_value=(isset($_SESSION['correct_score']))?$_SESSION['correct_score']:'';
$session_value2=(isset($_SESSION['not_correct_score']))?$_SESSION['not_correct_score']:'';
echo "<div class='div-left'> Number Of Correct Answers = " . $session_value . "</div>";
echo "<div class='div-left'> <br>Number Of Wrong Answers = " . $session_value2 . "</div>";
?>
</div>
<div class="services-bottom-grids">
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- //services -->
<!-- Clients -->
<!-- //Clients -->
<!--/icons-->
<!--//icons-->
<!-- footer -->
<div class="footer_top_agile_w3ls">
<div class="container">
<div class="col-md-3 footer_grid">
<h3>About Us</h3>
<p>NursesPulse is for those who are preparing for the staff nurse entrance exam for abroad.
</p>
</div>
<div class="col-md-3 footer_grid">
<h3>Other Services</h3>
<ul class="footer_grid_list">
<li><i class="fa fa-angle-right" aria-hidden="true"></i>
<a href="exambooking.php" >Book Exam </a>
</li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i>
Course Materials
</li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i>
<a href="membership.php" >Membership </a>
</li>
<!-- <li><i class="fa fa-angle-right" aria-hidden="true"></i>
Nurses Pulse Demo.
</li>
<li><i class="fa fa-angle-right" aria-hidden="true"></i>
Nurses Pulse Demo.
</li> -->
</ul>
</div>
<div class="col-md-3 footer_grid">
<h3>Contact Info</h3>
<ul class="address">
<li><i class="fa fa-map-marker" aria-hidden="true"></i>Team Pulse, Kannur <span>Kerala.</span></li>
<li><i class="fa fa-envelope" aria-hidden="true"></i>nursespulse#gmail.com</li>
<li><i class="fa fa-phone" aria-hidden="true"></i>+91 95444 12311</li>
</ul>
</div>
<div class="col-md-3 footer_grid ">
<h3>Sign up for our Newsletter</h3>
<p>Get Started For Free</p>
<div class="footer_grid_right">
<form action="#" method="post">
<input type="email" name="Email" placeholder="Email Address..." required="">
<input type="submit" value="Submit">
</form>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="footer_wthree_agile">
<p>© 2018 Nurses Pulse. All rights reserved | Design by Bluroe Labs</p>
</div>
<!-- //footer -->
<!-- bootstrap-modal-pop-up -->
<div class="modal video-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
Nurses Pulse
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<img src="images/g7.jpg" alt=" " class="img-responsive" />
<p></i></p>
</div>
</div>
</div>
</div>
<!-- //bootstrap-modal-pop-up -->
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script>
$('ul.dropdown-menu li').hover(function () {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function () {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
</script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
The code is not working, it's redirecting me to login page even if its admin who logs in.
Can anyone help me?
Thanks in advance.
try this one
while($row = $run->fetch_assoc())
{
$user_name=$row['user_name'];
$_SESSION['access'] = $row['access']; //define here
}?>
<div class="sing"><?php
if ($_SESSION['access'] != 'admin') {
header("Location: login.php");
}
I have a simple login page which logins the user and then redirects them, however I've made a ajax code for the reset password page and after I enter the wrong details and the login page reloads the dropdown menu doesn't work.
I've tried to use the $('.dropdown-toggle').dropdown(); function however it's not working at all.
Login.php
<?php
require_once('./files/functions.php');
require_once('phpmailer/PHPMailerAutoload.php');
?>
<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">
<title>log in</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Vendors -->
<!-- Animate CSS -->
<link href="vendors/bower_components/animate.css/animate.min.css" rel="stylesheet">
<!-- Material Design Icons -->
<link href="vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css" rel="stylesheet">
<!-- Site CSS -->
<link href="css/app-1.min.css" rel="stylesheet">
</head>
<body>
<div class="login">
<!-- Login -->
<div class="login__block toggled" id="l-login">
<div class="login__block__header">
<i class="zmdi zmdi-account-circle"></i>
Hi there! Please Sign in
<div class="actions login__block__actions">
<div class="dropdown">
<i class="zmdi zmdi-more-vert"></i>
<ul class="dropdown-menu pull-right">
<li><a data-block="#l-register" href="">Create an account</a></li>
<li><a data-block="#l-forget-password" href="#">Forgot password?</a></li>
</ul>
</div>
</div>
</div>
<div class="login__block__body">
<form action="" method="POST">
<div class="form-group form-group--float form-group--centered form-group--centered">
<input type="text" class="form-control" name="email">
<label>Email Address</label>
<i class="form-group__bar"></i>
</div>
<div class="form-group form-group--float form-group--centered form-group--centered">
<input type="password" class="form-control" name="password">
<label>Password</label>
<i class="form-group__bar"></i>
</div>
<button type="submit" name="login" value="Sign In" class="btn btn--light btn--icon m-t-15"><i class="zmdi zmdi-long-arrow-right"></i></button>
</form>
<?php
// some php code for the login process...
?>
</div>
</div>
<!-- Forgot Password -->
<div class="login__block" id="l-forget-password">
<div class="login__block__header palette-Purple bg">
<i class="zmdi zmdi-account-circle"></i>
Forgot Password?
<div class="actions login__block__actions">
<div class="dropdown">
<i class="zmdi zmdi-more-vert"></i>
<ul class="dropdown-menu pull-right">
<li><a data-block="#l-login" href="#">Already have an account?</a></li>
<li><a data-block="#l-register" href="#">Create an account</a></li>
</ul>
</div>
</div>
</div>
<div class="login__block__body">
<form id="pw">
<p class="m-t-30">Please enter the e-mail address used to register. We will send your new password to that address.</p>
<div class="form-group form-group--float form-group--centered">
<input type="text" class="form-control" name="email" id="emailfield">
<label>Email Address</label>
<i class="form-group__bar"></i>
</div>
<div id="result"></div>
<button class="btn btn--light btn--icon m-t-15" value="submit" type="submit"><i class="zmdi zmdi-check"></i></button>
</div>
</form>
<script type = "text/javascript">
$("form#pw").on("submit", function(e){
e.preventDefault();
var emailfield = $("#emailfield").val();
var email ='email='+ emailfield;
$.ajax({
url: "login.php",
method: "POST",
data: email,
success: function (result) {
alert("result: " + result);
console.log(result);
$("#result").html(result);
$('.dropdown-toggle').dropdown();
}
});
});
</script>
<?php
// php code for the reset password....
?>
</div>
</div>
<!-- Older IE Warning -->
<!--[if lt IE 9]>
<div class="ie-warning">
<h1>Warning!!</h1>
<p>You are using an outdated version of Internet Explorer, please upgrade <br/>to any of the following web browsers to access this website.</p>
<div class="ie-warning__container">
<ul class="ie-warning__download">
<li>
<a href="http://www.google.com/chrome/">
<img src="img/browsers/chrome.png" alt="">
<div>Chrome</div>
</a>
</li>
<li>
<a href="https://www.mozilla.org/en-US/firefox/new/">
<img src="img/browsers/firefox.png" alt="">
<div>Firefox</div>
</a>
</li>
<li>
<a href="http://www.opera.com">
<img src="img/browsers/opera.png" alt="">
<div>Opera</div>
</a>
</li>
<li>
<a href="https://www.apple.com/safari/">
<img src="img/browsers/safari.png" alt="">
<div>Safari</div>
</a>
</li>
<li>
<a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">
<img src="img/browsers/ie.png" alt="">
<div>IE (New)</div>
</a>
</li>
</ul>
</div>
<p>Sorry for the inconvenience!</p>
</div>
<![endif]-->
<!-- Javascript Libraries -->
<!-- jQuery -->
<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Placeholder for IE9 -->
<!--[if IE 9 ]>
<script src="vendors/bower_components/jquery-placeholder/jquery.placeholder.min.js"></script>
<![endif]-->
<!-- Site Functions & Actions -->
<script src="js/app.min.js"></script>
</body>
</html>
You are including jQuery twice, once from a CDN and once from the local filesystem. Remove the CDN one at the top.
Your inline <script> block appears before your other Javascript resources are included. Try placing it after all other JS files, or even better in your app.min.js where it probably belongs.
It is hard to see the exact problem bcs so much of your code is your own custom stuff we can't see (and likely has nothing to do with this problem). In future, please try creating a minimal, verifiable example of your problem.
Hello I am working in MEAN Stack And I want show the local-storage value into the
Header of theme.I am using the Metronic theme.
Actually Local Storage data is accessible in view file.everything working fine But
I want to view LOcalStorage data in header that is not showing.
I am using like this.
{{adminData.email}}
It is not showing email of admin in header.
But when I am using same {{adminData.email}} in content file that is
showing mail of admin.I don't know what is the issue.
here is the index.ejs file.
<!DOCTYPE html>
<style type="text/css">
.page-spinner-bar {
display: none;
}</style>
<html lang="en" ng-app="myApp">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<title>Ditro Infotech App</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/admin/pages/css/login.css" rel="stylesheet" type="text/css"/>
<link href="../../css/style.css" rel="stylesheet" type="text/css"/>
<!-- BEGIN DYMANICLY LOADED CSS FILES(all plugin and page related styles must be loaded between GLOBAL and THEME css files ) -->
<link id="ng_load_plugins_before"/>
<!-- END DYMANICLY LOADED CSS FILES -->
<!-- BEGIN THEME STYLES -->
<!-- DOC: To use 'rounded corners' style just load 'components-rounded.css' stylesheet instead of 'components.css' in the below style tag -->
<link href="../../assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css"/>
<link href="../../assets/global/css/plugins.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/admin/layout2/css/layout.css" rel="stylesheet" type="text/css"/>
<link href="../../assets/admin/layout2/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="../../assets/admin/layout2/css/custom.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico"/>
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE JQUERY PLUGINS -->
<!--[if lt IE 9]>
<script src="../../assets/global/plugins/respond.min.js"></script>
<script src="../../assets/global/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE JQUERY PLUGINS -->
<!-- BEGIN CORE ANGULARJS PLUGINS -->
<script src="../../assets/global/plugins/angularjs/angular.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/angular-sanitize.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/angular-touch.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/plugins/angular-ui-router.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/plugins/ocLazyLoad.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/angularjs/plugins/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.10/ngStorage.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-local-storage/0.2.7/angular-local-storage.min.js"></script>
<script nsrc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src="js/module/module.js"></script>
<script src="js/controller/controller.js"></script>
<!-- END CORE ANGULARJS PLUGINS -->
<!-- BEGIN APP LEVEL JQUERY SCRIPTS -->
<script src="../../assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="../../assets/admin/layout2/scripts/layout.js" type="text/javascript"></script>
<script src="../../assets/admin/layout2/scripts/demo.js" type="text/javascript"></script>
<!-- END APP LEVEL JQUERY SCRIPTS -->
<script type="text/javascript">
/* Init Metronic's core jquery plugins and layout scripts */
$(document).ready(function() {
Metronic.init(); // Run metronic theme
Metronic.setAssetsPath('../../assets/'); // Set the assets folder path
});
</script>
</head>
<body>
<!-- BEGIN PAGE SPINNER -->
<div ng-spinner-bar class="page-spinner-bar">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<!-- END PAGE SPINNER -->
<!-- BEGIN HEADER -->
<div data-ng-include="'js/view/header.html'" class="page-header navbar navbar-fixed-top">
</div>
<!-- END HEADER -->
<div class="clearfix">
</div>
<!-- BEGIN CONTAINER -->
<div class="container">
<div class="page-container">
<!-- BEGIN SIDEBAR -->
<div ng-include="'js/view/sidebar.html'" class="page-sidebar-wrapper">
</div>
<!-- END SIDEBAR -->
<div class="page-content-wrapper">
<div class="page-content">
<!-- BEGIN STYLE CUSTOMIZER(optional) -->
<div ng-view></div>
<!-- END STYLE CUSTOMIZER -->
<!-- BEGIN ACTUAL CONTENT -->
<div ui-view class="fade-in-up">
</div>
<!-- END ACTUAL CONTENT -->
</div>
</div>
</div>
<!-- BEGIN FOOTER -->
<div data-ng-include="'js/view/footer.html'" class="page-footer">
</div>
<!-- END FOOTER -->
</div>
<!-- END CONTAINER -->
</body>
<!-- END BODY -->
</html>
index.ejs file include header footer and sidebar file.
here is my header file.
<!-- BEGIN HEADER INNER -->
<div class="page-header-inner container">
<!-- BEGIN LOGO -->
<div class="page-logo">
<a href="#/dashboard.html">
<img src="../../../assets/admin/layout2/img/logo-default.png" alt="logo" class="logo-default"/>
</a>
<div class="menu-toggler sidebar-toggler">
<!-- DOC: Remove the above "hide" to enable the sidebar toggler button on header -->
</div>
</div>
<!-- END LOGO -->
<!-- BEGIN RESPONSIVE MENU TOGGLER -->
<a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
</a>
<!-- END RESPONSIVE MENU TOGGLER -->
<!-- BEGIN PAGE ACTIONS -->
<!-- DOC: Remove "hide" class to enable the page header actions -->
<div class="page-actions">
<!--<div class="btn-group hide">
<button type="button" class="btn btn-circle red-pink dropdown-toggle" data-toggle="dropdown">
<i class="icon-bar-chart"></i> <span class="hidden-sm hidden-xs">New </span> <i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
<i class="icon-user"></i> New User </a>
</li>
<li>
<a href="#">
<i class="icon-present"></i> New Event <span class="badge badge-success">4</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-basket"></i> New order </a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="icon-flag"></i> Pending Orders <span class="badge badge-danger">4</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-users"></i> Pending Users <span class="badge badge-warning">12</span>
</a>
</li>
</ul>
</div>-->
<!--<div class="btn-group">
<button type="button" class="btn btn-circle green-haze dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-plus"></i> <span class="hidden-sm hidden-xs">New </span> <i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
<i class="icon-docs"></i> New Post </a>
</li>
<li>
<a href="#">
<i class="icon-tag"></i> New Comment </a>
</li>
<li>
<a href="#">
<i class="icon-share"></i> Share </a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="icon-flag"></i> Comments <span class="badge badge-success">4</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-users"></i> Feedbacks <span class="badge badge-danger">2</span>
</a>
</li>
</ul>
</div>-->
</div>
<!-- END PAGE ACTIONS -->
<!-- BEGIN PAGE TOP -->
<div class="page-top">
<!-- BEGIN HEADER SEARCH BOX -->
<!-- DOC: Apply "search-form-expanded" right after the "search-form" class to have half expanded search box -->
<!--<form class="search-form search-form-expanded" action="#" method="GET">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search..." name="query">
<span class="input-group-btn">
<i class="icon-magnifier"></i>
</span>
</div>
</form>-->
<!-- END HEADER SEARCH BOX -->
<!-- BEGIN TOP NAVIGATION MENU -->
<div class="top-menu">
<ul class="nav navbar-nav pull-right">
<li class="dropdown dropdown-user">
<a href="javaScript:;" class="dropdown-toggle" dropdown-menu-hover data-toggle="dropdown" data-close-others="true">
<img alt="" class="img-circle" src="../../../assets/admin/layout2/img/avatar3_small.jpg"/>
<span class="username username-hide-on-mobile">
{{adminData.name}} q</span>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-default">
<li>
<a href="#/login">
<i class="icon-key"></i> Log Out </a>
</li>
</ul>
</li>
<!-- END USER LOGIN DROPDOWN -->
</ul>
</div>
<!-- END TOP NAVIGATION MENU -->
</div>
<!-- END PAGE TOP -->
</div>
<!-- END HEADER INNER -->
try to use service/factory. a little not angular way but works fine(ES6)
export function metadataService(httpFactory) {
'ngInject';
this.setMetaTags = function (title='CONSTART',description= 'CONSTART',foto){
var bImgUrl = httpFactory.baseImgUrl;
var photo = foto? bImgUrl+foto :'assets/ico/favicon-32x32.png';
document.querySelector('meta[itemprop=name]').content = title;
document.querySelector('meta[itemprop=description]').content = description;
document.querySelector('meta[itemprop=image]').content = photo;
};
}
and inside your controller/component/directive get your localStorage data and
metadataService(/localStorage.getItem(someItem)/)
I've been trying to make the DataTables plugin work but I can't manage it. Here is the entire html code of my page. The apache server shows no error about not finding the css or js files. Here is my entire html code and the relevant js code since I have not really a clue where the problem might be.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="images/favicon.ico">
<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap extra CSS -->
<link href="DataTables/datatables.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/tutorial.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<script src="assets/js/ie-emulation-modes-warning.js"></script>
</head>
<body>
<div class="navbar">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">ASDB</h3>
<nav>
<ul class="nav masthead-nav">
<li>Home</li>
<li>Background</li>
<li class="dropdown active">
Database access<span class="caret"></span>
<ul class="dropdown-menu">
<li>Input Form</li>
<li class="divider"></li>
<li class="active">Query the database</li>
<li class="divider"></li>
<li>Tutorial</li>
<li>References</li>
</ul>
</li>
<li>Login</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="wrapper">
<div id="group">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a data-toggle="collapse" href="#dq" data-parent="#group">
Database queries
</a>
</li>
<li>
<a data-toggle="collapse" href="#im" data-parent="#group">
IMs
</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<!-- <div class="row"> -->
<div class="accordion-group">
<div class="collapse in" id="dq">
<h1>Database queries</h1>
<p>Have fun!!</p>
</div>
<div class="collapse" id="im">
<h1>IMs</h1>
<table id="ind-table" class="display"><thead><tr><th>IMs</th><th>Number of studies</th></tr></thead><tbody>
<tr><td>First IM</td>
<td>100</td>
<td>
<div class="checkbox">
<label><input type="checkbox" value="first_im"></label>
</div>
</td>
</tr>
<tr><td>Second IM</td>
<td>12</td>
<td>
<div class="checkbox">
<label><input type="checkbox" value="second_im"></label>
</div>
</td>
</tr>
<tr><td>Third IM</td>
<td>153</td>
<td>
<div class="checkbox">
<label><input type="checkbox" value="third_im"></label>
</div>
</td>
</tr>
</tbody></table>
<h3><button class="btn btn-default"><b>Visualize</b></button></h3>
<ul>
<li>First IM: Wikipedia Link</li>
<li>Second IM: Wikipedia Link</li>
<li>Third IM: Wikipedia Link</li>
</ul>
</div>
</div>
Toggle Menu
<!-- </div> -->
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
</div>
<!-- /#wrapper -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
<script src="dist/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="DataTables/datatables.js"></script>
<script src="js/query.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
The code on query.js is
$(document).ready(function() {
$('#ind-table').dataTable( {
"order": [[ 2, "desc" ]]
} );
} );
After running this code my table is not getting any of the formatting that is supposed to come with DataTables. Am I missing something?
You need to put three <th></th> tags in the <thead> section. Then the problem will be solved
<thead>
<tr>
<th>IMs</th>
<th>Number of studies</th>
<th> </th>
</tr>
</thead>
I tried to load jquery-source script before jquery-bootstrap script by changing their order inside "head" element but it didn't work, also, I made sure to link bootstrap CSS file.
I took a look at bootstrap default navbar example and It seems that everything is right but still not working?
Finally, I'm using JSF-2.2 framework and I don't know if it has anything to do with this problem? Here's the full code
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
ng-app="indexApp">
<head jsf:id="head">
<meta charset="utf-8"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta name="description" content=""></meta>
<meta name="author" content=""></meta>
<title>website</title>
<!-- AngularJs-Module !-->
<script jsf:target="body" jsf:name="index/js/indexAppModule.js"></script>
<!--jQuery-->
<script jsf:target="body" jsf:name="lib/jquery/jquery-2.1.3.min.js"></script>
<!--Bootstrap Core JavaScript-->
<script jsf:target="body" jsf:name="lib/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<!-- Parallax !-->
<script jsf:target="body" jsf:name="lib/stellar/jquery.stellar.js"></script>
<!-- Parallax !-->
<script jsf:target="body" jsf:name="index/js/parallax.js"></script>
<!-- Bootstrap Core CSS -->
<link jsf:library="lib/bootstrap-3.3.2-dist/css" jsf:name="bootstrap.min.css"
href="lib/bootstrap-3.3.2-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet">
</link>
<!-- Custom CSS -->
<link jsf:library="index/css" jsf:name="landing-page.css"
href="index/css/landing-page.css" type="text/css" rel="stylesheet">
</link>
<!-- Custom Fonts -->
<link jsf:library="index/css/font-awesome/css" jsf:name="font-awesome.min.css"
href="index/css/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet">
</link>
<!-- form Style -->
<link jsf:library="index/form/css" jsf:name="formstyle.css"
href="index/form/css/formstyle.css" type="text/css" rel="stylesheet">
</link>
<!-- fonts !-->
<link href="http://fonts.googleapis.com/css? family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"></link>
<!--Index Style -->
<link jsf:library="index/css" jsf:name="index.css"
href="index/css/index.css" type="text/css" rel="stylesheet">
</link>
</head>
<body jsf:id="body">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav" id="navfluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
<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 topnav" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Features
</li>
<li>
Technologies
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="section" id="home" data-stellar-background-ratio="0.5">
<div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="intro">
<h1>Website</h1>
<h3>website</h3>
<hr class="intro-divider"></hr>
<form>
<input name="name" placeholder="Username" class="name" required="true"></input>
<input type="password" name="name" placeholder="Password" class="name" required="true"></input>
<input name="submit" class="btn-login" type="submit" value="LogIn"></input>
<input name="submit" class="btn-login" type="submit" value="SignUp"></input>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="features" data-stellar-background-ratio="0.5">
</div>
<div class="section" id="technologies" data-stellar-background- ratio="0.5">
</div>
<div class="section" id="contact" data-stellar-background-ratio="0.5">
</div>
</body>
Using "src" attribute instead of "library" and "name" jsf's attributes solved the problem.
I found the reason is that because I'm using (jsf:libray="" and jsf:name="") inside script tag.!
The resulted HTML file has an invalid URL of the javascript file which means no script is working.