I have jquery and angularjs in my c# project.
I see that I have to call angularjs before jquery to avoid conflict between them.
My MasterPage.master
<script src="Scripts/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.8.2/angular-sanitize.min.js" integrity="sha512-JkCv2gG5E746DSy2JQlYUJUcw9mT0vyre2KxE2ZuDjNfqG90Bi7GhcHUjLQ2VIAF1QVsY5JMwA1+bjjU5Omabw==" crossorigin="anonymous"></script>
<script src="Scripts/angular-resource.min.js"></script>
<script src="Scripts/angular-material.js"></script>
<script src="Scripts/angular-animate.js"></script>
<script src="Scripts/angular-aria.js"></script>
<script src="Scripts/angular-messages.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/metisMenu.js"></script>
<script src="Scripts/DataTables/jquery.dataTables.min.js"></script>
<script src="Scripts/DataTables/dataTables.bootstrap.min.js"></script>
<script src="Scripts/sb-admin-2.js"></script>
<script src="Content/x-editable/js/bootstrap-editable.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
<link href="Content/sb-admin-2.css" rel="stylesheet" />
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/chosen.min.css" rel="stylesheet" />
<link href="/styles/StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="/Content/metisMenu.css" rel="stylesheet" />
<link href="Content/dataTables.bootstrap.css" rel="stylesheet" />
<link href="/styles/datepicker.css" rel="stylesheet" />
<link href="Content/x-editable/css/bootstrap-editable.css" rel="stylesheet" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.11.2/css/all.css" integrity="sha384-zrnmn8R8KkWl12rAZFt4yKjxplaDaT7/EUkKm7AovijfrQItFWR7O/JJn4DAa/gx" crossorigin="anonymous" />
<link href="Content/chosen.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/waza.css" />
<script src="Scripts/chosen.jquery.js"></script>
<script src="Scripts/bootstrap3-typeahead.js"></script>
<script src="Scripts/typeahead-ci.min.js"></script>
<script src="Scripts/moment.min.js"></script>
<script src="Scripts/moment-with-locales.min.js"></script>
<script src="Scripts/validator.js"></script>
My homepage.aspx
<script src="Content/formvalidation/js/formValidation.js"></script>
<script src="Content/formvalidation/js/framework/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-leaflet-directive/0.10.0/angular-leaflet-directive.min.js" integrity="sha512-dtFpnbvMRGgxjWRrfWjqeiRwDk5iQR/d7FRIv5xs+7fIWzKI/376mEiYTcyfH1os/ed+BgMpIFO+p7rof14Hdg==" crossorigin="anonymous"></script>
<script src="Scripts/app/app.js"></script> -- angularjs file
My issue is even if i call angularjs before jquery in my project when I do some stuff in my homepage like modify an element in a table. After that I have this message on my page. There is other solutions to avoid conflict ? or I may do something wrong.
Failed to instantiate module minovateApp
I am getting this error while building the angular project. I have installed ng-resource to my project:
Uncaught Error: [$injector:modulerr] Failed to instantiate module minovateApp due to:
Error: [$injector:nomod] Module 'minovateApp' 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.0/$injector/nomod?p0=minovateApp at file:///E:/InnovationBeesprojects/cargobees-
.....
This is my index.html code
<!doctype html>
<html ng-app="minovateApp" ng-controller="MainCtrl" class="no-js {{containerClass}}">
<head>
<meta charset="utf-8">
<title>Cargobees - Admin Dashboard</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="icon" type="image/ico" href="favicon.ico" />
<link rel="manifest" href="manifest.json">
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-bootstrap-colorpicker/css/colorpicker.css" />
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/angular-bootstrap-nav-tree/dist/abn_tree.css" />
<link rel="stylesheet" href="bower_components/chosen/chosen.min.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="bower_components/intro.js/introjs.css" />
<link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css" />
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
<link rel="stylesheet" href="bower_components/rickshaw/rickshaw.min.css" />
<link rel="stylesheet" href="bower_components/angular-toastr/dist/angular-toastr.css" />
<link rel="stylesheet" href="bower_components/fullcalendar/fullcalendar.css" />
<link rel="stylesheet" href="bower_components/angular-ui-grid/ui-grid.css" />
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="bower_components/angular-ui-tree/dist/angular-ui-tree.min.css" />
<link rel="stylesheet" href="bower_components/animate.css/animate.css" />
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="bower_components/leaflet-draw/dist/leaflet.draw.css" />
<link rel="stylesheet" href="bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.css" />
<link rel="stylesheet" href="bower_components/morrisjs/morris.css" />
<link rel="stylesheet" href="bower_components/ng-table/dist/ng-table.css" />
<link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.min.css" />
<link rel="stylesheet" href="bower_components/ngImgCrop/compile/minified/ng-img-crop.css" />
<link rel="stylesheet" href="bower_components/simple-line-icons/css/simple-line-icons.css" />
<link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons.css" />
<link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons.min.css" />
<link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons-wind.css" />
<link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons-wind.min.css" />
<link rel="stylesheet" href="bower_components/dragular/dist/dragular.min.css" />
<link rel="stylesheet" href="bower_components/magnific-popup/dist/magnific-popup.css" />
<link rel="stylesheet" href="bower_components/angucomplete-alt/angucomplete-alt.css" />
<link rel="stylesheet" href="bower_components/json-formatter/dist/json-formatter.css" />
<link rel="stylesheet" href="bower_components/bootstrap-social/bootstrap-social.css" />
<link rel="stylesheet" href="bower_components/c3/c3.css" />
<link rel="stylesheet" href="bower_components/angular-bootstrap-datetimepicker/src/css/datetimepicker.css" />
<link rel="stylesheet" href="bower_components/angular-hovercard/dist/angular-hovercard.css" />
<link rel="stylesheet" href="bower_components/owl.carousel/dist/assets/owl.carousel.css" />
<link rel="stylesheet" href="bower_components/owl.carousel/dist/assets/owl.theme.default.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/layout.css">
<!-- endbuild -->
</head>
<body id="minovate" class="{{main.settings.navbarHeaderColor}} {{main.settings.activeColor}} {{containerClass}} header-fixed aside-fixed rightbar-hidden appWrapper" ng-class="{'header-fixed': main.settings.headerFixed, 'header-static': !main.settings.headerFixed, 'aside-fixed': main.settings.asideFixed, 'aside-static': !main.settings.asideFixed, 'rightbar-show': main.settings.rightbarShow, 'rightbar-hidden': !main.settings.rightbarShow}">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Application content -->
<div id="wrap" ui-view autoscroll="false"></div>
<!-- Page Loader -->
<div id="pageloader" page-loader></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<script src="https://www.gstatic.com/firebasejs/3.6.9/firebase.js"></script>
<script>
var config = {
apiKey: "AIzaSyD3ElSyvFYfVVXQlNimsfi_d7edi_VN_V8",
authDomain: "cargo-ee422.firebaseapp.com",
databaseURL: "https://cargo-ee422.firebaseio.com",
storageBucket: "cargo-ee422.appspot.com",
messagingSenderId: "100271283421"
};
firebase.initializeApp(config);
</script>
<script src="googlescripts/service-worker.js"></script>
<script src='//maps.googleapis.com/maps/api/js?libraries=weather,geometry,visualization,places,drawing&sensor=false&language=en&v=3.17'></script>
<!-- build:js(.) scripts/oldieshim.js -->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- endbuild -->
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-bootstrap-colorpicker/js/bootstrap-colorpicker-module.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap-nav-tree/dist/abn_tree_directive.js"></script>
<script src="bower_components/chosen/chosen.jquery.min.js"></script>
<script src="bower_components/angular-chosen-localytics/chosen.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/datatables.net/js/jquery.dataTables.js"></script>
<script src="bower_components/angular-datatables/dist/angular-datatables.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/bootstrap/angular-datatables.bootstrap.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/colreorder/angular-datatables.colreorder.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/columnfilter/angular-datatables.columnfilter.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/colvis/angular-datatables.colvis.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/fixedcolumns/angular-datatables.fixedcolumns.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/fixedheader/angular-datatables.fixedheader.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/scroller/angular-datatables.scroller.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/tabletools/angular-datatables.tabletools.min.js"></script>
<script src="bower_components/d3/d3.js"></script>
<script src="bower_components/angular-file-upload/dist/angular-file-upload.min.js"></script>
<script src="bower_components/angular-flot/angular-flot.js"></script>
<script src="bower_components/angular-fontawesome/dist/angular-fontawesome.js"></script>
<script src="bower_components/angular-fullscreen/src/angular-fullscreen.js"></script>
<script src="bower_components/angular-simple-logger/dist/angular-simple-logger.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<script src="bower_components/angular-google-maps/dist/angular-google-maps.js"></script>
<script src="bower_components/intro.js/intro.js"></script>
<script src="bower_components/angular-intro.js/src/angular-intro.js"></script>
<script src="bower_components/angular-ipsum/dist/ipsum.min.js"></script>
<script src="bower_components/leaflet/dist/leaflet-src.js"></script>
<script src="bower_components/angular-leaflet-directive/dist/angular-leaflet-directive.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.js"></script>
<script src="bower_components/masonry/dist/masonry.pkgd.min.js"></script>
<script src="bower_components/ev-emitter/ev-emitter.js"></script>
<script src="bower_components/imagesloaded/imagesloaded.js"></script>
<script src="bower_components/jquery-bridget/jquery-bridget.js"></script>
<script src="bower_components/angular-masonry/angular-masonry.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/angular-momentjs/angular-momentjs.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/rickshaw/rickshaw.js"></script>
<script src="bower_components/angular-rickshaw/rickshaw.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-smart-table/dist/smart-table.js"></script>
<script src="bower_components/angular-toastr/dist/angular-toastr.tpls.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<script src="bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.js"></script>
<script src="bower_components/angular-translate-storage-local/angular-translate-storage-local.js"></script>
<script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="bower_components/fullcalendar/fullcalendar.js"></script>
<script src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<script src="bower_components/angular-ui-grid/ui-grid.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-ui-select/dist/select.js"></script>
<script src="bower_components/angular-ui-tree/dist/angular-ui-tree.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.js"></script>
<script src="bower_components/angular-base64/angular-base64.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="bower_components/flot/jquery.flot.js"></script>
<script src="bower_components/flot/jquery.flot.resize.js"></script>
<script src="bower_components/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="bower_components/flot.tooltip/js/jquery.flot.tooltip.js"></script>
<script src="bower_components/html.sortable/dist/html.sortable.js"></script>
<script src="bower_components/jquery.easy-pie-chart/dist/angular.easypiechart.min.js"></script>
<script src="bower_components/jquery.inputmask/dist/jquery.inputmask.bundle.js"></script>
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.js"></script>
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="bower_components/jquery.sparkline/index.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/leaflet-draw/dist/leaflet.draw.js"></script>
<script src="bower_components/leaflet-heat/dist/leaflet-heat.js"></script>
<script src="bower_components/leaflet-plugins/control/Distance.js"></script>
<script src="bower_components/leaflet-plugins/control/Layers.Load.js"></script>
<script src="bower_components/leaflet-plugins/control/Permalink.js"></script>
<script src="bower_components/leaflet-plugins/control/Permalink.Layer.js"></script>
<script src="bower_components/leaflet-plugins/control/Permalink.Line.js"></script>
<script src="bower_components/leaflet-plugins/control/Permalink.Marker.js"></script>
<script src="bower_components/leaflet-plugins/layer/Icon.Canvas.js"></script>
<script src="bower_components/leaflet-plugins/layer/Layer.Deferred.js"></script>
<script src="bower_components/leaflet-plugins/layer/Marker.Rotate.js"></script>
<script src="bower_components/leaflet-plugins/layer/Marker.Text.js"></script>
<script src="bower_components/leaflet-plugins/layer/OpenStreetBugs.js"></script>
<script src="bower_components/leaflet-plugins/layer/vector/GPX.js"></script>
<script src="bower_components/leaflet-plugins/layer/vector/GPX.Speed.js"></script>
<script src="bower_components/leaflet-plugins/layer/vector/KML.js"></script>
<script src="bower_components/leaflet-plugins/layer/vector/OSM.js"></script>
<script src="bower_components/leaflet-plugins/layer/tile/Bing.js"></script>
<script src="bower_components/leaflet-plugins/layer/tile/Google.js"></script>
<script src="bower_components/leaflet-plugins/layer/tile/Yandex.js"></script>
<script src="bower_components/eve-raphael/eve.js"></script>
<script src="bower_components/raphael/raphael.js"></script>
<script src="bower_components/mocha/mocha.js"></script>
<script src="bower_components/morrisjs/morris.js"></script>
<script src="bower_components/ng-bs-daterangepicker/src/ng-bs-daterangepicker.js"></script>
<script src="bower_components/ng-table/dist/ng-table.js"></script>
<script src="bower_components/ng-tags-input/ng-tags-input.min.js"></script>
<script src="bower_components/ngImgCrop/compile/minified/ng-img-crop.js"></script>
<script src="bower_components/oclazyload/dist/ocLazyLoad.js"></script>
<script src="bower_components/textAngular/dist/textAngular-rangy.min.js"></script>
<script src="bower_components/textAngular/dist/textAngular-sanitize.min.js"></script>
<script src="bower_components/textAngular/dist/textAngular.min.js"></script>
<script src="bower_components/dragular/dist/dragular.min.js"></script>
<script src="bower_components/magnific-popup/dist/jquery.magnific-popup.js"></script>
<script src="bower_components/flow.js/dist/flow.js"></script>
<script src="bower_components/ng-flow/dist/ng-flow.js"></script>
<script src="bower_components/angular-base64-upload/src/angular-base64-upload.js"></script>
<script src="bower_components/angucomplete-alt/angucomplete-alt.js"></script>
<script src="bower_components/json-formatter/dist/json-formatter.js"></script>
<script src="bower_components/myforce-angularjs-dropdown-multiselect/dist/angularjs-dropdown-multiselect.min.js"></script>
<script src="bower_components/c3/c3.js"></script>
<script src="bower_components/angular-chart/angular-chart.js"></script>
<script src="bower_components/angular-bootstrap-datetimepicker/src/js/datetimepicker.js"></script>
<script src="bower_components/angular-bootstrap-datetimepicker/src/js/datetimepicker.templates.js"></script>
<script src="bower_components/angular-date-time-input/src/dateTimeInput.js"></script>
<script src="bower_components/angular-hovercard/dist/angular-hovercard.js"></script>
<script src="bower_components/angular-daterangepicker/js/angular-daterangepicker.js"></script>
<script src="bower_components/angular-websocket/dist/angular-websocket.js"></script>
<script src="bower_components/owl.carousel/dist/owl.carousel.min.js"></script>
<!-- endbower -->
<!-- endbuild -->
</body>
</html>
This is my app.js
var app = angular
.module('minovateApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngSanitize',
'ngTouch',
'ngMessages',
'picardy.fontawesome',
'ui.bootstrap',
'ui.router',
'ui.utils',
'angular-loading-bar',
'angular-momentjs',
'FBAngular',
'lazyModel',
'toastr',
'angularBootstrapNavTree',
'oc.lazyLoad',
'ui.select',
'ui.tree',
'textAngular',
'colorpicker.module',
'angularFileUpload',
'ngImgCrop',
'datatables',
'datatables.bootstrap',
'datatables.colreorder',
'datatables.colvis',
'datatables.tabletools',
'datatables.scroller',
'datatables.columnfilter',
'ui.grid',
'ui.grid.resizeColumns',
'ui.grid.edit',
'ui.grid.moveColumns',
'ngTable',
'smart-table',
'angular-flot',
'angular-rickshaw',
'easypiechart',
'uiGmapgoogle-maps',
'ui.calendar',
'ngTagsInput',
'pascalprecht.translate',
'ngMaterial',
'localytics.directives',
'leaflet-directive',
'wu.masonry',
'ipsum',
'angular-intro',
'dragularModule',
'base64',
'flow',
'naif.base64',
'rorymadden.date-dropdowns',
'angucomplete-alt',
'jsonFormatter',
'angularjs-dropdown-multiselect',
'ui.grid',
'ui.grid.selection',
'angularChart',
'ui.bootstrap.datetimepicker',
'ui.dateTimeInput',
'yaru22.hovercard',
'daterangepicker',
'ngWebSocket'
]);
I've gone through the other solutions to this question and none seem to work. I still think there is a problem with the scripts. Here is my :
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
<!-- JQuery -->
<script src="js/jquery-1.11.3.js"></script>
<!-- BS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!-- Fancybox -->
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src-"fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<script>
$(document).ready(function() {
if(location.hash) {
$(location.hash).click();
}
$(".iframe").fancybox();
});
</script>
</head>
And body:
<a class="iframe" href="https://player.vimeo.com/video/151002965">
<img src="https://vimeo.com/151002965">
</a>
it have some type mistake
<script type="text/javascript" src-"fancybox/jquery.fancybox-1.3.4.pack.js"></script>
please correct it as,
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
try once again it may help you
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();
});
I am just importing the below javascript file and css but when i run this page the ajax-loader just keeps on spinning.
Note: there is no body or content in the file at all other than what is mentioned below.
Any idea why the ajax-loader.gif spins ?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.external-png-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.external-png-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.icons-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.icons-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.inline-png-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.inline-png-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.inline-svg-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.inline-svg-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.structure-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.structure-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.theme-1.4.2.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile.theme-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.4.2.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
</body>
</html>
.However when i try the below links it works fine without the loader spinning.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
why two jquery mobiles just add one:
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.js"></script> //<---either this
<script src="js/jquery.mobile-1.4.2.min.js"></script>//<--or this
you have to pick only one of it, so update to this:
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
and you have loaded all the non-minified and minified css files too.