I am trying to launch simple example of collapse but it do not work. Nothing happens when i am clicking on button "Toggle collapse". In console i have no errors. But in visual studio i have only one warning. What is wrong how to fix it?
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
#* Here ng-app="MyApp" is used for auto-bootstrap an AngularJS application. here ng-app="MyApp" means <body> element is the owner
of AngularJS application*#
<body ng-app="MyApp">
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#* Add Angular Library Here *#
#Scripts.Render("~/bundles/angular")
<script src="~/Scripts/MyApp.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
BundleConfig.cs
using System.Web;
using System.Web.Optimization;
namespace AngularJs2
{
public class BundleConfig
{
// For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/angular").Include(
"~/Scripts/angular.js",
"~/Scripts/angular-route.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
}
}
}
MyApp.js
(function () {
//Create a Module
var app = angular.module('MyApp', ['ngRoute']); // Will use ['ng-Route'] when we will implement routing
//Create a Controller
app.controller('CollapseDemoCtrl', function ($scope) {
$scope.isCollapsed = false;
});
})();
Index.cshtml
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<div ng-controller="CollapseDemoCtrl">
<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr>
<div uib-collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
Might you have forgotten ui.bootstrap dependency
var app = angular.module('MyApp', ['ngRoute', 'ui.bootstrap']);
It looks like you haven't loaded the ui.bootstrap and loaded the proper files.
Try installing angular-ui using bower or npm and make sure too add ui.bootstrap as a dependency to your app (in MyApp.js, in the same way as you added ngRoute as a dependency). Add the installed library to your bundle-config (angular). Check in your console that all the required javascript files and css files are loded (
Then the uib-collapse will work.
If you don't want to do all the hazzle of adding this library to your project; you can always make your own "collapsable" (in this case) by changing the uib-collapse="collapsed" to ng-show="collapsed". Which will behave the same way for this case.
Your module is missing these statement and make sure your javascript references are correct:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
Related
When I try to bundle my CSS and javascript, my javascript and CSS effects do not seem to work. I am using the js files and CSS files normally as in ASP.NET Web Forms.
I have kept my CSS and js files only in below code
<link rel="stylesheet" href="~/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="~/dist/css/adminlte.min.css">
<!-- REQUIRED SCRIPTS -->
<script src="~/plugins/jquery/jquery.min.js"></script>
<script src="~/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/dist/js/adminlte.js"></script>
<script src="~/plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="~/dist/js/pages/dashboard3.js"></script>
#RenderSection("scripts", required: false)
Here is the bundle config class
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
}
How can I bundle my js files and CSS files?
Also, I have referenced the jquery validate js file, still validation is not working in my pages. What is the problem?
Please see the attached image for file structure.
This is is how I would do it for your setup.
Make sure you have installed the nuget package Microsoft.AspNet.Web.Optimization.
Here is the edited BundleConfig
public static class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/bundles/allcss")
.Include("~/plugins/fontawesome-free/css/all.min.css")
.Include("~/dist/css/adminlte.min.css"));
bundles.Add(new ScriptBundle("~/bundles/alljs")
.Include("~/plugins/jquery/jquery.min.js")
.Include("~/plugins/bootstrap/js/bootstrap.bundle.min.js")
.Include("~/dist/js/adminlte.js")
.Include("~/plugins/jquery-validation/jquery.validate.min.js")
.Include("~/dist/js/pages/dashboard3.js"));
}
}
The global.asax
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
BundleConfig.RegisterBundles(BundleTable.Bundles);
//other unrelated code
}
}
Relevant parts of _Layout.cshtml
Note you don't have to put the Render calls in the _layout.cshtml but this is the standard place for most apps.
#using System.Web.Optimization
<!DOCTYPE html>
<html>
<head>
#Styles.Render("~/bundles/allcss")
</head>
<body>
#Scripts.Render("~/bundles/alljs")
#RenderSection("scripts", required: false)
</body>
I believe you also need to put jquery.validate.unobtrusive.js after jquery.validate.js. Ensure you have added the correct settings in your web.config
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
<!--other settings-->
</appSettings>
See this for more explanation
I am new to bootstrap and jquery. I'm trying to use datatables feature like sorting , while I run my codes I get this error in console:
uncaught SyntaxError: Unexpected token export at popper.js:2371
my popper.js version is: 1.14.3
and I render it in my layout like this :
<body>
#Html.Partial("_navbar")
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year -www.vidly.com #*My ASP.NET Application*#</p>
</footer>
</div>
#* #Scripts.Render("~/bundles/lib")*#
#Scripts.Render("~/Scripts/jquery-3.3.1.js")
#Scripts.Render("~/Scripts/DataTables/jquery.dataTables.min.js")
#Scripts.Render("~/Scripts/DataTables/dataTables.bootstrap4.min.js")
#Scripts.Render("~/Scripts/popper.js")
#Scripts.Render("~/Scripts/bootstrap.js")
#Scripts.Render("~/Scripts/bootbox.js")
#Scripts.Render("~/Scripts/respond.js")
#Scripts.Render("~/Scripts/DataTables/jquery.dataTables.js")
#Scripts.Render("~/Scripts/DataTables/DataTables.bootstrap.js")
#*#Styles.Render("~/Content/css")*#
#RenderSection("scripts", required: false)
</body>
and the picture of my browser,
Here I have 2 question :1.why I get this error :
uncaught SyntaxError: Unexpected token export at popper.js:2371
2.Why datatables feature like pages number and sorting methods are irregular in my browser.(as you have seen in picture )
this is my css bundles :
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap-lumen.css",
"~/Content/DataTables/css/dataTables.bootstrap.css",
"~/Content/site.css"));
I render it in my _layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#*#Scripts.Render("~/bundles/lib")*#
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#Html.Partial("_navbar")
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year -www.vidly.com #*My ASP.NET Application*#</p>
</footer>
</div>
#Scripts.Render("~/bundles/lib")
#RenderSection("scripts", required: false)
</body>
</html>
TIA
Unexpected token export at popper.js on bundling indicates that Popper library requires UMD build version of corresponding JS file, which wrongly set here (probably you're using ESNext version):
#Scripts.Render("~/Scripts/popper.js")
The UMD version import is necessary since we want to import it with <script> tag generated by bundling mechanism (System.Web.Optimization) as written in official page.
If you want to import it with a <script> tag, use UMD.
Here are those steps to use UMD version with MVC bundling:
1) Get UMD version from dist package here: https://unpkg.com/popper.js#1.14.4/dist/umd/
2) Save the UMD package inside /Scripts/umd folder.
3) Create JS bundles in RegisterBundles() method with specified paths like example below:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-*",
// other jQuery scripts here
));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/umd/popper.js", // set to UMD version
"~/Scripts/bootstrap.js",
"~/Scripts/bootbox.js",
"~/Scripts/respond.js",
// other Bootstrap scripts here
));
4) Use #Scripts.Render() helper in layout page to include them (note that the script order matters):
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
Note: If you're looking for ESNext version of Popper.js compared with UMD version, you will see this header in latter which not exist in former:
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.Popper = factory());
}(this, (function () {
// skipped for brevity
})));
The function( global, factory ) enables Popper to get injected into global scope using <script> tag reference, which becomes possible reason of UMD bundle usage.
About your second issue, sounds like the CSS files are not included properly. Refer to Bundling and Minification section to import CSS bundles.
Related issues:
How to use Popper.js with Bootstrap 4 beta
popper.js in bootstrap 4 gives SyntaxError Unexpected token export
I'm using ASP.NET Web Forms with master pages. There are so many moving parts to this that I cannot figure it out. Different tutorials use different parts of it and omit others, that I cannot determine what is needed and what is fluff.
Different Parts:
Master Pages: In the head section for my CSS I have:
<link href="Content/css" rel="stylesheet" />
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
Before closing body tag, I have:
<script src="<%= ResolveUrl("~") %>Scripts/jquery-2.1.1.js"></script>
<script src="<%= ResolveUrl("~") %>Scripts/bootstrap.min.js"></script>
<script src="<%= ResolveUrl("~") %>Scripts/jquery.reject.js"></script>
<script src="<%= ResolveUrl("~") %>Scripts/general.js"></script>
Looks like the min one is not needed, but do I need any of these and instead use
<script src="Scripts/js"></script> ?
Global.asax.cs: this seems simple enough, registering the bundles in Application_Start method.
void Application_Start(object sender, EventArgs e)
{
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
Web.config:
I added the System.Web.Optimization namespace and the Microsoft.AspNet.Web.Optimization.WebForms assembly.
Bundle.config: I have no idea what this is for; many tutorials don't even mention it?
BundleConfig.cs: As well as the standard WebFormsJs, MsAjaxJs and modernizr custom bundles, I have the following for CSS:
bundles.Add(new StyleBundle("~/bundles/css").Include(
"~/Content*"));
This is not working. I was about to add something similar for my JS files but got confused as to why I am doing this at all when according to this tutorial, all I needed for the CSS was:
<link href="Content/css" rel="stylesheet" />
Presumably, all I needed for my JS files was:
<script src="Scripts/js"></script>
In some tutorials I have seen ScriptManager.ScriptResourceMapping.AddDefinition - what is this for?
Here is the current state of my CSS and Scripts folders - I need all the non-minifed versions of these:
http://imgur.com/XwqIOKl
http://imgur.com/q8IdhmB
Can someone help me piece this together? I am running locally with debug set to false.
Below is a list of each of the sections that need to be configured for Bundling and Minification in WebForms.
This is taken from a production code base which is running Bundling and Minification.
Libraries:
Microsoft.AspNet.Web.Optimization
Dependencies:
WebGrease
Microsoft.Web.Infrastructure (depending on version)
Global.asax
void Application_Start(object sender, EventArgs e)
{
BundleConfig.RegisterBundles(BundleTable.Bundles);
//Use this if you want to force/test bundling in debug.
BundleTable.EnableOptimizations = true;
}
BundleConfig class
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/sitejs")
//Add as many JS libraries you would like to the bundle...
.Include("~/Scripts/jquery-3.1.1.js")
.Include("~/Scripts/jquery-migrate-3.0.0.js")
);
bundles.Add(new StyleBundle("~/bundles/sitecss")
//Add as many CSS files that you would like to the bundle...
.Include("~/css/jquery-ui.css")
);
}
}
Master Page:
<!-- At the top of the Master Page -->
<%# Import Namespace="System.Web.Optimization" %>
<!-- Just after the closing `</form>` tag -->
<asp:PlaceHolder runat="server">
<%: Styles.Render("~/bundles/sitecss") %
<%: Scripts.Render("~/bundles/sitejs") %
</asp:PlaceHolder>
I have an MVC application that gives the above error. the application defaulted to referencing jquery-1.8.2.js in the Scripts folder. With NuGet, I added jquery-ui-1.11.4.js.
Here are the relevant code sections:
BundleConfig.cs:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
}
}
}
_Layout.cshmtl:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/themes/base/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
<script src="#Url.Content("~/Scripts/FloatingDiv.js")"></script>
And the view where the datepicker lives:
#using (Html.BeginForm())
{
<div class="container">
<div class="left-third">
<label for="Company">Company:</label>
#Html.DropDownList("Company")
</div>
<div class="middle-third" style="padding-left:20px">
<label for="StartDate">Start Date:</label>
#Html.TextBox("StartDate", null, new { #class = "datefield input-box" })
</div>
<div class="right-third" style="padding-left:20px">
<label for="EndDate">End Date:</label>
#Html.TextBox("EndDate", null, new { #class = "datefield input-box" })
</div>
</div>
<br />
<br />
<br />
<div style="width:100%;text-align:center">
<input class="button" type="submit" value="Generate Report" />
</div>
}
<script type="text/javascript">
$(function () {
$('.datefield').datepicker();
});
I have tried referencing the scripts with a script tag and using the #Url.Content function for all the various scripts, for example:
<script src="#Url.Content("~/Scripts/jquery-ui-1.11.4.js")"></script>
I have tried the "Networking" tab of the developer tools (F12) in IE to ensure that the scripts were loaded, and they are with a result of 200. I did notice that the
#Styles.Render("~/Content/themes/base/css")
didn't render in the networking tab. I don't know if that is relevant, but I think it just comes with the
#Styles.Render("~/Content/css")
I tried moving the script references around and the datepicker method around to no avail.
I sincerely hope one of you smart guys or gals will know what to do about this.
As nearly all of you surmised, I was doing something wrong.
I made a new project and used the #Scripts.Render to add the appropriate jquery-1.8.2.js and jquery-ui.1.8.24.js that are included with the MVC4 project and they worked fine. I did have to move the Render to the top underneath #Scripts.Render("~/bundles/modernizr").
I then went back to the original project, uninstalled jquery-ui-1.11.4.js with the NuGet Package Manager that I had mistakenly installed earlier, and manually copied the jquery-ui-1.8.24.js files and CSS sheets from the new test project to the old solution. Then, knowing that multiple copies of the script would bollix things up, I searched in the master page for 'jquery.' To nobody's surprise, there was the reference to the original file just above the </body> tag. I removed it, made sure all the bundles were referencing the correct files, that the files were there and there were no duplicates again, and everything works fine.
Thanks for putting up with my idiocy.
I'm trying to inject $uibModal into my project, however when the controller loads, I get the following error:
Error: [$injector:unpr] Unknown provider: $uibModalProvider <- $uibModal <- abilityListController
I'm using NuGet for my package management.
Angularjs: 1.4.8
Bootstrap: 3.3.6
Angular-Ui-Bootstrap: 0.14.3
Here's the relevant code:
Index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="scripts/angular.js"></script>
<script src="scripts/angular-ui/ui-bootstrap.js"></script>
<script src="app/app.js"></script>
<script src="app/homeController.js"></script>
<script src="app/abilityList/abilityListController.js"></script>
</head>
<body>
<div ng-app="tecApp">
<div ng-controller="homeController as vm">
</div>
<div ng-controller="abilityListController as vm" ng-if="true">
<div ng-include="'app/abilityList/abilityList.html'"></div>
</div>
</div>
</div>
</body>
</html>
app.js:
angular.module("tecApp", []);
AbilityListController.js:
angular
.module('tecApp')
.controller('abilityListController', AbilityListController);
AbilityListController.$inject = ['$uibModal'];
function AbilityListController($uibModal) {
var vm = {};
return vm;
}
I think I'm injecting incorrectly, but it might have to do with how i've included my source files.
I get no console errors aside from the one mentioned above.
I prefer this syntax for my angular code, so I'm hoping for a fix to my code rather than using ('controllername', ['$stuff', 'moreStuff']).
Thanks in advance for any help.
You should inject dependent module before you use it. Your code should be like this:
angular
.module('tecApp',['ui.bootstrap'])
I lost 3 hours today to figure out that "angular-bootstrap": "0.12.2" should now be "angular-ui-bootstrap": "1.1.2" in your package json.
I couldn't understand why version 1.1.2 was not found in angular-bootstrap ...
It now works like a charm !
Hope it helps ... :)
Inject ui.bootstrap module into your application module:
angular.module("tecApp", ["ui.bootstrap"])
Also you can use $modal (and maybe its even better) service from ui.bootstrap module instead of $uibModal
It worked for me. I had angularJS version 1.2.16. The compatible version of ui-bootstrap is 0.12.0. Need to google the compatible version always before using.
I try and solve my issue.
Install latest version of angular-bootstrap
npm install angular-bootstrap or bower install angular-bootstrap