4

On a page with bootstrap progress bar i am getting an error:

$(...).progressbar is not a function

This error seems to be crashing the rest of my scripts as i see that:

  1. Typeahead does not work on the same page I am getting the following error:

Bloodhound is not defined

  1. Bootstrap-select does not work
  2. Web template does not work

The funny thing is that the rest of my scripts do not crash if my enable.optimization is set to false.

Below is my HTML and javascript for the progress bar:

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>

Below is my bundleConfig file:

 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;

And this is how the css and js files are referenced in the 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>
JustLearning
  • 3,164
  • 3
  • 35
  • 52
  • You are mentioning about loading scripts via bundle and getting error? please elaborate that point – naveen Aug 02 '16 at 09:13
  • i am using asp optimization option - bundling and minification. So i have created my bundles and referenced them in my sitemaster. The site works perfectly when enable.optimization is set to false. But as soon as i enable optimization i am faced with the above described scenario – JustLearning Aug 02 '16 at 09:41
  • Do you have the latest jquery and bootstrap versions? Jquery 2.2 and Bootstrap 3.3? – Luuk Skeur Aug 08 '16 at 11:57
  • yes i tried the latest jquery and bootstrap, does not work as well – JustLearning Aug 08 '16 at 12:37
  • It is order matter only You must order css and js links properly. – Hamied Feb 07 '17 at 12:48

4 Answers4

2

I think its working fine.

You should include the libraries properly:

First: Jquery.js

Second: Bootstrap.js

as shown in below

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>

Just let me know, if i missed anything.

Sankar
  • 6,908
  • 2
  • 30
  • 53
  • I am using local bootstrap and jquery css and script files, and they are both included in the site master. Surely, if the files are not being referenced properly bootstrap would not work at all. May be i am missing something here. I added an edit the question and included my sitemaster and bundle config files – JustLearning Aug 02 '16 at 09:30
2

This problem occured because of the gantellela alella bootstrap scripts:

namely:

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

The above code throws the error.

JustLearning
  • 3,164
  • 3
  • 35
  • 52
1

your code is alright you need to reconsider your order of your libraries and add all required .js and css files required. for example if you are using Asp.net MVC then add files ass follows

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

in _Layout.cshtml head portion

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

in body after </footer>

and 

<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...

in @section Scripts section on current cshtml page.

Touseef Ahmed Awan
  • 339
  • 3
  • 8
0

I believe the solution is to use BundleTable.Bundles.ResolveBundleUrl() as answered here: ASP.NET Bundles how to disable minification

Community
  • 1
  • 1
Jesse Suero
  • 21
  • 1
  • 3