Added Bootstrap5 to my libman.json and I don't understand what to do next.
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "font-awesome#6.0.0",
"destination": "wwwroot/lib/font-awesome/"
},
{
"library": "bootstrap#5.1.3",
"destination": "wwwroot/lib/bootstrap/"
}
]
}
There is no bootstrap.min.js. What am I supposed to do? Do I need to add boostrap.css or all four of the css files?
#*<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />*#
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
What about the JS file? I guess it's needed for stuff like modals. Will I need to work out and add dependencies such as jQuery (there's no sign of any jQuery being installed anywhere) -- aren't package managers supposed to do that sort of thing for you? What is the scss folder for?
I am trying to work with jQuery's Datatable JS for my project from this link.
I downloaded the complete library from the same source. All the examples given in the package seem to work fine, but when I try to incorporate them in my WebForms,the CSS,JS do not work at all.
Here is what I have done :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="myTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<!-- table body -->
</tbody>
</table>
</div>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#myTable').DataTable();
});
</script>
</form>
</body>
</html>
My file structure for the JS and CSS in my Solution looks as follows :
I have added all the necessary JS and CSS references as shown in the manual. Still the rendering isn't as expected. There is no CSS and even the JS doesn't work.
Also in the console i get the following errors:
ReferenceError: jQuery is not defined
TypeError: $(...).DataTable is not a function
I have still not bound any dynamic data here (like within a repeater or so) still it is not working.
Can someone please guide me in the right direction for this problem ?
CAUSE
There could be multiple reasons for this error.
jQuery DataTables library is missing.
jQuery library is loaded after jQuery DataTables.
Multiple versions of jQuery library is loaded.
SOLUTION
Include only one version of jQuery library version 1.7 or newer before jQuery DataTables.
For example:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
See jQuery DataTables: Common JavaScript console errors for more information on this and other common console errors.
This worked for me. But make sure to load the jquery.js before the preferred dataTable.js file. Cheers!
<script type="text/javascript" src="~/Scripts/jquery.js"></script>
<script type="text/javascript" src="~/Scripts/data-table/jquery.dataTables.js"></script>
<script>$(document).ready(function () {
$.noConflict();
var table = $('# your selector').DataTable();
});</script>
I got this error because I found out that I referenced jQuery twice.
The first time: on the master page (_Layout.cshtml) in ASP.NET MVC, and then again on one current page so I commented out the one on the master page.
If you are using ASP.NET MVC this snippet could help you
#*#Scripts.Render("~/bundles/jquery")*#//comment this line
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
and in the current page I added these lines
<script src="~/scripts/jquery-1.10.2.js"></script>
<!-- #region datatables files -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<!-- #endregion -->
Hope this help you even if don't use ASP.NET MVC
if some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.
Sometimes it could be issue with older version (or not stable) of JQuery files
Solution use $.noConflict();
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$('#myTable').DataTable();
});
// Code that uses other library's $ can follow here.
</script>
Here is the complete set of JS and CSS required for the export table plugin to work perfectly.
Hope it will save your time
<!--Import jQuery before export.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--Data Table-->
<script type="text/javascript" src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src=" https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<!--Export table buttons-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js" ></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>
<!--Export table button CSS-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
javascript to add export buttons on the table with id = tbl
$('#tbl').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
Result :-
Same error occurs when working with DataTables in a Laravel project. Even if the following solutions are tried, the error still remains:
making sure jQuery is included
include jQuery before including the DataTables
making sure only one version of jQuery is added
In order to remove the error, after making sure the above conditions are fulfilled, add "defer" to the tag which includes the DataTables. For example,
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js" defer></script>
There can be two reasons for that error:
First
You are loding jQuery.DataTables.js before jquery.js so for that :-
You need to load jQuery.js before you load jQuery.DataTables.js
Second
You are using two versions of jQuery.js on the same page so for that :-
Try to use the higher version and make sure both links have same version of jQuery
I tried many things but my solution was adding "defer" after html script that you included datatables.
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js" defer></script>
Honestly, this took hours to get this fixed. Finally only one thing worked a reconfirmation to solution provided by "Basheer AL-MOMANI". Which is just putting statement
#RenderSection("scripts", required: false)
within _Layout.cshtml file after all <script></script> elements and also commenting the jquery script in the same file. Secondly, I had to add
$.noConflict();
within jquery function call at another *.cshtml file as:
$(document).readyfunction () {
$.noConflict();
$("#example1").DataTable();
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
});
});
I know its late
Buy can help someone
This could also happen if you don't add $('#myTable').DataTable(); inside the document.ready
So instead of this
$('#myTable').DataTable();
Try This
$(document).ready(function() {
$('#myTable').DataTable();
});
I have Added defer to the data table jquery library reference. Now it is working for me.
<script src="~/Scripts/jquery.dataTables.min.js" defer></script>
I ran into this error also. For whatever reason I had originally coded
var table = $('#myTable').DataTable({
"paging": false,
"order": [[ 4, "asc" ]]
});
This would not throw the error sometimes and other times it would. By changing code to
$('#myTable').DataTable({
"paging": false,
"order": [[ 4, "asc" ]]
});
Error appears to have stopped
In my case the solution was to delete cookies from the browser.
Having the same issue in Flask, I had already a template that loaded JQuery, Popper and Bootstrap. I was extending that template into other template that I was using as a base to load the page that had the table.
For some reason in Flask apparently the files in the outer template load before the files in the tables above in the hierarchy (the ones you are extending) so JQuery was loading before the DataTables files causing the issue.
I had to create another template where I run all my imports of JS CDNs in the same place, that solved the issue.
Sometimes it happens that the script (initializing of datatable) is embedded in a general page template, so if one of the pages that actually does not have any table and you did not import the jquery related files for datatable, you face this error, since the general initialization still is looking for that. (This was in my case)
Solution: Is to wrap the initialization of datatable inside a codition that check presence of the library before that:
Here is practical example of it.
if (typeof jQuery.fn.DataTable != "undefined"){
$('#accordionExample table').DataTable( {
"pageLength": 5,
"info": false,
"order": [[ 1, "desc" ]]
} );
}
This may also happen if you write Datatable instead of DataTable. (DataTable T must be capital). this is a beginner's mistake.
$(document).ready(function() {
$('#category-table').DataTable({
// Your Code
});
if you are sure that you aligned your scripts as described above, please make sure you DataTable word case is correct.
Before
$(document).ready(function() {
$('#myTable').Datatable();
});
After
$(document).ready(function() {
$('#myTable').DataTable();
});
small t is creating problem, when I changed this t to T it worked like a charm.
I created a new MVC 6 project, empty template. added JQuery via NuGet. How do you reference it then in your _Layout file or wherever you want to use it. I dont have a script folder with Jquery in there.
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="~/css/site.css" />
<script src=""></script> -- HERE
<title>#ViewBag.Title</title>
</head>
<body>
<div>
#RenderBody()
</div>
#RenderSection("scripts", required: false)
</body>
</html>
Remove the package from Nuget and add via bower. If you have created a new MVC 6 empty project. you will need to add a bower.json file and then add the Jquery dependency
{
"name": "ASP.NET",
"private": true,
"dependencies": {
"jquery": "2.1.4"
}
}
Then in your layout add the reference
<script src="~/lib/jquery/dist/jquery.js"></script>
edit: This questions is solved
Stupidly enough, the url /img/images.json is treated differently by the simpleHttpServer used to test the application than by the iOS simulator.
It was a long search why it would show the list in the browser when testing but not in the simulator. Apparently the simpleHttpServer that comes with python will treat a url starting with the / as it's root, for example the www folder. The simulator does not and would appreciate a relative location, starting with no /
The problem seems mostly caused by the rustiness of my web-dev skills ^.^
====================
I am trying to make a simple ionic app, and for some input I am using the Angular Tutorial.
I have a very simple page that should load the contents of a json-file with image data. And all it needs to do for now is showing the image names. At the end it should dump the complete data from the json-file.
This is all based of the blank project created with ionic.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="phocalsApp">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="imageListCtl">
<ul class="imagelist">
<li ng-repeat="image in imagelist" >
{{image.imgName}}
</li>
</ul>
{{imagelist | json}}
</ion-content>
</ion-pane>
</body>
</html>
app.js:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('phocalsApp', ['ionic', 'phocalsControllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
controller.js
'use strict';
var phocalsControllers = angular.module('phocalsControllers', []);
phocalsControllers.controller('imageListCtl', ['$scope', '$http',
function($scope, $http) {
$http.get('/img/images.json').success(function(data) {
$scope.imagelist = data;
});
$scope.orderProp = 'imgDate';
}]);
images.json:
[
{
"imgUrl":"",
"imgName":"Nieuwste Foto",
"imgDate":20140525
},
{
"imgUrl":"",
"imgName":"tweede Foto",
"imgDate":20140524
},
{
"imgUrl":"",
"imgName":"derde Foto",
"imgDate":20140523
}
]
Seeing as I pretty much use the same code as the angular example, I would expect this to work, unfortunately all the output I am getting when running in the ios Simulator is an empty page with the header-bar. No errors or nothing. Can anyone tell me what I am doing wrong here?
You are missing some console.log(data) in your controller to check whether the controller is initialized, wether $http actually succeeds etc.
Even after using angular for months, i have to log every step cause there are too many things to go wrong :)
Also you should add an error function to
$http.get('/img/images.json').success(function(data) {
$scope.imagelist = data;
}).error(function(data) ....;
when I tried to run even a blank app, the console output is:
"Error calling js to fire nativeReady event. Did you include cordova.js in your html script tag?"
Doctype is:
<!DOCTYPE html>
And this are script references:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type='text/javascript' src='js/angular.min.js'></script>
<script type='text/javascript' src='js/angular-ui.js'></script>
<script type='text/javascript' src='js/jqm-setup.js'></script>
<script type="text/javascript" src="js/jquery.mobile.js"></script>
<script type="text/javascript" src="js/jquery-mobile-angular-adapter.min.js"></script>
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>-->
This error disappears only when I remove the jquery mobile stuff...
Thanks in advance.
I would avoid JQuery Mobile in PhoneGap applications. I got to meet Andrew Trice, Adobe PhoneGap Evangelist, at a DC Droid Meet and listened to him present in a few Webinars. I've heard him say more than once that JQuery Mobile has huge performance issues. He recommended using other frameworks if possible. There are many other frameworks out there with good design, widgets, and samples that make them easy to learn. I think he even created his own called AppUI. Just look around and you'll find some really cool ones.
That error is definitely what it says: your cordova.js file is not being included correctly. Fix that first.
To answer your larger question: Angular, jQuery Mobile, and PhoneGap will play together but it comes with some big caveats.
The biggest issue is that the jQuery Angular Mobile adapter is currently abandoned while they invest time in building a better solution: angular-jqm. That means that the adapter only works with outdated versions of the libraries.
Second: those outdated library versions have some issues working with Windows Phone. These are fixable, too, but lock you into an even less maintainable version of them.
So here is the setup:
<script src="javascripts/vendor/jquery-mobile-1.3.1.js"></script>
<!-- this angular-1.0.6 includes a patch to support WP8 URLs: https://github.com/angular/angular.js/issues/2303 -->
<script src="javascripts/vendor/angular-1.0.6.js"></script>
<script src="javascripts/vendor/jquery-angular-mobile-adapter-1.3.2.js"></script>
Unfortunately I was never able to get partials to load via XHR so I included all pages in index.html document.
<body ng-controller="AppController">
<div data-role="page" id="first" ng-controller="FirstController">
<h1>First Page</h1>
<p>{{foo}}</p>
<p>Second Page</p>
</div>
<div data-role="page" id="second" ng-controller="SecondController">
<h2>Second Page</h2>
</div>
</body>
Then you need to switch off a few niceties in the JavaScript and set up your routes:
<script>
var so_example = angular.module('so_example', []).
config(function ($routeProvider, $locationProvider, $compileProvider) {
// turn off html5 mode so that we just navigate around using hashes
$locationProvider.html5Mode(false).hashPrefix("");
// allow for the odd URLs included in Windows Mobile PhoneGap
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|x-wmapp0):/);
$routeProvider.
when('/second', {
templateUrl: '#second',
jqmOptions: { transition: 'slide' }
}).
when('/', {
templateUrl: "#first"
});
}).
controller("FirstController", function ($scope) {
$scope.foo = "Hello, World!";
}).
controller("SecondController", function ($scope) {
});
</script>
Now you need to leverage the Cordova library before you bootstrap Angular to your HTML:
var app = (function () {
function onDeviceReady() {
angular.bootstrap(document, ['so_example']);
$.mobile.phonegapNavigationEnabled = true;
}
return {
initialize: function() {
document.addEventListener('deviceready', onDeviceReady, false);
}
};
})();
app.initialize();