Question

在包含引导进度条的页面上，我收到错误：

$（...）。progressbar不是函数

这个错误似乎正在崩溃我的其余脚本，因为我看到了：

Typeahead在同一页面上不起作用我收到以下错误：

没有定义猎犬

Bootstrap-select不起作用
网页模板不起作用

有趣的是，如果我的enable.optimization设置为false，我的其他脚本都不会崩溃。

以下是进度条的HTML和javascript：

function UpdateProgress(totalRecords, recordsProcessed, message) {

   var pct = recordsProcessed / totalRecords * 100;
   $('.progress-bar').css('width', pct + '%').attr('aria-valuenow', pct);

   $('#message').text(message);

   var msg = Math.round(pct, 2) + '% Complete';
   $('.progText').text(msg);

   if (pct > 0) {
     $('#progressRow').show();
   }

   if (pct == 100) {
     $('#progressRow').hide();
   }
 }


<div id="progressRow" class="row" >
  <div class="form-group">
    <div class="col-md-offset-2 col-sm-offset-2 col-md-10 col-sm-10 col-xs-12">
      <label id="message"></label>
      <div class="progress" style="height: 30px">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
          <span class="progText"></span>
        </div>
      </div>
    </div>
  </div>
</div>

以下是我的bundleConfig文件：

 bundles.Add(new ScriptBundle("~/Scripts/jquery").Include(
                "~/Scripts/jquery.min.js"
            ));

        bundles.Add(new StyleBundle("~/Content/core").Include(
            "~/Content/bootstrap.min.css",
            "~/Content/animate.min.css",
            "~/Content/custom.min.css",
            "~/Content/font-awesome.min.css",
            "~/Content/green.css",
            "~/Content/outline.button.css",
            "~/Content/bootstrap-datepicker.min.css",
            "~/Content/Pagination.css",
            "~/Content/animation.css",
            "~/Content/jBox.css",
            "~/Content/SpinnerOverLay.css",
            "~/Content/bootstrap-select.min.css",
            "~/Content/typeahead.css",
            "~/Content/icheck/square/green.css",
            "~/Content/icheck/green.css"
            ));

        bundles.Add(new StyleBundle("~/Content/login").Include(
            "~/Content/bootstrap.min.css",
            "~/Content/font-awesome.min.css",
            "~/Content/animate.min.css",
            "~/Content/custom.min.css",
            "~/Content/green.css",
            "~/Content/animation.css",
            "~/Content/jBox.css",
            "~/Content/SpinnerOverLay.css"

            ));

        bundles.Add(new ScriptBundle("~/Scripts/core").Include(
                "~/Scripts/bootstrap.min.js",
                "~/Scripts/custom.min.js",
                "~/Scripts/nprogress.min.js",
                "~/Scripts/bootstrap-datepicker.min.js",
                "~/Scripts/jquery.bpopup.min.js",
                "~/Scripts/bootstrap-select.min.js",
                "~/Scripts/typeahead.min.js",
                "~/Scripts/icheck/icheck.min.js"
            ));

        bundles.Add(new ScriptBundle("~/Scripts/login").Include(
                "~/Scripts/jquery.bpopup.min.js"
            ));

        bundles.Add(new ScriptBundle("~/Scripts/SignalR").Include(
                "~/Scripts/jquery.signalR-2.2.0.min.js"
            ));
        BundleTable.EnableOptimizations = false;

这就是css中引用js和masterPage文件的方式：

<head runat="server">
<title>Stores</title>
<%: System.Web.Optimization.Styles.Render("~/Content/core") %>

<%: System.Web.Optimization.Scripts.Render("~/Scripts/jquery") %>

    <%:System.Web.Optimization.Scripts.Render("~/Scripts/core") %>
<script src="/Scripts/notify/pnotify.buttons.min.js"></script>
<script src="/Scripts/notify/pnotify.core.min.js"></script>
<script src="/Scripts/notify/pnotify.nonblock.min.js"></script>

<script src="/Scripts/init.controls.js"></script>
<script src="/Scripts/showDisplayModalSetup.js"></script>
<script src="/Scripts/client.validation.js"></script>

Answer 1

我认为它的工作正常。

您应该正确包含这些库：

首先： Jquery.js

第二名： Bootstrap.js

如下图所示

function UpdateProgress(totalRecords, recordsProcessed, message) {

  var pct = recordsProcessed / totalRecords * 100;
  $('.progress-bar').css('width', pct + '%').attr('aria-valuenow', pct);

  $('#message').text(message);

  var msg = Math.round(pct, 2) + '% Complete';
  $('.progText').text(msg);

  if (pct > 0) {
    $('#progressRow').show();
  }

  if (pct == 100) {
    $('#progressRow').hide();
  }
}

UpdateProgress(100, 99, 'Loading')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div id="progressRow" class="row" >
  <div class="form-group">
    <div class="col-md-offset-2 col-sm-offset-2 col-md-10 col-sm-10 col-xs-12">
      <label id="message"></label>
      <div class="progress" style="height: 30px">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
          <span class="progText"></span>
        </div>
      </div>
    </div>
  </div>
</div>

请告诉我，如果我错过任何事情。

Answer 2

我认为解决方案是使用BundleTable.Bundles.ResolveBundleUrl()作为答案：ASP.NET Bundles how to disable minification

Answer 3

由于gantellela alella引导程序脚本而出现此问题：

即：

    // Progressbar
if ($(".progress .progress-bar")[0]) {
    $('.progress .progress-bar').progressbar(); // bootstrap 3
}

上面的代码会抛出错误。

Answer 4

您的代码没问题，您需要重新考虑您的图书馆订单并添加所需的所有必需.js和css个文件。例如，如果您使用的是Asp.net MVC，那么添加文件ass跟随

@Styles.Render("~/Content/bootstrap.min.css")

在_Layout.cshtml头部

@Scripts.Render("~/Scripts/bootstrap.min.js")

在</footer>

之后的身体中

和

<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="~/Content/themes/base/jquery-ui.css" type="text/css"/>
<script src="~/Scripts/jquery-ui-1.11.4.js"></script>
other js files...

在当前@section Scripts页面的cshtml部分。

进度条不是功能

4 个答案: