I am getting this error on browser console. Do not know how to trace the issue in a minified version of js files, I am using angular 11
my index.html from the browser source looks as this,
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<link rel="shortcut icon" href="assets/style/images/favicon.ico">
<meta name="theme-color" content="#FAB717">
<title> ProjectNmae </title>
<link href="assets/style/css/bootstrap-ar.min.css" rel="stylesheet">
<link href="assets/style/css/font-awesome.min.css" rel="stylesheet">
<link id="alignCssFileId" href="assets/style/css/custom-ar.css" rel="stylesheet">
<script type="text/javascript" src="assets/style/js/jquery-3.6.0.slim.min.js" integrity="sha384-Qg00WFl9r0Xr6rUqNLv1ffTSSKEFFCDCKVyHZ+sVt8KuvG99nWw5RNvbhuKgif9z" crossorigin="anonymous"></script>
<script type="text/javascript" src="assets/config/env.js" integrity="sha384-W/gDvNQidF0aTOoQQsiRdjmJ6fY605iVrBJtXbhANEtzICoIHKhuRcW6GlO2j4OU" crossorigin="anonymous"></script>
<script type="text/javascript" src="assets/js/paper-full.min.js" integrity="sha384-F2XIobYzyqtqgJtz47uxaaSZcW74BXtLyaFzwmDCyGpcJhlQ2uOUix5qhFCrBHCk" crossorigin="anonymous"></script>
<script type="text/javascript" src="assets/js/sketch.js" integrity="sha384-7JZMJBSgTv2Y0cEIC5IkoFKfI98P1NPO3jqlUouOZNo17nZC+CsniI/NcdHy9BSZ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.e9a0dc91c4e73b4253a1.css" crossorigin="anonymous" integrity="sha384-78+43IShn1BIWN3LOA15njC5ZrxLNqvrnrEnMPOf9u4xK0XQUnUgeEGPTnRKglIb"></head>
<body>
<app-root></app-root>
<script src="runtime-es2015.97b88cffbf6d7bb76de4.js" crossorigin="anonymous" type="module" nonce="axxx"></script>
<script src="polyfills-es2015.c1149d2371a02d5387aa.js" crossorigin="anonymous" type="module" nonce="axxx1"></script>
<script type="module" nonce="luP5QHLKIPYFBWqQmlHpxA==" src="styles.js" crossorigin="anonymous"></script>
<script type="module" nonce="kK6XFCINahrr1nP3PKu6cg==" src="vendor.js" crossorigin="anonymous"></script>
<script src="main-es2015.5a27787e3ce7aad7f5f8.js" crossorigin="anonymous" type="module" nonce="axxx2"></script>
<script src="runtime-es2015.97b88cffbf6d7bb76de4.js" crossorigin="anonymous" type="module" integrity="sha384-ejuxAHRYk/lDdh5eY5XGA8VBdY5fxHmxaN2Zj2yfvu6jtbz4KEBnCBuh8DgD6MMx"></script>
<script src="runtime-es5.97b88cffbf6d7bb76de4.js" crossorigin="anonymous" nomodule defer integrity="sha384-dzMNl4tuyq8u4ExHhBWPB4LmKyBmeIX/w1jNs0XTCkqX/R8GDy+22CmwH0G9tF13"></script>
<script src="polyfills-es5.8cff7e501f5a5e5470a8.js" crossorigin="anonymous" nomodule defer integrity="sha384-Y0rvNWLg2F/qKG+dFEB7BtaEqZPB6Zb+7BNvoTq2sK5S0xjMd3/IKvr7BVwpgzmW"></script>
<script src="polyfills-es2015.c1149d2371a02d5387aa.js" crossorigin="anonymous" type="module" integrity="sha384-Viihqv9+cuk7uY1x+KFZHSlh4+fqaoqUIYT0lvju+0bqRZ7mydf2vBBbc0j2KAEm"></script>
<script src="main-es2015.5a27787e3ce7aad7f5f8.js" crossorigin="anonymous" type="module" integrity="sha384-DOm6bOV2oeKptBwLbDOoRWyuvEBRHjGyaSqqGeRZ2rbOsuLGVSMbQkzPbwgzVEa2"></script>
<script src="main-es5.5a27787e3ce7aad7f5f8.js" crossorigin="anonymous" nomodule defer integrity="sha384-8hxP/HB3BtivnE+dC+kJ1Tuiyxe94Y+R/wQmR6Q0di7uSmUdUV9wuwTp1/Q4lfoT"></script>
</body>
</html>
Related
I'm migrating my laravel project to ionos hosting, but js it's not working, I think I have it all ok.
in my localhost is working fine.
not working local files and CDN
I am stuck.
and I have these errors:
Could you help me, please?
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Sertek</title>
<!-- Favicon -->
<link href="{{ asset('argon') }}/img/brand/favicon.png" rel="icon" type="image/png">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<!-- Icons -->
<link href="{{ asset('argon') }}/vendor/nucleo/css/nucleo.css" rel="stylesheet">
<link href="{{ asset('argon') }}/vendor/#fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
<!-- Argon CSS -->
<link type="text/css" href="{{ asset('argon') }}/css/argon.css?v=1.0.0" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/dataTables.semanticui.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css">
</head>
<body class="{{ $class ?? 'bg-default' }}">
<script src="{{ asset('argon') }}/vendor/jquery/dist/jquery.min.js"></script>
<script src="{{ asset('argon') }}/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/esm/popper.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<!-- Argon JS -->
<script src="{{ asset('argon') }}/js/argon.js?v=1.0.0"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.20/js/dataTables.uikit.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
<script>
window.onload = function exampleFunction() {
console.log('The Script will load now.'); //this works
}
</script>
#stack('js')
</body>
</html>```
I solved, my local jquery not working fine. I changed
<script src="{{ asset('argon') }}/vendor/jquery/dist/jquery.min.js" defer></script>
to
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
I am trying to use a jquery UI date picker on a datefield in django.
but for some reason, it looks very bad. and the input field itself is wired.
I would like to know what I am doing wrong? how can I fix the view?
there is also (in green) a gap in the field how can I remove the gap?.
picture:
JS
$("#id_start_time").datepicker({});
my head of the page:
<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></title>
<!-- Data Tables-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/rowreorder/1.2.6/css/rowReorder.dataTables.min.css">
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/rowreorder/1.2.6/js/dataTables.rowReorder.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"
integrity="sha256-+C0A5Ilqmu4QcSPxrlGpaZxJ04VjsRjKu+G82kl5UJk=" crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap3.min.css"
integrity="sha256-ze/OEYGcFbPRmvCnrSeKbRTtjG4vGLHXgOqsyLFTRjg=" crossorigin="anonymous"/>
I can't see jQuery ui css there.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
I have bootstrap js file inside assets folder like> assets/js/bootstrap.min.js and I have added in my index.HTML page with scrip tag <script src="assets/js/bootstrap.min.js"></script> but is not applying in my component.
What is wrong here or is there any way to use it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="96">
<meta property="og:image:height" content="96">
<meta content="width=2000" name="viewport">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta charset="utf-8">
<title>HomeClueWebApp</title>
<base href="/">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/icofont.css">
<link rel="stylesheet" type="text/css" href="assets/css/stellarnav.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/featherlight.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/featherlight.gallery.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/hover.css">
<link rel="stylesheet" type="text/css" href="assets/css/flexslider.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/slick.css">
<link rel="stylesheet" type="text/css" href="assets/css/slick-theme.css">
<link rel="stylesheet" type="text/css" href="assets/css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="assets/css/animations.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/morphext.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.css">
<link rel="stylesheet" type="text/css" href="assets/css/jquery.mb.YTPlayer.min.css">
<!-- Main stylesheet -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- Responsive stylesheet -->
<link rel="stylesheet" type="text/css" href="assets/css/responsive.css">
<!-- Favicon -->
<link href="assets/images/favicon.png" rel="shortcut icon" type="image/png">
<link href="assets/images/apple-icon.png" rel="icon" type="image/png">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="assets/js/popper.min.js"></script>
<!-- all plugins and JavaScript -->
<script type="text/javascript" src="assets/js/css3-animate-it.js"></script>
<script type="text/javascript" src="assets/js/stellarnav.min.js"></script>
<script type="text/javascript" src="assets/js/featherlight.min.js"></script>
<script type="text/javascript" src="assets/js/featherlight.gallery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.flexslider.js"></script>
<script type="text/javascript" src="assets/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="assets/js/jarallax.js"></script>
<script type="text/javascript" src="assets/js/slick.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui.js"></script>
<script type="text/javascript" src="assets/js/jquery-scrolltofixed-min.js"></script>
<script type="text/javascript" src="assets/js/morphext.min.js"></script>
<script type="text/javascript" src="assets/js/dyscrollup.js"></script>
<script type="text/javascript" src="assets/js/jquery.ripples.js"></script>
<script type="text/javascript" src="assets/js/jquery.mb.YTPlayer.min.js"></script>
<script type="text/javascript" src="assets/js/app.js"></script>
<!-- Main Custom JS -->
<script type="text/javascript" src="assets/js/main.js"></script>
<app-root></app-root>
</body>
</html>
file structure is here
https://kuldeepkoranga-connekt.tinytake.com/tt/Mzk1NjkyMl8xMjE0NjIyMw
https://kuldeepkoranga-connekt.tinytake.com/tt/Mzk1NjkyNF8xMjE0NjIyNQ
Thanks for any response
you should add jquery and bootstrap scripts in angular.json scripts section.
As all the scripts and styles you are trying to load are inside some folders in assets so you need to tell angular to load and consider those folders as assets.
You can do that in angular.json file as follows:
"assets": [
"src/favicon.ico",
"src/assets",
"src/assets/*" // Add this line at end.
],
With this line at end we are telling angular to build other folders inside assets folder to consider as assets.
As already suggested by #Chirag Chaudhari
This is normally not a good way to load scripts and styles as assets, instead load them with scripts and styles array present in angular.json file.
Hope it helps.
I have set up this form. My jQuery and heading tags is as follows:
<head>
<title>Contact - The Old Thatch Inn</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Satisfy|Yesteryear|Exo+2" rel="stylesheet">
<link href="css/fonts.css" rel="stylesheet" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('form').validate();
});
</script>
</head>
The html5 required field shows up instead of anything else. See the site here: http://adonnelly759.students.cs.qub.ac.uk/thatch/sample.php
Issues here is with jQuery conflict because of multiple jQuery libraries. I have removed last external script and I can see error messages right under each fields.
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<!-- MODIFICATION HERE -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
I'm using ng-inculde to include an html file that aslo includes some javascript codes for that page, but the javascripts are not executed,
here is my Code :
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title ng-cloak>{{Page.Title}}</title>
<link rel="stylesheet" href="/media/css/bootstrap.min.css">
<link rel="stylesheet" href="/media/css/swiper.min.css">
<link rel="stylesheet" href="/media/css/owl.carousel.css">
<link rel="stylesheet" href="/media/css/style.css">
<link href="/media/css/nprogress.css" rel="stylesheet">
<script type="text/javascript" src="/media/js/angular.js"></script>
<script src="/media/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/media/js/app.js"></script>
<script src="/media/js/vendor/modernizr-2.8.3.min.js"></script>
<meta name="description" content="">
<meta name="fragment" content="!">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<script type="text/javascript" src="/media/js/ng-device-detector.js"></script>
<script type="text/javascript" src="/media/js/re-tree.js"></script>
<script type="text/javascript" src="/media/js/angular-route.js"></script>
<script type="text/javascript" src="/media/js/angular-md5.js"></script>
<script type="text/javascript" src="/media/js/angular-cache.js"></script>
<script type="text/javascript" src="/media/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
And my home.html page:
<p>Welcome, this is the home page!!</p>
<div ng-include src="'/template/include/home_s.html'"></div>
And this is my home_s.html:
<script>
console.log("Selam, chooni khasi?");
alert("Sellam, choooni?");
</script>
Either:
<ng-include src="'/template/include/home_s.html'"></ng-include>
Or:
<div ng-include="'/template/include/home_s.html'"></div>
However, Angular on its own doesn't support loading scripts inside templates. For this to work you need to include jQuery (make sure you load it before Angular).
Demo without jQuery: http://plnkr.co/edit/Qh27ArEyIk53VRB7e61C?p=preview
Demo with jQuery: http://plnkr.co/edit/TxOmx5ksEFC2larJiJBA?p=preview