How to safely load external sources in html - javascript

I am a beginner in Web Developing. I created a login webpage which loads external sources.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<title>
Login
</title>
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700" media="all" rel="stylesheet" type="text/css" />
<link href="stylesheets/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />
<link href="stylesheets/font-awesome.css" media="all" rel="stylesheet" type="text/css" />
<link href="stylesheets/se7en-font.css" media="all" rel="stylesheet" type="text/css" />
<link href="stylesheets/style.css" media="all" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="javascripts/bootstrap.min.js" type="text/javascript"></script>
<script src="javascripts/raphael.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.mousewheel.js" type="text/javascript"></script>
<script src="javascripts/jquery.vmap.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.vmap.sampledata.js" type="text/javascript"></script>
<script src="javascripts/jquery.vmap.world.js" type="text/javascript"></script>
<script src="javascripts/jquery.bootstrap.wizard.js" type="text/javascript"></script>
<script src="javascripts/fullcalendar.min.js" type="text/javascript"></script>
<script src="javascripts/gcal.js" type="text/javascript"></script>
<script src="javascripts/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="javascripts/datatable-editable.js" type="text/javascript"></script>
<script src="javascripts/jquery.easy-pie-chart.js" type="text/javascript"></script>
<script src="javascripts/excanvas.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.isotope.min.js" type="text/javascript"></script>
<script src="javascripts/masonry.min.js" type="text/javascript"></script>
<script src="javascripts/modernizr.custom.js" type="text/javascript"></script>
<script src="javascripts/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="javascripts/select2.js" type="text/javascript"></script>
<script src="javascripts/styleswitcher.js" type="text/javascript"></script>
<script src="javascripts/wysiwyg.js" type="text/javascript"></script>
<script src="javascripts/jquery.inputmask.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.validate.js" type="text/javascript"></script>
<script src="javascripts/bootstrap-fileupload.js" type="text/javascript"></script>
<script src="javascripts/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="javascripts/bootstrap-timepicker.js" type="text/javascript"></script>
<script src="javascripts/bootstrap-colorpicker.js" type="text/javascript"></script>
<script src="javascripts/bootstrap-switch.min.js" type="text/javascript"></script>
<script src="javascripts/daterange-picker.js" type="text/javascript"></script>
<script src="javascripts/date.js" type="text/javascript"></script>
<script src="javascripts/morris.min.js" type="text/javascript"></script>
<script src="javascripts/skycons.js" type="text/javascript"></script>
<script src="javascripts/jquery.sparkline.min.js" type="text/javascript"></script>
<script src="javascripts/fitvids.js" type="text/javascript"></script>
<script src="javascripts/main.js" type="text/javascript"></script>
<script src="javascripts/respond.js" type="text/javascript"></script>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
</head>
<body class="login3">
<!-- Login Screen -->
<div class="login-wrapper">
<div class="login-container">
<!-- <img width="230" height="45" src="images/img_wowlamp_login.png" /> -->
<img width="230" height="45" src="images/img_wowlamp_login.png" />
<form action="login.html" method="post">
<div class="form-group">
<input class="form-control" placeholder="User Name" type="text" name="user">
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" type="text" name="password">
</div>
</br>
<font size="2" color="#0000ff"><script>getParameterByName('test')</script></font>
<div class="form-group">
<input class="btn btn-lg btn-primary btn-block" style="margin-top:30px" type="submit" value="Log in">
</div>
</form>
<!-- <font size="2"><font color="#fffff">No account yet?&nbsp&nbsp</font><font color="#FF3838">Sign up here!</font></font> -->
</div> <!-- login-wrapper -->
</div> <!-- login-container -->
<!-- End Login Screen -->
</body>
</html>
As you can see the sources are http. If I load the web page this time. A shield icon will appear on the upper right corner of the browser asking if I need to load unsafe scripts
When I press load unsafe scripts, the web page will appear like this
I tried to change the http to https. But the the web page loaded is still like the one above.


There's nothing inherently unsafe with anything you've done. Your browser is just throwing up that warning as an alert for non computer-savvy people that a website might be trying to do something nefarious... "this page" referring to locahost.
That said, there are ubiquitous bugs with escaping HTML and such that makes it possible for people to inject their own scripts. You can read up on it and make sure to be a responsible web developer, or just use a framework which if it's worth its salt would handle this for you in the most sensible ways tried and tested by the community.
Until then, let me point you towards RequireJS. It's a JavaScript plugin that manages JavaScript files like modules.


You can try downloading them locally and load them, like what you have done for most of the scripts there.

Related

CSS Bootstrap 4 class with 'input-group-append' isn't correctly working. Last week the display of Styles are right

My web app with AngularJS 1.7.8, jQuery 3.3.1, Bootstrap 4.3.1 and some others CSS- and JS-libraries/frameworks worked without any problems last week.
But today, I see a wrong visualization of appending buttons.
Steps to reproduce:
Go to openskymap.org to see my demo app.
Open (click) the menu item "Calendar" to proceed out to the Calendar Page.
Here check the proper visualization of the Button with the ID 'dateRangePicker1GlyphButton1'.
See:
enter image description here
Issue:
The button isn't appended on the input field of daterangepicker. But last week the button was appended correctly. Also the glyphiconis is now white (last week black).
Desired behavior like this:
enter image description here
appended Button
black glyph icon
The code snippet:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<!-- define angular app -->
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml" xmlns:ng="http://angularjs.org" ng-app="sensorsApp">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" /> <!-- HTML5 HTTP-Header -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- HTML4 HTTP-Header -->
<meta http-equiv="content-type" content="text/css; charset=utf-8" />
<meta http-equiv="content-type" content="text/javascript; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- USED CSS: GENERAL (1/2) -->
<!-- > GENERAL: CUSTOM PROJECT STYLES -->
<link rel="stylesheet" type="text/css" href="styles/project.css">
<!-- USED CSS: BOOTSTRAP -->
<!-- > BOOTSTRAP FONT LIBS: -->
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha256-nAmazAk6vS34Xqo0BSrTb+abbtFlgsFK7NKSi6o7Y78= sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr sha512-3M00D/rn8n+2ZVXBO9Hib0GKNpkm8MSUU/e2VNthDyBYxKWG+BftNYYcuEjXlyrSO637tidzMBXfE7sQm0INUg==" crossorigin="anonymous">
<!-- > BOOTSTRAP 4: -->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY= sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T sha512-tDXPcamuZsWWd6OsKFyH6nAqh/MjZ/5Yk88T5o+aMfygqNFPan1pLyPFAndRzmOWHKT+jSDzWpJv8krj6x1LMA==" crossorigin="anonymous">
<!-- USED CSS: GENERAL (2/2) -->
<!-- > GENERAL: BOOTSTRAP DATE(TIME)PICKER -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" integrity="sha256-5Z/4A9O2iG86Ca27OwgMwLmRYt9bjLOoEpPXy7yhiSs= sha384-8wYGNo4TwC9xzqNRdt7OUN789eBPzNQlO/sxIKaJR1gkX0+Ok1kXxhHR4pZU+gP2 sha512-Dapa+NBx6nVgt1Q5L+vn8oXI+bcHD9qpWmWNlkqAIlzz6cpwb6IsEthpkmV455sUDs2FXAZKyNz4hY1Dl0xGyg==" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" integrity="sha256-7B9s/BwXySAt0TMN6/mo6NCBm8oCfFNqaeJlz/9FCpE= sha384-3J4adb6KqO9u+ZgVfdmUqKDG4qWyG2qxGdXYoCXh3YmBQURWveIDgFh22pw1E3a9 sha512-gjpWBCm7COvj1rB4CrNkBAV+Uoxivp/2LPKpZkKcnFS4dDGhQtxdNgn4b8hLltoEVHu7LktbSf8dH8Igm/vi6A==" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/datepickk#1.4.1/dist/datepickk.min.css" integrity="sha256-8pYhYq1SmTPr+/nu2genJ7ko5oPwyiY3TJN0UAAZGQw= sha384-M2Romq884NkvgBkdz3NdXBwgPBO8cCs0keFrHmCWoNQ+tJYBpktQErbvcD7gKXae sha512-zFB5O2YjVX9hdpLmz13ClhpHkX1MWNjuyfFlIiGUR9ziBrSvcpp4hx+qfpBZFsVHPHfMg1HFbC8E5uDf9Fd6HA==" crossorigin="anonymous">
<!-- > GENERAL: BOOTSTRAP CHARTS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/chart.js#2.8.0/dist/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E= sha384-q9MZ/PQCC1nIFQdrr9yNOFXeSaXjv/yPOJOdBd32aODh8+EM6udfo91a6mRbEDih sha512-/zs32ZEJh+/EO2N1b0PEdoA10JkdC3zJ8L5FTiQu82LR9S/rOQNfQN7U59U9BC12swNeRAz3HSzIL2vpp4fv3w==" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/css/mdb.min.css" integrity="sha256-VSBoWx3wZz4Z6YAMGq1toMWvJN3G1w7KH+b61PGwppA= sha384-WxBbLYERKrFMTQ9LAaSYPo5qW9PJSzV6pbbaX8PqD20S4yudCgwblvRmuhXU6iWD sha512-vltzTDeCDN3MBaISvgsAAv6vJfbJkhjTokn/UttmEVCo0UEOsm7yhgqWJ3n0d5Wz/Fl8ZZSdLyyn7YGGbGwNYg==" crossorigin="anonymous">
<!-- USED SCRIPTS: GENERAL (1/2) -->
<!-- > GENERAL: Needed polyfills for working Luxon with supporting IE 10 or 11 -->
<script type="text/javascript" src="https://polyfill.io/v3/polyfill.js?features=default,es5,es6,es7,String.prototype.repeat,Array.prototype.find,Array.prototype.findIndex,Math.trunc,Math.sign&flags=gated" crossorigin="anonymous" charset="UTF-8"></script>
<!-- > GENERAL: jQuery 3 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8= sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT sha512-+NqPlbbtM1QqiK8ZAo4Yrj2c4lNQoGv8P79DPtKzj++l5jnN39rHA/xsqn8zE9l0uSoxaCdrOgFs6yjyfbBxSg==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js" integrity="sha256-jDnOKIOq2KNsQZTcBTEnsp76FnfMEttF6AV2DF2fFNE= sha384-hKAOvu4SRkR5UhOl+rvozhqPNh0VgjTz0sydNTzye3vkV6VzpbLACSgthC2bhXeV sha512-CEiA+78TpP9KAIPzqBvxUv8hy41jyI3f2uHi7DGp/Y/Ka973qgSdybNegWFciqh6GrN2UePx2KkflnQUbUhNIA==" crossorigin="anonymous" charset="UTF-8"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<div class="container justify-content-md-center justify-content-center">
<form id="dateTimeRangeSelectionForm1" class="form-group" role="form">
<div class="form-group">
<div class="col-sm">
<div class="row">
<div class="row">
<label class="form-control-label">Selected date/time range:</label>
</div>
<div class="input-group date row">
<input type="daterange" id="dateRangePicker1" name="dateRangePicker1" class="form-control" ng-model="dateRangePicker1"></input>
<div class="input-group-append" data-target="#dateRangePicker1">
<button type="button" id="dateRangePicker1GlyphButton1" class="input-group-text form-control btn" role="button"><i class="fas fa-calendar"></i></button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- USED SCRIPTS: BOOTSTRAP -->
<!-- > BOOTSTRAP GENERAL: -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha256-ZvOgfh+ptkpoa2Y4HkRY28ir89u/+VRyDE7sB7hEEcI= sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1 sha512-5WvZa4N7Jq3TVNCp4rjcBMlc6pT3lZ7gVxjtI6IkKW+uItSa+rFgtFljvZnCxQGj8SUX5DHraKE6Mn/4smK1Cg==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- > BOOTSTRAP 4: -->
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s= sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM sha512-Ah5hWYPzDsVHf9i2EejFBFrG2ZAPmpu4ZJtW4MfSgpZacn+M9QHDt+Hd/wL1tEkk1UgbzqepJr6KnhZjFKB+0A==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- USED SCRIPTS: ANGULARJS1 -->
<!-- AngularJS 1: -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js" integrity="sha256-23hi0Ag650tclABdGCdMNSjxvikytyQ44vYGo9HyOrU= sha384-TBbVc3SDLcWU5RloNEsoiDVvRK9iYkBNMm1OsAcOIVEASb7zzMWB0aMobj6CzKUw sha512-28WMav3WUIziq1D5l+8y2BrzN+CJgEeIyLksiKOSHWofTgaZc3RMPzvleRhXbLwnzf/C7Xnb0W6pE8PlqeRSog==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-route.js" integrity="sha256-AL1+LnGW9wl5bbvR2aXuGAmYsPKLYHzFbeRyHvPUHw8= sha384-I+qxwVtb8G6V2DkR4JZQBtMe7WBcZkOhEoYoYcvePXVXyQGJDRmZ5vYNRoavfaJ6 sha512-lkwD93i2YxHwDdR41e/MhAl2nm68FsG3x6MdIkmcDaNu8gTgvwyxMxHEiP11fyD9+lpgnUSnPC//NwhAYPS58g==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-sanitize.js" integrity="sha256-fe1CNxJdqcp2+X9H3Sd0yqtxOv0cyK9DN52g+NhnBgQ= sha384-I3+wmR2cuftFax1/khkYCw2l/24RBOm7dRvcOCGUesC9HveXuL9Gt2QI82rmENt6 sha512-Qxi9FQdJbTxZaVDSVzShM6J67oXjN6MEZ8nn5Fl83fdd9dxsZqX6yDJspSjeKK6Q12FOx6DIQd8l/fe9h1r0ng==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.18.1/angular-translate.min.js" integrity="sha256-aOs2ICGLk6gC0UX7UDhvXn/gvsa2qx5bUipyQFKmoOs= sha384-A+zN6Osqnkp8ThR1gJEJ4/dVw2Zwfz0llOo7BnyciCz1isb6OENEo8xfHx1gTWLX sha512-U5WInQAQvpR1C+dLWjcpVygbeof6FylSTlLbUC6eQml4iiEKcNhtPi0GSLCNRIcycohEV5IjfU/HPNHx+lI+Dw==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- USED SCRIPTS: GENERAL (2/2) -->
<!-- > GENERAL: ANGULARJS CONTROLLER -->
<script type="text/javascript" src="dist/controller.js" charset="UTF-8"></script>
<!-- > GENERAL: MOMENT.JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js" integrity="sha256-AdQN98MVZs44Eq2yTwtoKufhnU+uZ7v2kXnD5vqzZVo= sha384-5wvDEKtdpg/AAUpUHtcjYKVs1qv2V/UFPCN2FNvgePyaKmpBjW+LrboDEuS5ssBe sha512-hlLgIh4nncb2yc4YPtWk5wOykcFxF0fBd5rHfJ6xsALI2khY3H8LbivswJE5Fpz7hws7CJCqOzdyjWHiKJYl+A==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data.min.js" integrity="sha256-15jnh2lee6Li94j6XCbw8PRzNZe29O/W9i97yXVyRmA= sha384-bnidgWGLxxEZXPx1eX9mXLAvpkXkRL3iQbkgEksVnj5tlsiymxadIxiM7q5a88Ji sha512-27vEz6bCFnYQ6tNjguaA5DK5TOGme/fdDxbEtuZxydpx4JLDaoO5ujAYO658OCrzcpELwhhaPI3fX6D71YV1qQ==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon#1.12.0/build/global/luxon.min.js" integrity="sha256-o1YsUhC0RuYMR+8b0zu9vjUuJa+pnS/8rB87wcyImTM= sha384-5Wo6YmI/Cgvh/Y576jEIIhWu6IvSt5wovJxutq18DkJwbHgVBrv1PIIpUFBTxI5D sha512-9j0Zy2i7ac00T3D+W6J3bHXp5S4ak5fF84Fyejc0S5D579pdNtEvBRc3DPxd0Amv31c5UcKz9EKgZXNpPDncqw==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">luxon.DateTime.local();</script>
<!-- > GENERAL: BOOTSTRAP DATE(TIME)PICKER -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js" integrity="sha256-jgMYw0Xf+iO0EYC4pnX8tS4vmDqyjtJ9dwfSMMjSZuY= sha384-hzexvprs0k2Q/IHSJOfegsjdg6kTcTTVxQdgHiB4+I/915hcvse9v42LLVVM5K4e sha512-9LUemrpP5JutDNVlv4gUnNWwZXm2+vdv5hVyBs5Jv9ps7L8rfM7s3XvZpWQZ8J24NtoFObTsTyVMHb1yt3daHQ==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js" integrity="sha256-dsMvvkha4U8Hflt7QUPXZAKLwT/BObq7M5j5AZYnmDs= sha384-2Tnqs3x0ucZkxYqJ3UX1R/fkSRkMaDsdYWsUNc0hZVikDXRHamRor+AsNJ7Pi2DA sha512-q0z6v3s4gfltHTrrMhgvsG375RfT18n+jUtUT3vOBi0PUloPA4x/NEM2zp3U0dahP4YJCfP7tAlYtOYkZv7OZw==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ng-bs-daterangepicker/0.0.6/ng-bs-daterangepicker.min.js" integrity="sha256-gNo6MkJKhDMe/rKguZNSceihaZgV8qAmZq596TO0C2k= sha384-ssqNv6IP0gFZMqGCBXIchUj1hU+KtaR73qoM+4dwDrIcUFbfIsCiVHkrhF36C3yu sha512-At2HC9GDwT75iMnbAmHMeVa1FTf9vWd8jRo1iYrssIxXv7LJSfa+DPeIW9RqpQmzT+bxR2gW5cwikKMYDp0c5w==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/datepickk#1.4.1/dist/datepickk.min.js" integrity="sha256-a3ivkpG9FQ9r9MBj0CPQRgvomhFvEo6Q3hn3c/Uqj80= sha384-RS/z/Fj3PBS/SEuZRm4W4kj0lDIHAtywamV0X74KJkilLA6fL5AqECMIkjYA0Am7 sha512-7izfFFemCc9W6mAIb6pOFEysnmTe+0hTNAMXSaxGpJw7754ugRjw7fEDUJJjCwTpY//2wDvj7rJvetBSg8AdeQ==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- > GENERAL: CHARTS -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0/dist/Chart.min.js" integrity="sha256-Uv9BNBucvCPipKQ2NS9wYpJmi8DTOEfTA/nH2aoJALw= sha384-QzN1ywg2QLsf72ZkgRHgjkB/cfI4Dqjg6RJYQUqH6Wm8qp/MvmEYn+2NBsLnhLkr sha512-mf78KukU/a8rjr7aBRvCa2Vwg/q0tUjJhLtcK53PHEbFwCEqQ5durlzvVTgQgKpv+fyNMT6ZQT1Aq6tpNqf1mg==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/js/mdb.min.js" integrity="sha256-RyKFOSKnuKFSYAyJlfeHdb8ljBAbLJOSh9Bz8pzhhkY= sha384-4l+KiSAWnxbgZLQwQow7VtknwS81RATqH0tAE4Yh8jjquAE9F+k81s2aZojpuox7 sha512-v3qBtRIcm5Ew3PcKHPvjBB7QFkm1XQ4WequO37YZe2IT0hRj+kdA/vtOMvb5/UrlVx1HMkV/dqA+Ka9POz6sVA==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- > GENERAL: CUSTOM PROJECT SCRIPTS -->
<script type="text/javascript" src="dist/project.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
// Disable automatic style injection:
Chart.platform.disableCSSInjection = true;
console.clear();
</script>
</body>
</html>

Well,
seems you import a library that override the bootstrap behavior.
Remove the mdb library and check again.
You mixed 2 different UI libraries.
there is the official bootstrap theme, that is the one you use for the input & button.
And there is the MDB that stand for the material design bootstrap.
You can not use both,you have to make a choice which library to use then go with it without mixing.
Hope I've helped
<?xml version="1.0" encoding="UTF-8"?>
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml" xmlns:ng="http://angularjs.org" ng-app="sensorsApp">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" /> <!-- HTML5 HTTP-Header -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- HTML4 HTTP-Header -->
<meta http-equiv="content-type" content="text/css; charset=utf-8" />
<meta http-equiv="content-type" content="text/javascript; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- USED CSS: GENERAL (1/2) -->
<!-- > GENERAL: CUSTOM PROJECT STYLES -->
<link rel="stylesheet" type="text/css" href="styles/project.css">
<!-- USED CSS: BOOTSTRAP -->
<!-- > BOOTSTRAP FONT LIBS: -->
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha256-nAmazAk6vS34Xqo0BSrTb+abbtFlgsFK7NKSi6o7Y78= sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr sha512-3M00D/rn8n+2ZVXBO9Hib0GKNpkm8MSUU/e2VNthDyBYxKWG+BftNYYcuEjXlyrSO637tidzMBXfE7sQm0INUg==" crossorigin="anonymous">
<!-- > BOOTSTRAP 4: -->
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY= sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T sha512-tDXPcamuZsWWd6OsKFyH6nAqh/MjZ/5Yk88T5o+aMfygqNFPan1pLyPFAndRzmOWHKT+jSDzWpJv8krj6x1LMA==" crossorigin="anonymous">
<!-- USED CSS: GENERAL (2/2) -->
<!-- > GENERAL: BOOTSTRAP DATE(TIME)PICKER -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" integrity="sha256-5Z/4A9O2iG86Ca27OwgMwLmRYt9bjLOoEpPXy7yhiSs= sha384-8wYGNo4TwC9xzqNRdt7OUN789eBPzNQlO/sxIKaJR1gkX0+Ok1kXxhHR4pZU+gP2 sha512-Dapa+NBx6nVgt1Q5L+vn8oXI+bcHD9qpWmWNlkqAIlzz6cpwb6IsEthpkmV455sUDs2FXAZKyNz4hY1Dl0xGyg==" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" integrity="sha256-7B9s/BwXySAt0TMN6/mo6NCBm8oCfFNqaeJlz/9FCpE= sha384-3J4adb6KqO9u+ZgVfdmUqKDG4qWyG2qxGdXYoCXh3YmBQURWveIDgFh22pw1E3a9 sha512-gjpWBCm7COvj1rB4CrNkBAV+Uoxivp/2LPKpZkKcnFS4dDGhQtxdNgn4b8hLltoEVHu7LktbSf8dH8Igm/vi6A==" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/datepickk#1.4.1/dist/datepickk.min.css" integrity="sha256-8pYhYq1SmTPr+/nu2genJ7ko5oPwyiY3TJN0UAAZGQw= sha384-M2Romq884NkvgBkdz3NdXBwgPBO8cCs0keFrHmCWoNQ+tJYBpktQErbvcD7gKXae sha512-zFB5O2YjVX9hdpLmz13ClhpHkX1MWNjuyfFlIiGUR9ziBrSvcpp4hx+qfpBZFsVHPHfMg1HFbC8E5uDf9Fd6HA==" crossorigin="anonymous">
<!-- > GENERAL: BOOTSTRAP CHARTS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/chart.js#2.8.0/dist/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E= sha384-q9MZ/PQCC1nIFQdrr9yNOFXeSaXjv/yPOJOdBd32aODh8+EM6udfo91a6mRbEDih sha512-/zs32ZEJh+/EO2N1b0PEdoA10JkdC3zJ8L5FTiQu82LR9S/rOQNfQN7U59U9BC12swNeRAz3HSzIL2vpp4fv3w==" crossorigin="anonymous">
<!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/css/mdb.min.css" integrity="sha256-VSBoWx3wZz4Z6YAMGq1toMWvJN3G1w7KH+b61PGwppA= sha384-WxBbLYERKrFMTQ9LAaSYPo5qW9PJSzV6pbbaX8PqD20S4yudCgwblvRmuhXU6iWD sha512-vltzTDeCDN3MBaISvgsAAv6vJfbJkhjTokn/UttmEVCo0UEOsm7yhgqWJ3n0d5Wz/Fl8ZZSdLyyn7YGGbGwNYg==" crossorigin="anonymous">
-->
<!-- USED SCRIPTS: GENERAL (1/2) -->
<!-- > GENERAL: Needed polyfills for working Luxon with supporting IE 10 or 11 -->
<script type="text/javascript" src="https://polyfill.io/v3/polyfill.js?features=default,es5,es6,es7,String.prototype.repeat,Array.prototype.find,Array.prototype.findIndex,Math.trunc,Math.sign&flags=gated" crossorigin="anonymous" charset="UTF-8"></script>
<!-- > GENERAL: jQuery 3 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8= sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT sha512-+NqPlbbtM1QqiK8ZAo4Yrj2c4lNQoGv8P79DPtKzj++l5jnN39rHA/xsqn8zE9l0uSoxaCdrOgFs6yjyfbBxSg==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js" integrity="sha256-jDnOKIOq2KNsQZTcBTEnsp76FnfMEttF6AV2DF2fFNE= sha384-hKAOvu4SRkR5UhOl+rvozhqPNh0VgjTz0sydNTzye3vkV6VzpbLACSgthC2bhXeV sha512-CEiA+78TpP9KAIPzqBvxUv8hy41jyI3f2uHi7DGp/Y/Ka973qgSdybNegWFciqh6GrN2UePx2KkflnQUbUhNIA==" crossorigin="anonymous" charset="UTF-8"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<div class="container justify-content-md-center justify-content-center">
<form id="dateTimeRangeSelectionForm1" class="form-group" role="form">
<div class="form-group">
<div class="col-sm">
<div class="row">
<div class="row">
<label class="form-control-label">Selected date/time range:</label>
</div>
<div class="input-group date row">
<input type="daterange" id="dateRangePicker1" name="dateRangePicker1" class="form-control" ng-model="dateRangePicker1"></input>
<div class="input-group-append" data-target="#dateRangePicker1">
<button type="button" id="dateRangePicker1GlyphButton1" class="btn btn-outline-secondary" role="button"><i class="fas fa-calendar"></i></button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- USED SCRIPTS: BOOTSTRAP -->
<!-- > BOOTSTRAP GENERAL: -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha256-ZvOgfh+ptkpoa2Y4HkRY28ir89u/+VRyDE7sB7hEEcI= sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1 sha512-5WvZa4N7Jq3TVNCp4rjcBMlc6pT3lZ7gVxjtI6IkKW+uItSa+rFgtFljvZnCxQGj8SUX5DHraKE6Mn/4smK1Cg==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- > BOOTSTRAP 4: -->
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s= sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM sha512-Ah5hWYPzDsVHf9i2EejFBFrG2ZAPmpu4ZJtW4MfSgpZacn+M9QHDt+Hd/wL1tEkk1UgbzqepJr6KnhZjFKB+0A==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- USED SCRIPTS: ANGULARJS1 -->
<!-- AngularJS 1: -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js" integrity="sha256-23hi0Ag650tclABdGCdMNSjxvikytyQ44vYGo9HyOrU= sha384-TBbVc3SDLcWU5RloNEsoiDVvRK9iYkBNMm1OsAcOIVEASb7zzMWB0aMobj6CzKUw sha512-28WMav3WUIziq1D5l+8y2BrzN+CJgEeIyLksiKOSHWofTgaZc3RMPzvleRhXbLwnzf/C7Xnb0W6pE8PlqeRSog==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-route.js" integrity="sha256-AL1+LnGW9wl5bbvR2aXuGAmYsPKLYHzFbeRyHvPUHw8= sha384-I+qxwVtb8G6V2DkR4JZQBtMe7WBcZkOhEoYoYcvePXVXyQGJDRmZ5vYNRoavfaJ6 sha512-lkwD93i2YxHwDdR41e/MhAl2nm68FsG3x6MdIkmcDaNu8gTgvwyxMxHEiP11fyD9+lpgnUSnPC//NwhAYPS58g==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-sanitize.js" integrity="sha256-fe1CNxJdqcp2+X9H3Sd0yqtxOv0cyK9DN52g+NhnBgQ= sha384-I3+wmR2cuftFax1/khkYCw2l/24RBOm7dRvcOCGUesC9HveXuL9Gt2QI82rmENt6 sha512-Qxi9FQdJbTxZaVDSVzShM6J67oXjN6MEZ8nn5Fl83fdd9dxsZqX6yDJspSjeKK6Q12FOx6DIQd8l/fe9h1r0ng==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.18.1/angular-translate.min.js" integrity="sha256-aOs2ICGLk6gC0UX7UDhvXn/gvsa2qx5bUipyQFKmoOs= sha384-A+zN6Osqnkp8ThR1gJEJ4/dVw2Zwfz0llOo7BnyciCz1isb6OENEo8xfHx1gTWLX sha512-U5WInQAQvpR1C+dLWjcpVygbeof6FylSTlLbUC6eQml4iiEKcNhtPi0GSLCNRIcycohEV5IjfU/HPNHx+lI+Dw==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- USED SCRIPTS: GENERAL (2/2) -->
<!-- > GENERAL: ANGULARJS CONTROLLER -->
<script type="text/javascript" src="dist/controller.js" charset="UTF-8"></script>
<!-- > GENERAL: MOMENT.JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js" integrity="sha256-AdQN98MVZs44Eq2yTwtoKufhnU+uZ7v2kXnD5vqzZVo= sha384-5wvDEKtdpg/AAUpUHtcjYKVs1qv2V/UFPCN2FNvgePyaKmpBjW+LrboDEuS5ssBe sha512-hlLgIh4nncb2yc4YPtWk5wOykcFxF0fBd5rHfJ6xsALI2khY3H8LbivswJE5Fpz7hws7CJCqOzdyjWHiKJYl+A==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data.min.js" integrity="sha256-15jnh2lee6Li94j6XCbw8PRzNZe29O/W9i97yXVyRmA= sha384-bnidgWGLxxEZXPx1eX9mXLAvpkXkRL3iQbkgEksVnj5tlsiymxadIxiM7q5a88Ji sha512-27vEz6bCFnYQ6tNjguaA5DK5TOGme/fdDxbEtuZxydpx4JLDaoO5ujAYO658OCrzcpELwhhaPI3fX6D71YV1qQ==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon#1.12.0/build/global/luxon.min.js" integrity="sha256-o1YsUhC0RuYMR+8b0zu9vjUuJa+pnS/8rB87wcyImTM= sha384-5Wo6YmI/Cgvh/Y576jEIIhWu6IvSt5wovJxutq18DkJwbHgVBrv1PIIpUFBTxI5D sha512-9j0Zy2i7ac00T3D+W6J3bHXp5S4ak5fF84Fyejc0S5D579pdNtEvBRc3DPxd0Amv31c5UcKz9EKgZXNpPDncqw==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">luxon.DateTime.local();</script>
<!-- > GENERAL: BOOTSTRAP DATE(TIME)PICKER -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js" integrity="sha256-jgMYw0Xf+iO0EYC4pnX8tS4vmDqyjtJ9dwfSMMjSZuY= sha384-hzexvprs0k2Q/IHSJOfegsjdg6kTcTTVxQdgHiB4+I/915hcvse9v42LLVVM5K4e sha512-9LUemrpP5JutDNVlv4gUnNWwZXm2+vdv5hVyBs5Jv9ps7L8rfM7s3XvZpWQZ8J24NtoFObTsTyVMHb1yt3daHQ==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js" integrity="sha256-dsMvvkha4U8Hflt7QUPXZAKLwT/BObq7M5j5AZYnmDs= sha384-2Tnqs3x0ucZkxYqJ3UX1R/fkSRkMaDsdYWsUNc0hZVikDXRHamRor+AsNJ7Pi2DA sha512-q0z6v3s4gfltHTrrMhgvsG375RfT18n+jUtUT3vOBi0PUloPA4x/NEM2zp3U0dahP4YJCfP7tAlYtOYkZv7OZw==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ng-bs-daterangepicker/0.0.6/ng-bs-daterangepicker.min.js" integrity="sha256-gNo6MkJKhDMe/rKguZNSceihaZgV8qAmZq596TO0C2k= sha384-ssqNv6IP0gFZMqGCBXIchUj1hU+KtaR73qoM+4dwDrIcUFbfIsCiVHkrhF36C3yu sha512-At2HC9GDwT75iMnbAmHMeVa1FTf9vWd8jRo1iYrssIxXv7LJSfa+DPeIW9RqpQmzT+bxR2gW5cwikKMYDp0c5w==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/datepickk#1.4.1/dist/datepickk.min.js" integrity="sha256-a3ivkpG9FQ9r9MBj0CPQRgvomhFvEo6Q3hn3c/Uqj80= sha384-RS/z/Fj3PBS/SEuZRm4W4kj0lDIHAtywamV0X74KJkilLA6fL5AqECMIkjYA0Am7 sha512-7izfFFemCc9W6mAIb6pOFEysnmTe+0hTNAMXSaxGpJw7754ugRjw7fEDUJJjCwTpY//2wDvj7rJvetBSg8AdeQ==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- > GENERAL: CHARTS -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0/dist/Chart.min.js" integrity="sha256-Uv9BNBucvCPipKQ2NS9wYpJmi8DTOEfTA/nH2aoJALw= sha384-QzN1ywg2QLsf72ZkgRHgjkB/cfI4Dqjg6RJYQUqH6Wm8qp/MvmEYn+2NBsLnhLkr sha512-mf78KukU/a8rjr7aBRvCa2Vwg/q0tUjJhLtcK53PHEbFwCEqQ5durlzvVTgQgKpv+fyNMT6ZQT1Aq6tpNqf1mg==" crossorigin="anonymous" charset="UTF-8"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/js/mdb.min.js" integrity="sha256-RyKFOSKnuKFSYAyJlfeHdb8ljBAbLJOSh9Bz8pzhhkY= sha384-4l+KiSAWnxbgZLQwQow7VtknwS81RATqH0tAE4Yh8jjquAE9F+k81s2aZojpuox7 sha512-v3qBtRIcm5Ew3PcKHPvjBB7QFkm1XQ4WequO37YZe2IT0hRj+kdA/vtOMvb5/UrlVx1HMkV/dqA+Ka9POz6sVA==" crossorigin="anonymous" charset="UTF-8"></script>
<!-- > GENERAL: CUSTOM PROJECT SCRIPTS -->
<script type="text/javascript" src="dist/project.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
// Disable automatic style injection:
Chart.platform.disableCSSInjection = true;
console.clear();
</script>
</body>
</html>

Binding datetimepicker to a html control

I'm creating a control to which datetimepicker is bound. I've done binding it to the control. This is how I've done:
Html:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-6">Year-Month</label>
<div class="col-sm-6">
<input type="text" id="year_month" name="year_month" class="form-control" placeholder="Year, Month">
</div>
</div>
</div>
</div>
javascript:
jQuery('#year_month').datetimepicker({ format: 'YYYY-MM' });
jQuery("#year_month").val(moment().format("YYYY-MM"));
alert(jQuery("#year_month").val());
jQuery("#year_month").on("change", function(){
alert("coming here!");
});
The thing is, this is working properly when the page is loaded. ie the current year and current month is displayed correctly. I have to trigger a change event when I change the month or year. But, when I try to change the month or year, it shows, "TypeError: widget.find is not a function" error. What is wrong with this code? What should I do for the change event? These are the plug-ins I've added:
<script src="js/moment-with-locales.js" type="text/javascript" language="javascript"></script>
<script src="js/bootstrap-datetimepicker.js" type="text/javascript" language="javascript"></script>
moment-with-locales.js is for displaying current year, month, date.
bootstrap-datetimepicker.js is for calender view.
And my jquery version is: jQuery v1.11.3.
Plug-ins added are:
<script src="js/jquery-1.11.3.min.js" type="text/javascript" language="javascript"></script>
<script src="js/jquery.blockUI.js" type="text/javascript" language="javascript"></script>
This is the order I've placed my references:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/select2.css" rel="stylesheet">
<link href="css/select2-bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-datetimepicker.css" rel="stylesheet">
<link href="css/switch.css" rel="stylesheet">
<link href="css/notifIt.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/pace-theme-minimal.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/jquery.datatable/buttons.dataTables.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery-1.11.3.min.js" type="text/javascript" language="javascript"></script>
<script src="js/jquery.blockUI.js" type="text/javascript" language="javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript" language="javascript"></script>
<script src="js/select2.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript" src="js/jquery.datatable/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.datatable/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.datatable/buttons.flash.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.datatable/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.datatable/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.datatable/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.datatable/buttons.html5.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.datatable/buttons.print.min.js"></script>
<script src="js/dataTables.bootstrap.js" type="text/javascript" language="javascript"></script>
<script src="js/jquery.dataTables.rowGrouping.js" type="text/javascript" language="javascript"></script>
<script src="js/moment-with-locales.js" type="text/javascript" language="javascript"></script>
<script src="js/bootstrap-datetimepicker.js" type="text/javascript" language="javascript"></script>
<script src="js/notifIt.js" type="text/javascript" language="javascript"></script>
<script src="js/pace.min.js" type="text/javascript" language="javascript"></script>
<script src="js/jquery.extend.js" type="text/javascript" language="javascript"></script>
Help me clearing this out.

magnific-popup video isn't popup

I'm quite new to js and jQuery, just using it from templates.
My goal is to use magnific popup like a video lightbox, but I can't make it work.
I've tried to remove some other libraries that I used but don't seem to change anything.
Where have I made a mistake? I've uploaded it here.
<!DOCTYPE HTML>
<!--
Overflow 1.1 by HTML5 UP
html5up.net | #n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="shortcut icon" href="../favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript"> document.createElement('video');document.createElement('audio');document.createElement('track'); </script>
<script src="js/video.js"></script>
<script> videojs.options.flash.swf = "js/video-js.swf"</script>
<link rel="stylesheet" href="css/effets_perso.css" />
<link rel="stylesheet" href="css/video-js.css">
<link rel="stylesheet" href="css/perso.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<noscript>
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Generic -->
<article class="container box style3">
<header>
<h2>Generic Box</h2>
<p>Just a generic box. Nothing to see here.</p>
</header>
<section>
<header>
<h3>Paragraph</h3>
<p>This is a byline</p>
</header>
<a class="test-popup-link" href="images/pic02.jpg">Image</a>
<script type="text/javascript">
$(document).ready(function() {
$(".test-popup-link").magnificPopup({
type: "image"
// autres options
});
});
</script>
<div align="center">
<a class="popup-youtube" href="http://www.youtube.com/watch?v=miTfXsMn5ms">video YouTube </a><br>
<a class="popup-vimeo" href="https://vimeo.com/45830194">video sur Vimeo </a><br>
<a class="popup-gmaps" href="https://maps.google.com/maps?q=epfl+&hl=en&ll=46.521666,6.56652&spn=0.016005,0.038581&sll=37.0625,-95.677068&sspn=37.683309,79.013672&t=h&hq=epfl&z=15&iwloc=A">EPFL sur Google Map</a>
<script type="text/javascript">
$(document).ready(function() {
$(".popup-youtube, .popup-vimeo, .popup-gmaps").magnificPopup({
disableOn: 700,
type: "iframe",
mainClass: "mfp-fade",
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
</script>
</div>
</video>
</section>
</section>
</article>
</body>
</html>

I don't know if this is the complete problem but the order of your javascript tags is definitely part of the problem.
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
As you can see you are loading the js/jquery.magnific-popup.js before you actually load the jquery library (js/jquery.min.js). This is an important distinction because your magnific-popup.js uses jquery. If you look at the console on your web page (type ctrl+i, and switch to the console tab) you will see several errors that have to do with jquery not being loaded, and thus the functions in magnific-popup.js not being defined.
So move your jquery script to the top
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
and if it still doesn't work. Look at the console, and try to include the errors when writing an Stack Overflow question.

Javascript works directly from view, but not when included in asset pipeline

What am I missing to get my javascript working via the asset pipeline?
When I try using jQuery chained to work through the assets, it doesn't work properly, however when I put the javascript function directly into the view it works perfectly.
I've got the the jquery-rails and coffee-rails gems installed. I saved the jquery.chained.mini.js code to vendor\assets\javascript\jquery.chained.mini.js.
I updated my application.js to include the plugin.
I included the
$("#series").chained "#mark"
script block into my app\assets\javascript\vehicle.js.coffee file.
When the view loads, the following is listed under head-
<head>
. Edited for brevity
.
.
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/equipment.js?body=1" type="text/javascript"></script>
<script src="/assets/sessions.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/vehicles.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.chained.mini.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
.
.
.
</head>
The jquery plugin is there, as is the vehicles.js page. The source for vehicle.js comes out as follows-
(function() {
$("#series").chained("#mark");
}).call(this);
This should make the drop down lists in the edit view depend on each other. However, all the options are available no matter what in the second drop down box.
If I put the script directly into the view though, as show below, it works perfectly.
edit.html.erb
<!DOCTYPE html>
<html>
<head>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/equipment.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/sessions.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/vehicles.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/equipment.js?body=1" type="text/javascript"></script>
<script src="/assets/sessions.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/vehicles.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.chained.mini.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="PJnMEwkx/Ap2MQIHUsIcu0rYh+C6Or8VoVB9j2q9ptU=" name="csrf-token" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div>
<select id="mark" class="span2">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option></select>
<select id="series" class="span2"><option value="">--</option>
<option value="series-3" class="bmw">3 series</option>
<option value="series-5" class="bmw">5 series</option>
<option value="series-6" class="bmw">6 series</option>
<option value="a3" class="audi">A3</option>
<option value="a4" class="audi">A4</option>
<option value="a5" class="audi">A5</option>
</select>
<script type="text/javascript" charset="utf-8">
$(function(){$("#series").chained("#mark");
});
</script>
</div>
</div>
</body>
</html>
Can someone explain why the code isnt working on the assett pipeline but is when I put it into the view direct?

Try precompiling the assets:
bundle exec rake assets:precompile
http://guides.rubyonrails.org/asset_pipeline.html
and then restarting Rails.

JavaScript Error In JQRangeSlider

Seem to be having some issues with the JQRangeSlider. Trying to implement this tool into an MVC project. After the slider is called the alert is never reached. Is there a bug? I have this working in another project in Dreamweaver, though it renders fine in the live preview mode it does not work bringing it to any browser. Here's my code...
ViewBag.Title = "Test";
Layout = "";
}
<html>
<head>
<title>"Slider"</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery- ui.css" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/slider/CSS/classic.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js")" type="text/javascript"></script>
<script src="../../Content/slider/Scripts/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderMouseTouch.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderDraggable.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderBar.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQDateRangeSliderHandle.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSliderLabel.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQEditRangeSliderLabel.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQRangeSlider.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Content/slider/Scripts/jQEditRangeSlider.js")" type="text/javascript"></script>
</head>
<body>
<div class="page-header">
<h2>Test</h2>
</div>
<div id="slider" style="width:200px;"></div>
<input type="text" class="datepicker" />
<script type="text/javascript">
$(function () {
$("#slider").editRangeSlider();
alert("whocareswhateverbye");
});
</script>
</body>
</html>

I think your code is failing at
$("#slider").editRangeSlider();
due to a compatibility issue with jQuery 1.7, so it's never reaching the alert.
It's working fine with jQuery 1.8 as demonstrated here:
http://jsfiddle.net/QwAqy/1/

Categories

Resources