jquery - Javascript files clashing, please suggest changes -


i making view page out of html code , source files of 2 bootstrap templates. both templates using different java script files different features. using both js files in 1 html view page, features of 1 js file not working.

two js files using are: jquery-2.1.1.min.js , jquery-2.1.4.min.js

please suggest alternative or way out combine both these files in single features 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 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 demo purposes) -->      <script src="dist/js/pages/dashboard.js" type="text/javascript"></script>                <!-- adminlte 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 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 subview contents -->  		<!-- start: javascripts required page -->  		<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 page -->  		<!-- 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 skin css/skins            folder instead of downloading of them reduce 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 , respond.js ie8 support of html5 elements , media queries -->      <!-- warning: respond.js doesn't work if view 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 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 subview contents-->  		<!-- start: css required page -->  		<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 page -->  		<!-- 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 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 demo purposes) -->      <script src="dist/js/pages/dashboard.js" type="text/javascript"></script>                <!-- adminlte 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 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 subview contents -->  		<!-- start: javascripts required page -->  		<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 page -->  		<!-- 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 jquery-2.1.4.min.js , in addition may need use jquery.migrate.js.

basically, plugin can used detect , restore apis or features have been deprecated in jquery previous versions this. able access both jquery file methods.

your code 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> 

Comments

Popular posts from this blog

Android : Making Listview full screen -

javascript - Parse JSON from the body of the POST -

javascript - Chrome Extension: Interacting with iframe embedded within popup -