stackoom
  简体   繁体   中英

Error: Bootstrap's JavaScript requires jQuery AngularJS

 原文  2016-02-03 12:28:39  2   3    jquery/ html/ angularjs

Question

I am trying to add datepicker in my code but its throwing Error: Bootstrap's JavaScript requires jQuery. Please help me to solve this error. Code works perfectly when i create separate controller in separate file. when i am trying to merge code, i am not getting how to call controller. here is my html page 

<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
    <base href="http://demos.telerik.com/kendo-ui/datepicker/angular">
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<script src="app1.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name='myform' ng-init="step = 1">
<div ng-show="step==1">
<div ng-form='step1form'>
<button type="submit" class="OptionButton" ng-disabled="!step1form.$valid" ng-click="step = 2">
<img src="SoundCloud.png" alt="Save icon"/>
<br/>
Purchase ready property
</button>
<button type="submit" class="OptionButton">
<img src="SoundCloud.png" alt="Save icon"/>
<br/>
Purchase under construction property
</button>
<button type="submit" class="OptionButton">
<img src="SoundCloud.png" alt="Save icon"/>
<br/>
Transfer my existing home loan
</button>
<button type="submit" class="OptionButton">
<img src="SoundCloud.png" alt="Save icon"/>
<br/>
Renovate my home
</button>
</div>
</div>
<div ng-show="step==2">
<div ng-form='step2form'>
            <input kendo-date-picker
             ng-model="dateString"
             k-ng-model="dateObject"
             style="width: 100%;" />
</div>
</div>
</form>
</body>
</html>

and here is my JS code 

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = '';

          $scope.monthSelectorOptions = {
            start: "year",
            depth: "year"
          };
          $scope.getType = function(x) {
            return typeof x;
          };
          $scope.isDate = function(x) {
            return x instanceof Date;
          };

});

 /*var app1 = angular.module("KendoDemos", [ "kendo.directives" ])
      app1.controller("MyCtrl", function($scope){
          $scope.monthSelectorOptions = {
            start: "year",
            depth: "year"
          };
          $scope.getType = function(x) {
            return typeof x;
          };
          $scope.isDate = function(x) {
            return x instanceof Date;
          };
      })*/

   this is the code of datepicker. its works fine but its not working on merging. 
<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/datepicker/angular">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
    <div class="demo-section k-content"ng-controller="MyCtrl">
        <div>

            <input kendo-date-picker
             ng-model="dateString"
             k-ng-model="dateObject"
             style="width: 100%;" />

        </div>

    </div>
</div>

<script>
  angular.module("KendoDemos", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){
          $scope.monthSelectorOptions = {
            start: "year",
            depth: "year"
          };
          $scope.getType = function(x) {
            return typeof x;
          };
          $scope.isDate = function(x) {
            return x instanceof Date;
          };
      })
</script>
</body>
</html>

3 answers

solution1
 0  2016-02-03 12:36:38

This line : 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

should be called just before 

<script src="app1.js"></script>

This way, JQuery will load before Bootstrap JS and you will have access to Bootstrap in your own JS.

solution2
 0  2016-02-03 13:05:39

Modify your html to receive these imports... 

<!doctype html>
<html ng-app="plunker">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />

<base href="http://demos.telerik.com/kendo-ui/datepicker/angular">

<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="app1.js"></script>
</head>
<body ng-controller="MainCtrl">
    <form name='myform' ng-init="step = 1">
        <div ng-show="step==1">
            <div ng-form='step1form'>
                <button type="submit" class="OptionButton"
                    ng-disabled="!step1form.$valid" ng-click="step = 2">
                    <img src="SoundCloud.png" alt="Save icon" /> <br /> Purchase ready
                    property
                </button>
                <button type="submit" class="OptionButton">
                    <img src="SoundCloud.png" alt="Save icon" /> <br /> Purchase under
                    construction property
                </button>
                <button type="submit" class="OptionButton">
                    <img src="SoundCloud.png" alt="Save icon" /> <br /> Transfer my
                    existing home loan
                </button>
                <button type="submit" class="OptionButton">
                    <img src="SoundCloud.png" alt="Save icon" /> <br /> Renovate my
                    home
                </button>
            </div>
        </div>
        <div ng-show="step==2">
            <div ng-form='step2form'>
                <input kendo-date-picker ng-model="dateString"
                    k-ng-model="dateObject" style="width: 100%;" />
            </div>
        </div>
    </form>
</body>
</html>

solution3
 -1  2016-02-05 11:22:51

<!doctype html>
<html ng-app="KendoDemos">
<head>
    <base href="http://demos.telerik.com/kendo-ui/datepicker/angular">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css">
    <script>document.write("<base href=\"" + document.location + "\" />");</script>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
    <script src="angular.js"></script>
</head>
<body ng-controller="MyCtrl">
<form name='myform' ng-init="step = 1">
<div ng-show="step==1">
<div class="row">
<div class="col-sm-6"> <h3>I want home loan for</h3> </div>
<div ng-form='step1form'>
<div class="col-sm-6">
<button type="submit" class="OptionButton" ng-disabled="!step1form.$valid" ng-click="step = 23">
<img src="SoundCloud.png" alt="Save icon"/>
<br/>
Purchase ready property
</button>
<button type="submit" class="OptionButton" ng-disabled="!step1form.$valid" ng-click="step = 23">
<img src="SoundCloud.png" alt="Save icon"/>
<br/>
Purchase under construction property
</button>
<button type="submit" class="OptionButton" ng-disabled="!step1form.$valid" ng-click="step = 23">
<img src="img/SoundCloud.png" alt="Save icon"/>
<br/>
Transfer my existing home loan
</button>
<button type="submit" class="OptionButton" ng-disabled="!step1form.$valid" ng-click="step = 2">
<img src="img/SoundCloud.png" alt="Save icon"/>
<br/>
Renovate my home
</button>
</div>
</div>
</div>
</div>
<div ng-show="step==23">
<div class="row">
<div class="col-sm-6"><h3>My co-applicant's monthly income is</h3></div>
<div class="col-sm-6">
<div ng-form='step23form'>
        <input kendo-date-picker
             ng-model="dateString"
             k-ng-model="dateObject"
             style="width: 100%;" />
</div>
<button ng-disabled="!step23form.$valid" ng-click="step = 24">Next</button>
</div>
</div>
</div>
</form>
<script>
  angular.module("KendoDemos", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){
          $scope.monthSelectorOptions = {
            start: "year",
            depth: "year"
          };
          $scope.getType = function(x) {
            return typeof x;
          };
          $scope.isDate = function(x) {
            return x instanceof Date;
          };
      })
</script>
</body>
</html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Error: Bootstrap's JavaScript requires jQuery Laravel - Bootstrap's JavaScript requires jQuery error Uncaught Error: Bootstrap's JavaScript requires jQuery Bootstrap error message Error: Bootstrap's JavaScript requires jQuery bootstrap javascript requires jquery error Bootstrap's javascript requires jquery error in our client side login Uncaught Error: Bootstrap's JavaScript requires jQuery on angular 4 Error: Bootstrap's JavaScript requires jQuery, using Webpack Uncaught Error: Bootstrap's JavaScript requires jQuery with requirejs Web pack build in laravel : Bootstrap's JavaScript requires jQuery error
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM