I'm trying to load agGrid in my angular project but i can't figure what i'm doing wrong in implementation.. The error i got is
Error: [$injector:nomod] Module 'ag.grid' is not available!
below is the scripts and dependencies i use to get agGrid in my project.
<link rel="stylesheet" type="text/css" href="bower_components/toastr/toastr.min.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/angular-ui-select/dist/select.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/angular-loading-bar/build/loading-bar.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/nvd3/build/nv.d3.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/ng-prettyjson/dist/ng-prettyjson.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/ng-table/dist/ng-table.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/angular-ui-grid/ui-grid.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/ag-grid/dist/styles/ag-grid.css">
define([
'pages/transfer/grid/transfer-grid',
'pages/reports/reports/reports-config'
], function () {
var module = angular.module('app.pages.ePayment', [
'app.pages.transfer.grid',
'app.pages.reports.config',
'ngTable',
'agGrid'
]);
module.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('ePayment', {
url: '/ePayment',
views: {
contentView: {
templateUrl: 'app/pages/ePayment/ePayment.html'
}
}
});
}]);
module.run(['navigationMenuService', function (navigationMenuService) {
navigationMenuService.addMenuItem({
name: "ePayment",
link: "ePayment",
iconClass: "fa fa-money"
})
}]);
<script>window.name = "NG_DEFER_BOOTSTRAP!";</script>
<!-- build:remove:production -->
<script src="bower_components/angular/angular.js" type="text/javascript"></script>
<script src="bower_components/angular-animate/angular-animate.min.js" type="text/javascript"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<!-- <script angular-cache ojt preku require.js -->
<script src="bower_components/angular-filter/dist/angular-filter.min.js" type="text/javascript"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.js" type="text/javascript"></script>
<script src="bower_components/angular-translate/angular-translate.js" type="text/javascript"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-ui-select/dist/select.min.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.min.js" type="text/javascript"></script>
<script src="bower_components/ngInfiniteScroll/build/ng-infinite-scroll.min.js" type="text/javascript"></script>
<script src="bower_components/quick-ngrepeat/quick-ng-repeat.js" type="text/javascript"></script>
<script src="bower_components/angular-nvd3/dist/angular-nvd3.min.js" type="text/javascript"></script>
<script src="bower_components/ng-prettyjson/dist/ng-prettyjson.min.js" type="text/javascript"></script>
<script src="bower_components/file-saver.js/FileSaver.js" type="text/javascript"></script>
<script src="bower_components/js-xlsx/dist/xlsx.core.min.js" type="text/javascript"></script>
<script src="bower_components/alasql/dist/alasql.min.js" type="text/javascript"></script>
<script src="bower_components/ng-table/dist/ng-table.js" type="text/javascript"></script>
<script src="bower_components/angular-ui-grid/ui-grid.min.js" type="text/javascript"></script>
<script src="bower_components/ag-grid/dist/ag-grid.js" type="text/javascript"></script>
Did i call it wrong or what? i installed using bower ( bower install ag-grid ) .
One thing that I faced with ag-grid is that you have to mention it in index.html even before angularjs and the other thing is in your main module you have to call the function:
agGrid.initialiseAgGridWithAngular1(angular);
Even before your module declaration. Refer https://www.ag-grid.com/best-angularjs-data-grid/index.php
Try these things and see if it works for you.
Related
I want to use owl carousel and I've added the related files in my index.php file but still the .owlCarousel() function doesn't resolve . Here is my related links to owl carousel in the head of my HTML file :
<link rel="stylesheet" href="css/jquery-ui.css">
<!-- owl carousel external css files: -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet" />
And in end of body tag I include my js files:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" defer></script>
<script src="js/jquery-3.3.1.min.js" type="c4ab72ba033bc5e53971138c-text/javascript" defer></script>
<script src="js/jquery-migrate-3.0.1.min.js" type="c4ab72ba033bc5e53971138c-text/javascript" defer></script>
<script src="js/jquery-ui.js" type="c4ab72ba033bc5e53971138c-text/javascript" defer></script>
<script src="js/popper.min.js" type="c4ab72ba033bc5e53971138c-text/javascript" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" defer></script>
<script src="js/owl.carousel.min.js" type="c4ab72ba033bc5e53971138c-text/javascript" defer></script>
<!-- My script file -->
<script src="js/owl-carousel-custom.js" type="text/javascript" defer></script>
and in my owl-carousel-custom.js I am trying to write some owl carousel code :
$(document).ready(() => {
$('.owl-carousel').owlCarousel({
loop: true,
})
});
But .owlCarousel() doesn't resolve as a function.Why?
Here is a screenshot of my IDE:
I'm getting this error:
I'm not sure what I have wrong in my index.html. I am currently developing an app on ionic1 and this error is generated when I try to inspect my code by safari. I have read that this error occurs when a label is not closed, but in my case I do not know what I have wrong. What can be?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json" />
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<!-- css -->
<link href="lib/ionic/css/ionic.css" rel="stylesheet" type="text/css"/>
<link href="css/normalize.css" rel="stylesheet" type="text/css" />
<link href="css/utilities.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="lib/font-awesome/css/fontawesome.min.css" />
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="lib/font-awesome/css/fontawesome-all.min.css" />
<link rel="stylesheet" type="text/css" href="lib/animate/animate.css" />
<link rel="stylesheet" type="text/css" href="lib/waves/css/waves.css" />
<link rel="stylesheet" type="text/css" href="lib/swiper/css/swiper.css" />
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="lib/ngStorage/js/ngStorage.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/constantes.js"></script>
<!-- libs -->
<script src="lib/jquery/jquery.js"></script>
<script src="lib/moment/moment.js"></script>
<script src="lib/swiper/js/swiper.js"></script>
<script src="lib/prefixfree/js/prefixfree.min.js"></script>
<!--<script src='lib/ng-cordova-oauth.min.js'></script>-->
<!--<script src="http://maps.google.com/maps/api/js?key=AIzaSyANNBvPehUvWndNs7zmVqWa7ys1DBTQnDs"></script>-->
<!-- Controladores TinApp -->
<script src="js/controllers/login/loginController.js"></script>
<!--<script src="js/controllers/wizard/ubicacionTinController.js"></script>-->
<script src="js/controllers/wizard/instructivoTinController.js"></script>
<script src="js/controllers/wizard/recuperarContrasenaController.js"></script>
<script src="js/controllers/registros/registrarUsuariosController.js"></script>
<script src="js/controllers/ofertas/ofertasController.js"></script>
<script src="js/controllers/ofertas/descripcionOfertaController.js"></script>
<script src="js/controllers/negocios/negocioController.js"></script>
<!--<script src="js/controllers/negocios/productosController.js"></script>
<script src="js/controllers/negocios/descripcionProductoController.js"></script>
<script src="js/controllers/favoritos/favoritosController.js"></script>
<script src="js/controllers/favoritos/descripcionFavoritoController.js"></script>-->
<script src="js/controllers/cupones/cuponesController.js"></script>
<script src="js/controllers/cupones/misCuponesController.js"></script>
<!--<script src="js/controllers/tins/misTinsController.js"></script>-->
<!--<script src="js/controllers/ajustes/ajustesController.js"></script>-->
<script src="js/controllers/ubicaciones/ubicacionesController.js"></script>
</head>
<body ng-app="tinApp">
<ion-nav-view class="viewport_inicial"></ion-nav-view>
</body>
</html>
As stated in the HTML specification:
The title element must not be empty.
Just add a title:
<title>tinApp</title>
I am trying to use Cluster Group plug-in for Leaflet, but I keep getting the "Uncaught TypeError: L.markerClusterGroup is not a function"
here is my simplified HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Brewser</title>
<link rel="stylesheet" type="text/css" href="brewser.css">
<link rel="stylesheet" type="text/css" href="leaflet.css"/>
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900,900i" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="dist/MarkerCluster.css"/>
<link rel="stylesheet" type="text/css" href="dist/MarkerCluster.Default.css"/>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="leaflet.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="brewser.js" type="text/javascript"></script>
<script src="dist/leaflet.markercluster-src.js"></script>
</body>
</html>
Here is my JS:
var myMap = L.map('map').setView([49.197060, 16.611837], 13);
var markers = L.markerClusterGroup();
Any idea what could be wrong?
plug-in files I am using are those in dist directory:
leaflet.markercluster-src.js
leaflet.markercluster.js
leaflet.markercluster-src.js.map
leaflet.markercluster.js.map
MarkerCluster.css
MarkerCluster.Default.css
Your imports are out of order:
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="leaflet.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="brewser.js" type="text/javascript"></script>
<script src="dist/leaflet.markercluster-src.js"></script>
should be:
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-database.js"></script>
<script src="leaflet.js" type="text/javascript"></script>
<!-- Notice where markercluster import is above app.js -->
<script src="dist/leaflet.markercluster-src.js"></script>
<script src="app.js" type="text/javascript"></script>
<script src="brewser.js" type="text/javascript"></script>
I just follow froala documentation and mix it with current layout using metronic.
Here is my css order.
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/css/components-md.css" id="style_components" rel="stylesheet" type="text/css"/>
<link href="assets/global/css/plugins-md.css" rel="stylesheet" type="text/css"/>
<link href="assets/admin/layout2/css/layout.css" rel="stylesheet" type="text/css"/>
<link href="assets/admin/layout2/css/themes/grey.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="assets/admin/layout2/css/custom.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="assets/coeg-editor/css/froala_editor.min.css" />
<link rel="stylesheet" type="text/css" href="assets/coeg-editor/css/froala_style.min.css" />
and here is my JS order
<script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="assets/admin/layout2/scripts/layout.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/coeg-editor/js/froala_editor.min.js"></script>
<script>
$(function() {
Metronic.init(); // init metronic core componets
Layout.init(); // init layout
$('a[href="{{ Request::url() }}"]').parent().addClass('active');
$('textarea#content').editable({inlineMode: false});
});
</script>
and I get Uncaught TypeError: undefined is not a function right at the $('textarea#content').editable({inlineMode: false});
But there is no error if I comment $('textarea#content').editable({inlineMode: false}); section.
How I can fix it ?
See https://www.froala.com/wysiwyg-editor/v2.0/docs/migrate-from-v1 for using
froalaEditor()
instead of
editable()
never mind the html which contain example still using v1 syntax instead of v2 :D
I just grabbed the example code at http://silviomoreto.github.io/bootstrap-select/ to try it out on my page. I don't know why I can't get the bootstrap-select to work. There are no options/no dropdown list of options (see image). What am I missing here? There are a ton of .css and js files (uses bootstrap 3.x) on the site I'm working on, but I created a template page just so I could try this out. Would someone help me with this? I've read posts here on SO, but I'm not finding the answer I need. Thanks.
Here is the order of the .css files in the <head>:
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-overrides.css" />
<link rel="stylesheet" type="text/css" href="css/lib/bootstrap-select.css" />
<link rel="stylesheet" type="text/css" href="css/lib/jquery-ui-1.10.2.custom.css" />
<link rel="stylesheet" type="text/css" href="css/lib/font-awesome.css" />
<link rel="stylesheet" type="text/css" href="css/custom-add/layout.css" />
<link rel="stylesheet" type="text/css" href="css/custom-add/elements.css" />
<link rel="stylesheet" type="text/css" href="css/custom-add/icons.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<link rel="stylesheet" href="css/kendo/kendo.common-bootstrap.min.css"/>
<link rel="stylesheet" href="css/kendo/kendo.bootstrap.min.css"/>
<link rel="icon" type="image/png" href="img/fav.png" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<body>
<select class="selectpicker" data-live-search="true" title="Choose a topping.">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
Here is the scripts order:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/store.js/store.min.js"></script>
<script src="js/app.js"></script>
<script src="js/data.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/kendo/kendo.all.min.js"></script>
<script src="js/kendo/kendo.angular.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/jquery-ui-1.10.2.custom.min.js"></script>
<script src="js/theme.js"></script>
<!--jquery: -->
$(document).ready(function() {
$('.selectpicker').selectpicker();
});