have a problem and I hope somebody helps me.
Have website 3gtrans.sk in bootstrap. It works fine but mobile navigation doesn't work on 2 pages
https://www.3gtrans.sk/nase-trasy
https://www.3gtrans.sk/galeria
As you can see on that pages are some photos (prettyPhoto). Can anybody show me what is bad please? Thank you so much.
i.e. galeria.php
<?php include "xxx.php"; ?>
<!DOCTYPE html>
<html lang="sk">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Galéria | 3G Trans Slovakia" />
<meta name="author" content="RoyalWEB.sk" />
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css?<?php echo date('h:i:s'); ?>">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato%7CRaleway">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="assets/css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet"/>
<script src="assets/js/jquery.prettyPhoto.js" type="text/javascript"></script>
<title>Galéria | 3G Trans Slovakia</title>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
show_title: false,
social_tools: false
});
});
</script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<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>
</div>
<div class="collapse navbar-collapse mynavbar" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav ">
<li>o nás</li>
<li>naše trasy</li>
<li>referencie</li>
<li>objednať prepravu</li>
<li><a class="active" href="galeria">galéria</a></li>
<li>kontakt</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container wrapper">
<div class="row">
<div class="col-md-12">
<h1>Galéria</h1>
<p>
<img class="img-responsive" src="images/gallery/thumb_peugeot01.jpg" alt="Peugeot Travel" /> <a href="images/gallery/peugeot02.jpg" rel="prettyPhoto[pp_gal]"><img class="img-responsive" src="images/gallery/thumb_peugeot02.jpg" alt="Peugeot Travel" />
</p>
</div>
</div>
</div>
<footer>
<div class="container copyright">
<div class="row">
<div class="col-md-12">
Copyright © <?php echo date("Y"); ?> | 3G Trans Slovakia<br />Vytvorila firma RoyalWEB.sk
</div>
</div>
</div>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-101095120-1', 'auto');
ga('send', 'pageview');
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.9/cookieconsent.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.cookieconsent_options = {"message":"Táto stránka využíva súbory cookies, ktoré pomáhajú k jeho správnemu fungovaniu. Využívaním našich služieb s ich používaním súhlasíte.","dismiss":"Rozumiem","learnMore":"Viac informácií","link":"https://sk.wikipedia.org/wiki/HTTP_cookie","theme":"light-bottom"};
</script>
</body>
</html>
fixed with replacing prettyphoto for another plugin.
Related
I am using EJS to render HTML. But the same HTML thing gets loaded for one route and when tried with another route chrome shows the status of CSS files as cancelled and js files with status code 404. I am unable to get what is going wrong. It works for the '/' route but does not work for the '/admin/students' route. Please help. In the table, I am printing the data sent through route.
In '/' route I am just sending a text as a data and everything else is the same as giving the code below.
app.get('/',(req,res)=>{
res.render('layout',{data:"IT is working"});
});
app.get('/admin/students',(req,res)=>{
Student.find({},function(err,result){
if(err)
console.log(err);
else
res.render('student',{st:result});
})
})
<!DOCTYPE HTML>
<html lang="zxx" class="no-js">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Favicon -->
<link rel="shortcut icon" href="img/fav.png" />
<!-- Author Meta -->
<meta name="author" content="colorlib" />
<!-- Meta Description -->
<meta name="description" content="" />
<!-- Meta Keyword -->
<meta name="keywords" content="" />
<!-- meta character set -->
<meta charset="UTF-8" />
<!-- Site Title -->
<title>Blog Home</title>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:900|Roboto:400,400i,500,700"
rel="stylesheet" />
<!--
CSS
=============================================
-->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/themify-icons/0.1.2/css/themify-icons.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<!-- ================ Start Header Area ================= -->
<header class="default-header">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<a class="navbar-brand" href="index.html">
<img src="img/logo.png" alt="" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="lnr lnr-menu"></span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-items-center"
id="navbarSupportedContent">
<ul class="navbar-nav">
<li>Home</li>
<li>Admin</li>
<li>User</li>
</ul>
</div>
</div>
</nav>
</header>
<section class="banner-area" style="background: url('img/home.png')" >
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-lg-12 banner-right">
<h1 class="text-white">
Blog Home
</h1>
<p class="mx-auto text-white mt-20 mb-40">
In the history of modern astronomy, there is probably no one greater leap forward than the
building.
</p>
<div class="link-nav">
<span class="box">
Home
<i class="lnr lnr-arrow-right"></i>
Blog Home
</span>
</div>
</div>
</div>
</div>
</section>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Reg.No.</th>
<th scope="col">Name</th>
<th scope="col">Branch</th>
<th scope="col">Handle</th>
</tr>
</thead>
<body>
<% st.map(rec=>{ %>
<tr style="color:black">
<th scope="row"><%=rec._id%></th>
<td><%=rec.sname%></td>
<td><%=rec.branch%></td>
<td><form action="/students/<%=rec._id%>/edit}"></form></td>
</tr>
<% }) %>
</tbody>
</table>
<footer class="footer-area section-gap">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved |
This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Colorlib
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --></p>
</footer>
<!-- ================ End footer Area ================= -->
<script src="js/vendor/jquery-2.2.4.min.js"></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="js/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/parallax.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/hexagons.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You should use absolute paths of static files instead of relative ones. Example:
<script src="js/main.js"></script>
should be:
<script src="/js/main.js"></script>
Similarly, you should fix the paths for all static files (css, js, etc.) in your EJS files.
You can read more about absolute and relative paths here.
I need to add popover/tooltip functionality to my page and I can't get it to work. I don't get any console errors, the popup just does not show up. I've tried reordering my scripts and putting them every part of my code. I tried basically every form of the activation script I could find as you will see here. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="au theme template">
<meta name="author" content="Hau Nguyen">
<meta name="keywords" content="au theme template">
<!-- Title Page-->
<title>Company</title>
<!-- New Tab Favicon -->
<link rel="icon" href="images/favicon_tranparent.png">
<script src="/jquery-3.4.1.min.js" language="JavaScript" type="text/javascript"></script>
<!-- <script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script> -->
<script>
$(function(){
$("#generatedTable").load("<%= table %>");
});
</script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
<script>
$(function () {
$('#popover').popover({
container: 'body'
})
})
</script>
<script>
$(function () {
$('.popover').popover({
container: 'body'
})
$('.popover-dismiss').popover({
trigger: 'focus'
})
})
</script>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<script>
jQuery(document).ready(function () {
jQuery('[data-toggle="tooltip"]').tooltip();
});
</script>
<p id="noSpaceName" hidden><%= noSpaceName %><p>
<p id="CSV" hidden><%= CSV %><p>
<script>
function dynamic_file() {
var folder = document.getElementById("noSpaceName").innerHTML
var file = document.getElementById("CSV").innerHTML
console.log("data/" + folder + "/" + file)
return "data/" + folder + "/" + file;
}
function download_file(name) {
var dlink = document.createElement('a');
var currentTime = new Date();
dlink.download = document.getElementById("noSpaceName").innerHTML.concat("-" + currentTime.toDateString().split(' ').join('-'));
dlink.href = name;
dlink.onclick = function(e) {
// revokeObjectURL needs a delay to work properly
var that = this;
setTimeout(function() {
window.URL.revokeObjectURL(that.href);
}, 1500);
};
dlink.click();
dlink.remove();
}
</script>
<!-- Fontfaces CSS-->
<link href="/font-face.css" rel="stylesheet" media="all">
<link href="/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
<link href="/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all">
<link href="/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
<!-- Bootstrap CSS-->
<link href="/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all">
<!-- Vendor CSS-->
<link href="/animsition/animsition.min.css" rel="stylesheet" media="all">
<link href="/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all">
<link href="/wow/animate.css" rel="stylesheet" media="all">
<link href="/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all">
<link href="/slick/slick.css" rel="stylesheet" media="all">
<link href="/select2/select2.min.css" rel="stylesheet" media="all">
<link href="/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all">
<!-- Main CSS-->
<link href="/theme.css" rel="stylesheet" media="all">
<link href="/custom.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="#" />
<script src="/jquery-3.2.1.min.js"></script>
<script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script>
<script src="/bootstrap-4.1/bootstrap.min.js"></script>
</head>
<body class="animsition">
<div class="page-wrapper">
<!-- MENU SIDEBAR-->
<aside class="menu-sidebar d-none d-lg-block">
<div class="logo">
<a href="">
<img src="temp_logo.png" alt="Company Name" />
</a>
</div>
<div class="menu-sidebar__content js-scrollbar1">
<nav class="navbar-sidebar">
<ul class="list-unstyled navbar__list">
<li>
<a class="js-arrow" href="/">
<i class="fas fa-table"></i>Arrest Records</a>
</li>
<li>
<a href="/analytics">
<i class="fas fa-chart-bar"></i>Analytics
</a>
</li>
</ul>
</nav>
</div>
</aside>
<!-- END MENU SIDEBAR-->
<!-- PAGE CONTAINER-->
<div class="page-container">
<!-- HEADER DESKTOP-->
<header class="header-desktop">
<div class="section__content section__content--p30">
<div class="container-fluid">
<div class="header-wrap">
<div></div>
<div class="custom_title">
<h2><font color="#666666"><%= fullName %></font></h2>
</div>
<div class="flex-box">
<!-- <a id="csv" href="" download=""> -->
<a id="popover" data-trigger="hover" data-toggle="popover">Popover</a>
<button onclick='download_file(dynamic_file())' class="btn btn-download"><i class="fa fa-download"></i> Download</button>
<script> $('[data-toggle="tooltip"]').tooltip()</script>
<!-- </a> -->
<!-- Log Out User -->
<form class="form-header" action="/logout?_method=DELETE" method="POST">
<button type="submit" class="btn btn-lightish"><i class="zmdi zmdi-power"></i> Log Out</button>
</form>
</div>
</div>
</div>
</div>
</header>
<!-- END HEADER DESKTOP-->
<!-- MAIN CONTENT-->
<div class="main-content">
<div class="section__content section__content--p30">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="table-responsive table--no-card m-b-30">
<div id="generatedTable"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="copyright">
<p>Copyright © 2020 Company. All rights reserved.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Jquery JS-->
<!-- <script src="/jquery-3.2.1.min.js"></script> -->
<!-- Bootstrap JS-->
<!-- <script src="/bootstrap-4.1/popper.min.js"></script> -->
<script src="/bootstrap-4.1/bootstrap.min.js"></script>
<script src="/bootstrap-4.1/popper.min.js" language="JavaScript" type="text/javascript"></script>
<!-- Vendor JS -->
<script src="/slick/slick.min.js">
</script>
<script src="/wow/wow.min.js"></script>
<script src="/animsition/animsition.min.js"></script>
<script src="/bootstrap-progressbar/bootstrap-progressbar.min.js">
</script>
<script src="/counter-up/jquery.waypoints.min.js"></script>
<script src="/counter-up/jquery.counterup.min.js">
</script>
<script src="/circle-progress/circle-progress.min.js"></script>
<script src="/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="/chartjs/Chart.bundle.min.js"></script>
<script src="/select2/select2.min.js">
</script>
<!-- Main JS-->
<script src="/main.js"></script>
</body>
</html>
<!-- end document-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
I'm developing a site for the corporation i work at and this time i chose to develop it with Materialize CSS as the UI framework. It looks really nice and i like its functions, though i have one major problem.
A periodic error!
Which means, that when i load the site sometimes i get a js error. For example i have a dropdown named selectDatabase (That is the object i defined).
If i reload the page a couple of times, this does not happen! The dropdown is initialized as it should be. Do you have an idea of what could possibly be wrong here?
Project Details:
Framework: Asp.net Core 2.0 MVC
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320" />
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link type="text/css" rel="stylesheet" href="~/lib/materialize/materialize.css" media="screen,projection" />
<link rel="stylesheet" href="~/lib/corporationtheme/css/main.css" type="text/css" media="all" />
<link rel="stylesheet" href="~/lib/corporationtheme/css/style_guide.css" type="text/css" media="all" />
<link rel="stylesheet" href="~/lib/corporationtheme/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="~/css/font-awesome-animation.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="~/css/bundle.css" type="text/css" media="all" />
<title>AutoTest Validation</title>
</head>
<body>
<div class="visible-print print-logo"><i class="icon-logo"></i></div>
<div class="content-wrapper">
<div class="mega-menu">
<div class="container nav-top">
<div class="row">
<div class="col s12">
<a class="logo" href="/">
<i class="icon-logo"></i>
</a>
<span class="logo-text">
<i class="icon-logo-text"></i>
<i class="icon-logo-text-oneline"></i>
</span>
<a href="#" class="mobile-btn menu-btn">
<i class="icon-mobile-menu"></i>
</a>
<div class="logo-title">
<div class="userDropdownWrapper">
<a class="dropdown-trigger" id="userDropdown" href="#!" data-target="dropdown">
<img id="userpicture" src="~/images/profile.svg" class="avatar">
<span id="userfirstname"></span>
<svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
</a>
</div>
<ul id="dropdown" class="dropdown-content">
<li><a><i class="material-icons dropdown-icon">border_color</i>Edit Profile</a></li>
<li><a><i class="material-icons dropdown-icon">vpn_key</i>Sign Out</a></li>
<li class="divider"></li>
</ul>
<div id="databaseSelectInputField" class="input-field">
<select id="databaseSelect">
<option value="1" selected>AutoTest</option>
<option value="2">AutoTest2</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="main-nav">
<div class="container">
<div class="row">
<div class="col s12">
<ul>
<li>DashBoard</li>
</ul>
</div>
</div>
</div>
</div>
<div class="sub-nav">
<div class="container">
<div class="row">
<div class="col s12">
</div>
</div>
<div class="row">
<div class="col s12 sub-nav-items">
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="container maincontainer" id="followMe">
#RenderBody()
</div>
</div>
<div class="footer-links">
<ul>
<li>corporation.com</li>
<li>Portal</li>
</ul>
</div>
</div>
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/lib/corporationtheme/js/app/main.js';
document.body.appendChild(script);
</script>
<script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="~/lib/materialize/materialize.js"></script>
<script type="text/javascript" src="~/js/errorHandler/bundle.js"></script>
<script type="text/javascript" src="~/js/shared/layout/bundle.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
JS Code:
let selectDatabase = null;
let selectUser = null;
let dropdownUser = null;
let currentUser = {};
$(document).ready(function () {
selectDatabase = $('#databaseSelect');
selectUser = $('#userSelect');
dropdownUser = $("#userDropdown");
getUserProfile();
selectDatabase.formSelect();
selectUser.formSelect();
dropdownUser.dropdown();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
It is hard to answer this question without being able to test a few things, but I'll try anyway :)
It looks like sometimes Materialize js does not load properly, or (what I think is the most probable) it loads after you use your function.
So the solution is this
Make sure that you use your code after the Materialize js is loaded. You can do it on couple of ways. The easiest would be to add defer attribute to script tag in html which loads js in the order of tags in html.
Example
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js" defer></script>
<script src="your_js.js" defer></script>
Okay. So it looks like i did find the problem.
Main.Js was interfering with Materalize and caused the error. I found a more simple main.js for our theme. Now the errors are gone and the website works like a charm. Thank you for your help guys.
So I want to have a text field where a calendar pops up and a user can easily pick a date. However, I am getting Uncaught TypeError: $(...).datepicker is not a function error when I try to debug why the calendar is not popping out.
Below is my code, kindly advice. I have searched even on this forum but can not solve it.
<!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">
<title>date</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
</head>
<body id="app-layout" class="fuelux">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
<!-- Branding Image -->
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li>Sisimsha Booking Engine</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-5 col-xs-12">
<div class="form-group{{ $errors->has('date') ? ' has-error' : '' }}">
<label for="Event Date">Event Date</label>
<input name="date" type="text" class="form-control" id='datepicker' placeholder="Date"
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12">
Back
<input type="submit" class="btn btn-primary pull-right" value="Next">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker().datepicker( "option", "dateFormat", 'yy-mm-dd');
});
</script>
</body>
</html>
Kindly, would anyone let me know that which I am doing wrong?
Thank you.
You included three different copies of jQuery.js, including one after the jQuery-ui.js include so when you use $ you'll be getting the third instance with no jQuery-UI.
Your code works if you remove the second and third of those includes, as you can see if you expand and run this snippet:
<!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">
<title>date</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
</head>
<body id="app-layout" class="fuelux">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
<!-- Branding Image -->
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li>Sisimsha Booking Engine</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-5 col-xs-12">
<div class="form-group{{ $errors->has('date') ? ' has-error' : '' }}">
<label for="Event Date">Event Date</label>
<input name="date" type="text" class="form-control" id='datepicker' placeholder="Date"
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12">
Back
<input type="submit" class="btn btn-primary pull-right" value="Next">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker().datepicker( "option", "dateFormat", 'yy-mm-dd');
});
</script>
</body>
</html>
You're loading jQuery not one, but three times. jQuery UI is loaded after the second instance, but before the third, so it's attached to the second instance. However, since the third instance is loaded last, its $ variable, which does not have jQuery UI attached, shadows the others, so you can't use jQuery UI.
The solution is simple: just remove two of the jQuery versions, and your code should work fine!
(You also included Bootstrap twice; you need to be more careful about not including your scripts and stylesheets more than once, since they may interfere with each other in unexpected ways.)
Please use this running code.i hope it's help you.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
</script>
<input id="datetimepicker" type="text">
The HTML file is generated using Markdown.
I have included a JavaScript file in HTML. It is visible that it is loaded in the browser (tried on Mozilla firefox).
See the proof below.
I tested if JS is enabled or not from https://www.whatismybrowser.com/detect/is-javascript-enabled
But somehow, it is not being executed.
Below is my generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-16"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="generator" content="Bootply-JBake-Custom"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-16"/>
<title>Title</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/asciidoctor.css" rel="stylesheet">
<link href="/css/base.css" rel="stylesheet">
<link href="/css/prettify.css" rel="stylesheet">
<link href="/css/styles.css" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico">
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<div id="wrap">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
LOGO
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li>Projects</li>
<li>About</li>
<li>Categories</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="page-header" id="banner">
<div class="row">
<div class="col-lg-8 col-md-7 col-sm-6">
<h1>Projects</h1>
</div>
</div>
</div>
<!-- This script is loading but not executing -->
<script type="text /javascript" src="projects.js"></script>
<p>Here is the list of projects</p>
</div>
</div>
<div id="push"></div>
<div id="footer">
<div class="container">
</div>
</div>
</body>
</html>
projects.js
$(document).ready(function(){
console.log("ready")
alert("hi");
});
console.log("loaded")
<script type="text /javascript" src="projects.js"></script>
Remove the space in type="text /javascript with the result:
<script type="text/javascript" src="projects.js"></script>
This should allow the browser to parse the HTML correctly and load the script.
EDIT: Or remove the type attribute from the <script> tag entirely, as suggested by the comment below.