Uncaught ReferenceError: $ is not defined on Electron - javascript

I have developed this web-based application on a wamp server and it runs ok, and now I started creating a desktop application using electron from last week and I keep on getting this error. But I can login and it works fine, except for the errors I get. Guys, please help me out on this one, this is my first-week using electron.
Below are all the links and scripts loaded
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<!-- Morris chart -->
<link rel="stylesheet" href="bower_components/morris.js/morris.css">
<!-- jvectormap -->
<link rel="stylesheet" href="bower_components/jvectormap/jquery-jvectormap.css">
<!-- Date Picker -->
<link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
For footer
<!-- jQuery 3 -->
<!-- <script src="bower_components/jquery/dist/jquery.min.js"></script> -->
<script>window.$ = window.jQuery = require('./bower_components/jquery/dist/jquery.min.js');</script>
<!-- jQuery UI 1.11.4 -->
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="bower_components/raphael/raphael.min.js"></script>
<script src="bower_components/morris.js/morris.min.js"></script>
<!-- Sparkline -->
<!-- Select2 -->
<script src="bower_components/select2/dist/js/select2.full.min.js"></script>
<script src="bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="bower_components/jquery-knob/dist/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="bower_components/moment/min/moment.min.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- jQuery 3 -->
<!-- AdminLTE App -->
<!-- FLOT CHARTS -->
<script src="bower_components/Flot/jquery.flot.js"></script>
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
<script src="bower_components/Flot/jquery.flot.resize.js"></script>
<!-- Page script -->

Try including JQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Related

HTML links to js file but it still won't work

I am trying to use a js file in my html file but got stuck.
The html file links to my js file but the js still wont work.
my code (in the snippet it seems to be working but in my file it wont):
document.body.innerHTML = "<h1>Today's date is </h1>"
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<!-- jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- logo -->
<link href="/static/logo2.ico" rel="icon">
<!-- css file -->
<link href="/static/styles.css" rel="stylesheet">
<!-- hammer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<!-- touchswipe.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>
<!-- js file -->
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
<title>Reservify</title>
</head>
<body>
</body>
Your javascript is executed before the DOM document is loaded.
Run JavaScript after loading the DOM document.
Like this:
window.addEventListener('DOMContentLoaded', function(){
document.body.innerHTML = "<h1>Today's date is </h1>";
});
Or like this:
window.onload = function() {
document.body.innerHTML = "<h1>Today's date is </h1>";
}
Best Practice
The best practice is to implement your scripts at the end of the body tag.
The browser will load the visible page first and it is a better user experience.
Code Example
<head>
<title>Reservify</title>
</head>
<body>
<!-- js file -->
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
</body>
Also read
Why script tags should be placed at the end of body tag
You have to put the js call on the body, this because the DOM load first this element when is loading the page this make the load of the page faster
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
So you have to put the above line on the end of the body, and your code will be like this:
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<!-- jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- logo -->
<link href="/static/logo2.ico" rel="icon">
<!-- css file -->
<link href="/static/styles.css" rel="stylesheet">
<!-- YOU HAVE TO DELETED THE JS CALLS HERE -->
<title>Reservify</title>
</head>
<body>
<!-- Here is your code -->
<!-- In the end of the body you put your js calls -->
<!-- hammer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<!-- touchswipe.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>
<!-- js file -->
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
</body>
I hope I've helped you (;

Zurb Foundation 6 - Orbit don't work

I am using the Foundation Sites 6 Framework for one of my sites. I installed it via bower and included the css and js files in my html.
It all works fine but the orbit slider only shows the first two slides and then it stops. I don't get any errors in the console.
Here you can see the website: http://dev.epo-marketing.de/academy-studium-landingpage/
Header:
<!-- styles -->
<!-- build:css _assets/css/styles.min.css -->
<link rel="stylesheet" href="_assets/bower_components/foundation-sites/dist/css/foundation.css">
<link rel="stylesheet" href="_assets/fonts/kit-epo-academy-of-fine-art/css/embedded-woff.css">
<link rel="stylesheet" href="_assets/css/app.css">
<!-- endbuild -->
<!-- /styles -->
Footer:
<!-- scripts -->
<!-- build:js _assets/js/scripts.min.js -->
<script type="text/javascript" src="_assets/bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="_assets/bower_components/what-input/dist/what-input.js"></script>
<script type="text/javascript" src="_assets/bower_components/foundation-sites/dist/js/foundation.js"></script>
<script type="text/javascript" src="_assets/js/app.js"></script>
<!-- endbuild -->
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
<!-- /scripts -->
I solved it by myself. I had to include the motion-ui javascript and css files.

jquery magnificPopup Error

I have found this template and I want to use in my angular 1 application. I have include all directories to my project correctly. When I try to start my application, I have this error:
I have tried this https://stackoverflow.com/questions/24444807/cant-get-magnific-popup-to-work-two-javascript-errors but it did not work.
Can you please help to to solve this issue ?
Update
This is my headers:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicon-96x96.png">
<script src="//d3js.org/d3.v3.min.js"></script>
..................................
..................................
..................................
..................................
..................................
..................................
..................................
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<!-- run `gulp inject` to automatically populate bower styles dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<!-- css files will be automatically insert here -->
<!-- endinject -->
<!-- endbuild -->
<!-- here this load js files -->
<script src="../js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="../js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="../js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="../js/jquery.waypoints.min.js"></script>
<!-- Carousel -->
<script src="../js/owl.carousel.min.js"></script>
<!-- countTo -->
<script src="../js/jquery.countTo.js"></script>
<!-- Flexslider -->
<script src="../js/jquery.flexslider-min.js"></script>
<!-- Magnific Popup -->
<script src="../js/jquery.magnific-popup.min.js"></script>
<script src="../js/magnific-popup-options.js"></script>
<!-- Main -->
<script src="../js/main.js"></script>
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<!-- run `gulp inject` to automatically populate bower script dependencies -->
<!-- endbower -->
<!-- endbuild -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
<!-- inject:js -->
<!-- js files will be automatically insert here -->
<!-- endinject -->
<!-- inject:partials -->
<!-- angular templates will be automatically converted in js and inserted here -->
<!-- endinject -->
<!-- endbuild -->
when I click on error I get this:

"Broken #import" error with grunt build?

I am trying to build my first angular application. I am using yeoman and angular-generator. The app run fine with "grunt serve" but when I ran "grunt build" the process stops with the error -
Running "cssmin:generated" (cssmin) task
Warning: Broken #import declaration of "" Use --force to continue.
Aborted due to warnings.
I am not sure what is the cause of this error. I have looked everywhere but could not find a solution.
Here are the css links -
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/animate.css/animate.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Bungee|Carrois+Gothic+SC|Oswald" rel="stylesheet">
<base href="/">
<!-- endbuild -->
I found the error, I just had to change the position of the link tags.
It should be -
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/animate.css/animate.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Bungee|Carrois+Gothic+SC|Oswald" rel="stylesheet">
<base href="/">
Now grunt build runs fine. So only the main.css file has to be put between <!-- build:css(.tmp) styles/main.css --> and <!-- endbuild -->

Uncaught Error: Bootstrap's JavaScript requires jQuery

First of all, thanks for your time looking at my problem!
Seccond, I have seen other questions like mine (for example:
Uncaught Error: Bootstrap's JavaScript requires jQuery with requirejs), but they didn't awnser my question.
So, here is the <head> of my <html>
<!DOCTYPE html>
<!-- metadata -->
<meta charset="UTF-8">
<!-- responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- [/] responsive -->
<!-- [/] metadata -->
<!-- links -->
<!-- bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- [/] bootstrap -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<!-- [/] links -->
<!-- script -->
<!--<script src="js/action.js"></script>-->
<!-- jquery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- [/] jquery -->
<!-- bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- [/] bootstrap -->
<!-- [/] script -->
<title>standaard html</title>
</head>
<body>
<!-- hoofdnavigatie -->
<nav class="navbar navbar-default navbar-fixed-top bas_hoofdnav">
<!-- logo in menubalk -->
<a class="navbar-brand" href="#">
<img src="afb/logo/logo.png" class="bas_hoofdnav_logo" alt="Brand" >
</a>
<!-- [/] logo in menubalk -->
<ul class="nav nav-pills navbar-right bas_hoofdnav_knoppen">
<li role="presentation" class="active bas_hoofdnav_knp_actief">start</li>
<li role="presentation">over ons</li>
<li role="presentation">diensten</li>
<li role="presentation">winkel</li>
<li role="presentation">contact</li>
</ul>
</nav>
<!-- [/] hoofdnavigatie -->
</body>
as you can see I have included jquery and the bootstrap links. but even so... I get this error message:
Uncaught Error: Bootstrap's JavaScript requires jQuery
(anonymous function) # bootstrap.min.js:6
and here the error
Do I miss something here?
As I can see in your code you have added jquery Js after the Bootstrap js. You need to include jquery js before adding bootstrap js. Your problem will fix, because bootstrap requires Jquery file.
<!-- First include jquery js -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Then include bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
You need to put jQuery above the Bootstrap JS.
<!-- jquery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- [/] jquery -->
<!-- bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- [/] bootstrap -->
After sure you included jquery library and bootstrap using these commands?:
First, install jQuery using npm as follows:
npm install jquery --save
Second, install Bootstrap using npm as follows:
npm install --save bootstrap#3
My problem was in :
angular.json just change sorting for scripts files included under project .
"scripts": [
"node_modules/jquery/dist/jquery.js"
"node_modules/bootstrap/dist/js/bootstrap.js",
]
to be like this :
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.js",
"node_modules/jquery/dist/jquery.js"
]

Categories