JustLearning JustLearning - 1 year ago 213
ASP.NET (C#) Question

progress bar is not a function

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>

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download