I Can't include Angular Datepicker to module - javascript

Hey I want to use this module into mine :
https://github.com/720kb/angular-datepicker
I include css here :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/19f59abbe2.js"></script>
<script src="/javascripts/angular.js"></script>
<script src="/javascripts/app.js"></script>
<link href="/stylesheets/sass/vendors/bootstrap.min.css" rel="stylesheet">
<link href="/stylesheets/sass/vendors/angular-datapicker.css" rel="stylesheet">
<link rel='stylesheet' href='/stylesheets/main.css' />
<link href="/stylesheets/sass/vendors/font-awesome.min.css" rel="stylesheet">
</head>
<body>
and on end body :
</div>
<% include partials/footer.ejs %>
<script src="/javascripts/angular-datapicker.js"></script>
</body>
</html>
And when I open page in console I see error :
Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module 720kb.datepicker due to:
[$injector:nomod] Module '720kb.datepicker' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.6.4/$injector/nomod?p0=720kb.datepicker
also I add inside module :
angular.module('app', ['angular.datepicker'])
How can I repair this?
EDIT:
<script src="/javascripts/angular.js"></script>
<script src="/javascripts/angular-datapicker.js"></script>
<script src="/javascripts/angular-datepicker.js"></script>
<script src="/javascripts/app.js"></script>
<link href="/stylesheets/sass/vendors/bootstrap.min.css" rel="stylesheet">
<link href="/stylesheets/sass/vendors/angular-datapicker.css" rel="stylesheet">
Why the top link of angular-datapicker.js is showing error "cant include script" in console where second link bottom loading, and all is ok? if that is the same?

This is a complete stab in the dark, as you have not provided any reproducible sample.. but by just looking at the snippet you're provided... my best guess is that you're not using any dependency managers etc, and thus are relying on the order of when your scripts are loaded.
If you're app is then inside the body of the app... and you then only load the date-picker at the end... you'd see the problem you're experiencing.
You also have a typo in your file name.
A potential solution could be:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/javascripts/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/19f59abbe2.js"></script>
<script src="/javascripts/angular.js"></script>
<!--move the datapicker script to here-->
<script src="/javascripts/angular-datepicker.js"></script>
<!--rest omitted for brevity-->
</head>

You've misspelled it to angular-datApicker.js
It should be angular-datEpicker.js

Related

How to use ES6 modules while creating jQuery plugin?

I am creating a jQuery Plugin for building a form builder. The code is going to be very lengthy. I don't wanna keep everything in just one file.
To achieve this I am trying to break everything into ES6 modules but JS is throwing a Syntax error.
Uncaught SyntaxError: Unexpected identifier
Uncaught TypeError: $(...).formBuilder is not a function
Here's my code:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Form Builder</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
<!-- <script src="functions.js"></script> -->
<script src="index.js"></script>
</head>
<body>
<div id="form-builder"></div>
</body>
</html>
<script type="text/javascript">
$("#form-builder").formBuilder();
</script>
index.js
import formBuilder from './functions.js'
(function($){
$.fn.formBuilder = function(){
formBuilder()
}
}(jQuery))
functions.js
export default function formBuilder(){
$.get('template.mst', function(template) {
let rendered = Mustache.render(template, fieldsData);
$('#form-builder').html(rendered);
});
}
I had to make two changes to get your code to run (in Chrome/Firefox):
First, from MDN
The import statement cannot be used in embedded scripts unless such script has a type="module".
This is a little misleading: "embedded script" sounds like it wouldn't include a src= script...but in practice it doesn't seem to work without it.
<script type="module" src="index.js"></script>
Second, module scripts are lazy-loaded, which means your final script tag will be executed before index.js is actually loaded/parsed. You can change this by using the jQuery ready callback.
<script>
$(() => {
$("#form-builder").formBuilder();
});
</script>

Module error Angular 1.5

It looks like I can't instantiate my module. Here is my files :
--tv
-- contents (folder)
-- contents.template.html
-- contents.component.js
-- index.html
-- bootstrap.js
Now, here's the code :
Contents.component.js :
angular
.module('contents', [])
.component('myContents', {
controller: contentController,
templateUrl: 'contents/content.template.html',
});
function contentController() {
console.log('Le content est appelée !');
}
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TV</title>
<!-- SCRIPT DE CONNEXION -->
<script src="bower_components/angular/angular.js"></script>
<script src="bootstrap.js"></script>
<script src="/bower_components/angular-component-router/angular_1_router.js"></script>
<script src="/bower_components/angular-component-router/ng_route_shim.js"></script>
<script src"/contents/contents.component.js"></script>
</head>
<body ng-app="app">
<my-contents></my-contents>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
</body>
</html>
Finally bootstrap.js :
angular
.module('app', ['ngComponentRouter', 'contents'])
.config(function ($locationProvider) {
$locationProvider.html5Mode(true);
})
.value('$routerRootComponent', 'myApp')
.component('app', {
});
And the error catched in the browser console :
Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module contents due to:
[$injector:nomod] Module 'contents' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.8/$injector/nomod?p0=contents
minErr/<#http://127.0.0.1:8080/bower_components/angular/angular.js:68:12
module/<#http://127.0.0.1:8080/bower_components/angular/angular.js:2082:17
ensure#http://127.0.0.1:8080/bower_components/angular/angular.js:2006:38
module#http://127.0.0.1:8080/bower_components/angular/angular.js:2080:14
loadModules/<#http://127.0.0.1:8080/bower_components/angular/angular.js:4617:22
forEach#http://127.0.0.1:8080/bower_components/angular/angular.js:321:11
loadModules#http://127.0.0.1:8080/bower_components/angular/angular.js:4601:5
loadModules/<#http://127.0.0.1:8080/bower_components/angular/angular.js:461
I made a copy/paste of another project that I built yesterday that works. I have no idea why it's not working.
You are bootstrapping your app, then you load the contents script. Change their order, like this:
<script src="bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-component-router/angular_1_router.js"></script>
<script src="/bower_components/angular-component-router/ng_route_shim.js"></script>
<script src"/contents/contents.component.js"></script>
<script src="bootstrap.js"></script>

Chart.js not deploying properly on Heroku

I have been using angular-chart.js with my app locally and I have not had a problem. However, when I deploy my app on Heroku, I my page breaks because it Chart.js is not deployed properly.
Uncaught SyntaxError: Unexpected token < Chart.min.js:1
Uncaught ReferenceError: Chart is not defined angular-chart.min.js:1
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.6/$injector/modulerr?p0=swellsApp&p1=Error%…swells.herokuapp.com%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A19%3A463) angular.min.js:38
I don't get these error when I run it on my local server. I'm sourcing the scripts properly and have included my dependencies in my app as well. What I don't understand is that my other scripts have been loading with no problem. It's just Chart.js that is giving me the issue...
Any thoughts???
What I see under Resources in Chrome's DevTools
index.html
<head>
<meta charset="utf-8">
<title>Swells</title>
<!-- For Angular Routing -->
<base href="/">
<!-- CSS -->
<link rel="stylesheet" href="public/assets/libs/normalize-css/normalize.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/darkly/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
<link rel="stylesheet" href="assets/libs/angular-chart.js/dist/angular-chart.min.css">
<link rel="stylesheet" href="../../assets/css/style.css">
<!-- JAVASCRIPT LIBS -->
<script src="assets/libs/angular/angular.min.js"></script>
<script src="assets/libs/angular-route/angular-route.min.js"></script>
<script src="assets/libs/angular-animate/angular-animate.min.js"></script>
<script src="assets/libs/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="assets/libs/angular-messages/angular-messages.min.js"></script>
<script src="assets/libs/Chart.js/Chart.min.js"></script>
<script src="assets/libs/angular-chart.js/dist/angular-chart.min.js"></script>
<!-- MAP API -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<!-- Controllers -->
<script src="app/controllers/mainCtrl.js"></script>
<script src="app/controllers/userCtrl.js"></script>
<script src="app/controllers/mapCtrl.js"></script>
<script src="app/controllers/surfCtrl.js"></script>
<script src="app/controllers/weatherCtrl.js"></script>
<script src="app/controllers/surfReportCtrl.js"></script>
<!-- Services -->
<script src="app/services/authService.js"></script>
<script src="app/services/userService.js"></script>
<script src="app/services/surfService.js"></script>
<script src="app/services/weatherService.js"></script>
<script src="app/services/surfReportService.js"></script>
<!-- Main Angular Files -->
<script src="app/routes.js"></script>
<script src="app/app.js"></script>
<!-- SET VEIWPORT FOR MOBILE -->
<meta name="viewport" content="width=device-width, intitial-scale=1.0">
</head>
app.js
angular.module('swellsApp', [
'appRoutes',
'authService',
'userService',
'surfService',
'weatherService',
'surfReportService',
'mainCtrl',
'userCtrl',
'surfCtrl',
'mapCtrl',
'surfReportCtrl',
'weatherCtrl',
'ngMessages',
'ngAnimate',
'ui.bootstrap',
'chart.js'
])
//application configuration to integrate tokens into our requests
.config(function($httpProvider){
//attach auth interceptor to the http requests
$httpProvider.interceptors.push('AuthInterceptor');
});
I found an alternate solution to this problem. I sourced a CDN for Chart.js and that worked. It seems that Chart.js was deploying with my app for some reason so I decided to source it from a cdn and that did the trick
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
I ahve that error when I have a mistake on the src property of my libs.
check that this line is ok:
<script src="assets/libs/angular-chart.js/dist/angular-chart.min.js"></script>
Maybe you misspell the src path.
What about if you change to this <script src="assets/libs/angular-chart/dist/angular-chart.min.js"></script> I think that angular-chart.js is not the name of the folder
Check your angular.json file for Chart.min.js and change both instances to all lowercase. Heroku is case sensitive.
Worked for me using Angular 13.

Uncaught TypeError: Cannot read property 'orientation' of undefined

This is the follow up of question Grid For HTML app's based on this answer
I've tried to create the data table using https://www.datatables.net/ the js files coming with this added to my existing project folder
and following is my <head> tag
<head>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>AndRemedy</title>
<link rel="stylesheet" href="css/jquery.mobile-1.0rc1.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script src="jqm.autoComplete-1.5.2-min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<!-- DataTable reference starts here -->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="media/js/jquery.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="media/js/jquery.dataTables.js"></script>
</head>
But when I run this getting
Uncaught TypeError: Cannot read property 'orientation' of undefined : jquery.mobile-1.0rc1.min.js:45
Note : Am trying to develop a hybrid app using PhoneGap,HTML5
As the error says, there's a TypeError in you jquery.mobil script. You can try to update it with the last version. Don't forget the stylesheet.
If you still have an error, try the uncompressed version.
You are using referencing two jquery files in your script. Only one is needed. Remove the first one and move the rest of the jquery and it's dependency files to the body tag.

datepicker is not a function

This question is already asked many times but none of them worked for me. I am trying to use this date picker in a JSP file. This is my script
<head>
<title>My Home</title>
<link rel="stylesheet" type="text/css"
href="../resource/css/page-style.css" />
<link rel="stylesheet" type="text/css"
href="../resource/css/jQuery-ui.css" />
<script src="../resource/js/jquery-1.9.1.js"></script>
<script src="../resource/js/jquery-ui.js"></script>
<script type="text/javascript" src="../resource/js/form-elements.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$("#shortcuts").load("shortcut.html");
$("#datepicker").datepicker();
alert('jQuery is working');
});
</script>
</head>
The shortcut file is loading perfectly, alert is also showing. I get error message as TypeError: $(...).datepicker is not a function. I am not facing this problem if I run this script in a html file placed in my desktop, when I copy the come code to my IDE and run it I get this error in my console. Please suggest me what can I do? I know this question is asked several times I have checked every answer this is the only link having close match to my prob but didn't work for me.
The problem is with your imported files.I think you have not placed them properly.
Try to import these files
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
It is working for me.
see here for more information
Double check that there are no JQuery references after your JQuery-ui reference.
I had an extra JQuery reference that came after my JQuery-ui reference and lost an hour chasing the problem. That will cause the datepicker not found error.
This is something to do with the import files. I also faced the same scenario and following imports helped me to overcome the following issue "datepicker is not a function".
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Categories