Can't get JQuery plugin Slick (carousel) to work - javascript

Here is my HTML header:
<!-- Bootstrap css -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Jquery slick plugin -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
<!-- My CSS -->
<link href="css/styles.css" rel="stylesheet">
Here is part of my body where I'm trying to display the carousel also where my javascript stuff is loaded:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="carousel">
<div><img src="img/slide-1.jpg"></div>
<div><img src="img/slide-2.jpg"></div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Bootstrap JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!--Jquery Slick plugin -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"</script>
<!-- My JavaScript -->
<script src="js/scripts.js"></script>
<!-- My JQuery -->
<script src="js/jquery.js"></script>
And finally my jquery file:
$(document).ready(function(){
$('.carousel').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 2,
slidesToScroll: 1
});
});
Been trying to figure this out for a while now so any help is much appreciated.

one small miss is there in the code, the bootstarp.min.js will require jquery.
You need to include jquery before boot strap.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Here is the plunker based on you
https://plnkr.co/edit/3NXz9Q69M3IxbTONg6n2?p=preview

Here is a fiddle that seems be working
https://jsfiddle.net/0p4fjskc/
You should include jquery fist !
<!-- Bootstrap JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Bootstrap JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

Related

Owl Carousel missing some styles when the page loads

I am using owl carousel as a slider but sometimes when the page loads the slider is not displayed. Inspect element tells me that the slider it's missing some styles. I have included the styles in the head of my page. I included jquery and then the owl carousel link. I am getting the data for the carousel with AJAX.
This is the code
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
<script defer="defer" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js">
</script>
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:3,
itemsDesktop:[1000,3],
itemsDesktopSmall:[980,2],
itemsTablet:[768,2],
itemsMobile:[650,1],
pagination:true,
navigation:false,
slideSpeed:1000,
autoPlay:true
});
});
</body>
No style is missing on the code you shared, the problem lies somewhere else
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:3,
itemsDesktop:[1000,3],
itemsDesktopSmall:[980,2],
itemsTablet:[768,2],
itemsMobile:[650,1],
pagination:true,
navigation:false,
slideSpeed:1000,
autoPlay:true
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
</head>
<body>
<script defer="defer" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js">
</script>
<div id="testimonial-slider">
<div> Slide 1</div>
<div> Slide 2 </div>
<div> Slide 3 </div>
</div>
</body>

DataTables does not display filter button

I have a problem, and that is that it does not show me the filter btn, I already produced the links, and I do not understand what the problem is, I will upload the links of whatever you call them, maybe there is some kind of error in the call, in advance, thank you very much! :
Head :
<!--Styles Css main -->
<link rel="stylesheet" href="../../css/main.css">
<!--Styles btns Datatables -->
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
<!--Boostrap Datatables Css -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap5.min.css">
<!--Favicon -->
<link rel="shortcut icon" href="../../assets/img/favicon.png" type="image/x-icon">
Scripts :
<!--====== Scripts -->
<!--Jquery -->
<script src="../../js/jquery-3.1.1.min.js"></script>
<!--SweetAlert2 -->
<script src="../../js/sweetalert2.min.js"></script>
<!--Boostrap js -->
<script src="../../js/bootstrap.min.js"></script>
<!--Jquery ScrollBar -->
<script src="../../js/jquery.mCustomScrollbar.concat.min.js"></script>
<!--Main js -->
<script src="../../js/main.js"></script>
<!-- Boostrap Bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- datatables with bootstrap JS -->
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap5.min.js"></script>
<!--DataTables btns -->
<script type="text/javascript" src="../../datatables/JSZip-2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="../../datatables/pdfmake-0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="../../datatables/pdfmake-0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="../../datatables/Buttons-1.5.6/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="../../datatables/Buttons-1.5.6/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="../../datatables/Buttons-1.5.6/js/buttons.print.min.js"></script>
<!-- Styles in Excel -->
<script src="https://cdn.jsdelivr.net/npm/datatables-buttons-excel-styles#1.1.1/js/buttons.html5.styles.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/datatables-buttons-excel-styles#1.1.1/js/buttons.html5.styles.templates.min.js"></script>

I have this error : $(...).datepicker is not a function

I try to use a datepicker, but it doesn't work.
I have this error : $(...).datepicker is not a function
I use many frameworks and librairy (Adminlte, bootstrap, chartjs, datatable). And I think that there is a conflicts between they.
$(document).ready(function() {
$('#datepicker').datepicker();
$('#datepicker').on("changeDate", function() {
$('#my_hidden_input').val(
$('#datepicker').datepicker('getFormattedDate')
);
});
});
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Dashboard</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="./css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="./css/skin-black-light.css">
<!-- CSS Table -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<!-- My Style -->
<link rel="stylesheet" href="./css/style_general.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet/less" type="text/css" href="./less/dropdown.less" />
<link rel="stylesheet/less" type="text/css" href="./less/sprites.less" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini fixed">
<div class="form-group">
<label>Date</label>
<div class="input-group date margin-bottom-10" id="datetimepicker1">
<input type="text" class="form-control" id="date" name="date" placeholder="DD/MM/YYY">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
<!-- jQuery 2.2.3 -->
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="./js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="./js/app.min.js"></script>
<!-- ChartJS 1.0.1 -->
<script src="./js/Chart.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="./js/demo.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="./js/jquery.slimscroll.min.js"></script>
<!-- JS table -->
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="./js/test_table.js"></script>
<script src="./js/js.js"></script>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var j = jQuery.noConflict();
j( function() {
j( "#datepicker" ).datepicker();
} );
</script>
Please try it this way. It is working fine. Same object is defined and used by jquery so its conflict try above trick its work fine..
I think datepicker is available in JQuery UI but you didn't include those library files. when I include the below files there is no such error $(...).datepicker
please include these file and check
[link] https://code.jquery.com/ui/1.12.1/jquery-ui.js
[link] https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css
Make sure that you include that datapicker.js library on the page that you use it on. Make sure that the link / local file exists. It may be a loaded from a different file if you are using bootstrap / framework.
This is the most common reason.
You can follow like this. This works for me.
<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">
The JS coding for the Date Picker I use.
<script>
$(document).ready(function(){
// alert ('Cliecked');
var date_input=$('input[name="orangeDateOfBirthForm"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options={
format: 'dd/mm/yyyy',
container: container,
changeYear: true,
changeMonth: true,
todayHighlight: true,
autoclose: true,
yearRange: "1930:2100"
};
date_input.datepicker(options);
});
</script>
The HTML Coding:
<input type="text" id="orangeDateOfBirthForm" name="orangeDateOfBirthForm" class="form-control validate" required>
<label data-error="wrong" data-success="right" for="orangeForm-email">Date of Birth</label>
If datepicker does not work due to conflict jquery, then try this way. It will work.
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
(function($){"use strict";
var $window=$(window)
var datepick=$('.date-pick')
if($(datepick).length){$(datepick).datepicker({format:"dd/mm/yyyy"});}
})(jQuery);
});
</script>
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script> <!-- datepicker js-->
There is no conflict with using jQuery and Datepicker together.
This error - "$().datepicker is not a function" - is almost always a conflict because of a second instance of jQuery being loaded.
Look for a second instance of jQuery being loaded somewhere.
I have gone through all your js files.
Noted that you are using AdminLTe for your js and css.
In that case, check again the the example in Forms > Advanced Elements in left panel.
I think you missed out the bootstrap datepicker: Try searching for this js file in AdminLTe Example: <link rel="stylesheet" href="../../plugins/datepicker/datepicker3.css">
Inclue JqueryUI
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Angular use ng-include to include a template that include others

i'm trying in my app to include a template (already shown) that include other template.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tasks Overview</title>
<!-- Angular framework -->
<script src="assets/js/angular.min.js"></script>
<!-- Main module -->
<script src="app.js"></script>
<!-- Components -->
<!-- Services -->
<script src="app/components/logger/logger-service.js"></script>
<script src="app/components/resource/resource-service.js"></script>
<script src="app/components/integrity_check/integrity_check-service.js"></script>
<script src="app/components/date_utilities/month_translation_utility-service.js"></script>
<!-- History -->
<script src="app/components/history/history-controller.js"></script>
<!-- Period -->
<script src="app/components/period/period-controller.js"></script>
<script src="app/components/period/directives/year_picker/year_picker-directive.js"></script>
<script src="app/components/period/directives/month_picker/month_picker-directive.js"></script>
<!-- Shell -->
<script src="app/components/shell/shell-controller.js"></script>
<!-- Calendar -->
<script src="app/components/calendar/directives/day/day-directive.js"></script>
<script src="app/components/calendar/calendar-controller.js"></script>
<!-- UI libraries -->
<link rel="stylesheet" type="text/css" href="assets/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/system.css">
<script src="assets/js/jquery-3.1.0.min.js"></script>
<script src="assets/js/materialize.min.js"></script>
<!-- Task entities -->
<script src="app/components/task/task-controller.js"></script>
<script src="app/components/task/tasks-service.js"></script>
<!-- Main -->
<script src="app/components/main/main-controller.js"></script>
<!-- Google material icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- External libraries -->
<script src="assets/js/FileSystem.js"></script>
</head>
<body ng-app="wtd">
<!--History component-->
<div id="history" ng-include="'app/components/history/history_main-view.html'" ng-controller="historyController as vm"></div>
<!--Period component-->
<div id="period" ng-include="'app/components/period/period_main-view.html'" ng-controller="periodController as vm"></div>
<!--Calendar component-->
<div id="calendar" ng-include="'app/components/calendar/calendar_main-view.html'" ng-controller="calendarController as vm"></div>
<!--Shell component-->
<div id="shell" ng-include="'app/components/shell/shell_main-view.html'" ng-controller="shellController as vm"></div>
<!--Main controller-->
<div id="main" ng-controller="mainController"></div>
</body>
</html>
calendar_main-view.html
<div class="col l10 offset-l1 m10 offset-m1 s10 offset-s1">
<!-- List view mode -->
<div ng-if="view.mode.list" ng-include="app/components/calendar/calendar_list-view.html">
</div>
<!-- Grid view mode -->
<div ng-if="view.mode.grid" ng-include="app/components/calendar/calendar_grid-view.html"></div>
</div>
Problem appear on the second level of ng-include (file calendar_grid-view.html). No one xhr call is done by browser to include the file.
What's wrong?
You are missing single quote.
<div ng-if="view.mode.list" ng-include="'app/components/calendar/calendar_list-view.html'">
<div ng-if="view.mode.grid" ng-include="'app/components/calendar/calendar_grid-view.html'"></div>
Make sure view.mode.list and view.mode.grid evaluted to truthy in order to display html.

Javascript files clashing, please suggest changes

I am making a view page out of html code and source files of 2 bootstrap templates. Both templates are using different java script files to different features. As i am using both js files in 1 html view page, features of one js file is not working.
Two js files i am using are: jquery-2.1.1.min.js and jQuery-2.1.4.min.js
Please suggest some alternative or any way out to combine both these files in single so that all features are working.
<!-- jQuery 2.1.4 -->
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- jQuery UI 1.11.2 -->
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js" type="text/javascript"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.2 JS -->
<!-- Morris.js charts -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="plugins/morris/morris.min.js" type="text/javascript"></script>
<!-- Sparkline -->
<script src="plugins/sparkline/jquery.sparkline.min.js" type="text/javascript"></script>
<!-- jvectormap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js" type="text/javascript"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script>
<!-- jQuery Knob Chart -->
<script src="plugins/knob/jquery.knob.js" type="text/javascript"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js" type="text/javascript"></script>
<script src="plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<!-- datepicker -->
<script src="plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<!-- FastClick -->
<script src='plugins/fastclick/fastclick.min.js'></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js" type="text/javascript"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard.js" type="text/javascript"></script>
<!-- AdminLTE for demo purposes -->
<!-- start: MAIN JAVASCRIPTS -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<script src="assets/plugins/excanvas.min.js"></script>
<script type="text/javascript" src="assets/plugins/jQuery/jquery-1.11.1.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="assets/plugins/jQuery/jquery-2.1.1.min.js"></script>
<!--<![endif]-->
<script src="assets/plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/blockUI/jquery.blockUI.js"></script>
<script src="assets/plugins/iCheck/jquery.icheck.min.js"></script>
<script src="assets/plugins/moment/min/moment.min.js"></script>
<script src="assets/plugins/perfect-scrollbar/src/jquery.mousewheel.js"></script>
<script src="assets/plugins/perfect-scrollbar/src/perfect-scrollbar.js"></script>
<script src="assets/plugins/bootbox/bootbox.min.js"></script>
<script src="assets/plugins/jquery.scrollTo/jquery.scrollTo.min.js"></script>
<script src="assets/plugins/ScrollToFixed/jquery-scrolltofixed-min.js"></script>
<script src="assets/plugins/jquery.appear/jquery.appear.js"></script>
<script src="assets/plugins/jquery-cookie/jquery.cookie.js"></script>
<script src="assets/plugins/velocity/jquery.velocity.min.js"></script>
<script src="assets/plugins/TouchSwipe/jquery.touchSwipe.min.js"></script>
<!-- end: MAIN JAVASCRIPTS -->
<!-- start: JAVASCRIPTS REQUIRED FOR SUBVIEW CONTENTS -->
<script src="assets/plugins/owl-carousel/owl-carousel/owl.carousel.js"></script>
<script src="assets/plugins/jquery-mockjax/jquery.mockjax.js"></script>
<script src="assets/plugins/toastr/toastr.js"></script>
<script src="assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
<script src="assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
<script src="assets/plugins/fullcalendar/fullcalendar/fullcalendar.min.js"></script>
<script src="assets/plugins/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
<script src="assets/plugins/bootstrap-select/bootstrap-select.min.js"></script>
<script src="assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="assets/plugins/bootstrap-fileupload/bootstrap-fileupload.min.js"></script>
<script src="assets/plugins/DataTables/media/js/jquery.dataTables.min.js"></script>
<script src="assets/plugins/truncate/jquery.truncate.js"></script>
<script src="assets/plugins/summernote/dist/summernote.min.js"></script>
<script src="assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/js/subview.js"></script>
<script src="assets/js/subview-examples.js"></script>
<!-- end: JAVASCRIPTS REQUIRED FOR SUBVIEW CONTENTS -->
<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script src="assets/plugins/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<script src="assets/plugins/nvd3/lib/d3.v3.js"></script>
<script src="assets/plugins/nvd3/nv.d3.min.js"></script>
<script src="assets/plugins/nvd3/src/models/historicalBar.js"></script>
<script src="assets/plugins/nvd3/src/models/historicalBarChart.js"></script>
<script src="assets/plugins/nvd3/src/models/stackedArea.js"></script>
<script src="assets/plugins/nvd3/src/models/stackedAreaChart.js"></script>
<script src="assets/plugins/jquery.sparkline/jquery.sparkline.js"></script>
<script src="assets/plugins/easy-pie-chart/dist/jquery.easypiechart.min.js"></script>
<script src="assets/js/index.js"></script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<!-- start: CORE JAVASCRIPTS -->
<script src="assets/js/main.js"></script>
<!-- end: CORE JAVASCRIPTS -->
<script>
jQuery(document).ready(function() {
Main.init();
SVExamples.init();
Index.init();
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AdminLTE 2 | Dashboard</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- Bootstrap 3.3.4 -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- FontAwesome 4.3.0 -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons 2.0.0 -->
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link href="dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
<!-- iCheck -->
<link href="plugins/iCheck/flat/blue.css" rel="stylesheet" type="text/css" />
<!-- Morris chart -->
<link href="plugins/morris/morris.css" rel="stylesheet" type="text/css" />
<!-- jvectormap -->
<link href="plugins/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
<!-- Date Picker -->
<link href="plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
<!-- Daterange picker -->
<link href="plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<!-- bootstrap wysihtml5 - text editor -->
<link href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,500,600,700,200,100,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/plugins/iCheck/skins/all.css">
<link rel="stylesheet" href="assets/plugins/perfect-scrollbar/src/perfect-scrollbar.css">
<link rel="stylesheet" href="assets/plugins/animate.css/animate.min.css">
<!-- end: MAIN CSS -->
<!-- start: CSS REQUIRED FOR SUBVIEW CONTENTS -->
<link rel="stylesheet" href="assets/plugins/owl-carousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="assets/plugins/owl-carousel/owl-carousel/owl.theme.css">
<link rel="stylesheet" href="assets/plugins/owl-carousel/owl-carousel/owl.transitions.css">
<link rel="stylesheet" href="assets/plugins/summernote/dist/summernote.css">
<link rel="stylesheet" href="assets/plugins/fullcalendar/fullcalendar/fullcalendar.css">
<link rel="stylesheet" href="assets/plugins/toastr/toastr.min.css">
<link rel="stylesheet" href="assets/plugins/bootstrap-select/bootstrap-select.min.css">
<link rel="stylesheet" href="assets/plugins/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css">
<link rel="stylesheet" href="assets/plugins/DataTables/media/css/DT_bootstrap.css">
<link rel="stylesheet" href="assets/plugins/bootstrap-fileupload/bootstrap-fileupload.min.css">
<link rel="stylesheet" href="assets/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css">
<!-- end: CSS REQUIRED FOR THIS SUBVIEW CONTENTS-->
<!-- start: CSS REQUIRED FOR THIS PAGE ONLY -->
<link rel="stylesheet" href="assets/plugins/weather-icons/css/weather-icons.min.css">
<link rel="stylesheet" href="assets/plugins/nvd3/nv.d3.min.css">
<!-- end: CSS REQUIRED FOR THIS PAGE ONLY -->
<!-- start: CORE CSS -->
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/styles-responsive.css">
<link rel="stylesheet" href="assets/css/plugins.css">
<link rel="stylesheet" href="assets/css/themes/theme-style8.css" type="text/css" id="skin_color">
<link rel="stylesheet" href="assets/css/print.css" type="text/css" media="print"/>
<!-- end: CORE CSS -->
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body class="skin-blue sidebar-mini">
<div class="wrapper">
content
</div>
<!-- jQuery 2.1.4 -->
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- jQuery UI 1.11.2 -->
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js" type="text/javascript"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.2 JS -->
<!-- Morris.js charts -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="plugins/morris/morris.min.js" type="text/javascript"></script>
<!-- Sparkline -->
<script src="plugins/sparkline/jquery.sparkline.min.js" type="text/javascript"></script>
<!-- jvectormap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js" type="text/javascript"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script>
<!-- jQuery Knob Chart -->
<script src="plugins/knob/jquery.knob.js" type="text/javascript"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js" type="text/javascript"></script>
<script src="plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<!-- datepicker -->
<script src="plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
<!-- Slimscroll -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<!-- FastClick -->
<script src='plugins/fastclick/fastclick.min.js'></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js" type="text/javascript"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard.js" type="text/javascript"></script>
<!-- AdminLTE for demo purposes -->
<!-- start: MAIN JAVASCRIPTS -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<script src="assets/plugins/excanvas.min.js"></script>
<script type="text/javascript" src="assets/plugins/jQuery/jquery-1.11.1.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="assets/plugins/jQuery/jquery-2.1.1.min.js"></script>
<!--<![endif]-->
<script src="assets/plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/blockUI/jquery.blockUI.js"></script>
<script src="assets/plugins/iCheck/jquery.icheck.min.js"></script>
<script src="assets/plugins/moment/min/moment.min.js"></script>
<script src="assets/plugins/perfect-scrollbar/src/jquery.mousewheel.js"></script>
<script src="assets/plugins/perfect-scrollbar/src/perfect-scrollbar.js"></script>
<script src="assets/plugins/bootbox/bootbox.min.js"></script>
<script src="assets/plugins/jquery.scrollTo/jquery.scrollTo.min.js"></script>
<script src="assets/plugins/ScrollToFixed/jquery-scrolltofixed-min.js"></script>
<script src="assets/plugins/jquery.appear/jquery.appear.js"></script>
<script src="assets/plugins/jquery-cookie/jquery.cookie.js"></script>
<script src="assets/plugins/velocity/jquery.velocity.min.js"></script>
<script src="assets/plugins/TouchSwipe/jquery.touchSwipe.min.js"></script>
<!-- end: MAIN JAVASCRIPTS -->
<!-- start: JAVASCRIPTS REQUIRED FOR SUBVIEW CONTENTS -->
<script src="assets/plugins/owl-carousel/owl-carousel/owl.carousel.js"></script>
<script src="assets/plugins/jquery-mockjax/jquery.mockjax.js"></script>
<script src="assets/plugins/toastr/toastr.js"></script>
<script src="assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
<script src="assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script>
<script src="assets/plugins/fullcalendar/fullcalendar/fullcalendar.min.js"></script>
<script src="assets/plugins/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
<script src="assets/plugins/bootstrap-select/bootstrap-select.min.js"></script>
<script src="assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="assets/plugins/bootstrap-fileupload/bootstrap-fileupload.min.js"></script>
<script src="assets/plugins/DataTables/media/js/jquery.dataTables.min.js"></script>
<script src="assets/plugins/truncate/jquery.truncate.js"></script>
<script src="assets/plugins/summernote/dist/summernote.min.js"></script>
<script src="assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/js/subview.js"></script>
<script src="assets/js/subview-examples.js"></script>
<!-- end: JAVASCRIPTS REQUIRED FOR SUBVIEW CONTENTS -->
<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script src="assets/plugins/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<script src="assets/plugins/nvd3/lib/d3.v3.js"></script>
<script src="assets/plugins/nvd3/nv.d3.min.js"></script>
<script src="assets/plugins/nvd3/src/models/historicalBar.js"></script>
<script src="assets/plugins/nvd3/src/models/historicalBarChart.js"></script>
<script src="assets/plugins/nvd3/src/models/stackedArea.js"></script>
<script src="assets/plugins/nvd3/src/models/stackedAreaChart.js"></script>
<script src="assets/plugins/jquery.sparkline/jquery.sparkline.js"></script>
<script src="assets/plugins/easy-pie-chart/dist/jquery.easypiechart.min.js"></script>
<script src="assets/js/index.js"></script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<!-- start: CORE JAVASCRIPTS -->
<script src="assets/js/main.js"></script>
<!-- end: CORE JAVASCRIPTS -->
<script>
jQuery(document).ready(function() {
Main.init();
SVExamples.init();
Index.init();
});
</script>
</body>
<!-- end: BODY -->
</html>
Use only jQuery-2.1.4.min.js and in addition to this you may need to use Jquery.migrate.js.
Basically, This plugin can be used to detect and restore APIs or features that have been deprecated in jQuery previous versions than this. So you will be able to access both the jquery file methods.
Your code will look like this then:
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

Categories