i use JQuery DataTable plugin in a Asp.net MVC Project. JQuery, DataTable and Bootstrap are installed by Nugets. Adding the reference jquery.dataTables.min.css to the Layout make a styling troubles and problems.
the order of call:
<head>
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/website.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script src="~/Scripts/DataTables/dataTables.bootstrap4.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/website.js"></script>
<script src="~/Scripts/moment.min.js"></script>
#RenderSection("scripts", required: false)
Thank you !
Related
I'm attempting to integrate datatables with bootstrap 4 and there are some major conflicts. I am getting the page navigation and the buttons in the style of bootstrap 4 but my table looks like a general HTML table with random bolded borderlines. I believe that my styles are getting overridden somewhere but I can't for the life of me figure out where...
imgur link here https://imgur.com/a/2nkm4F0
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/autofill/2.2.2/css/autoFill.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.4.1/css/colReorder.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.3/css/fixedHeader.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/keytable/2.3.2/css/keyTable.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.0.2/css/rowGroup.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.3/css/rowReorder.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/1.4.4/css/scroller.bootstrap4.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.5/css/select.bootstrap4.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/autofill/2.2.2/js/dataTables.autoFill.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/autofill/2.2.2/js/autoFill.bootstrap4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.4.1/js/dataTables.colReorder.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.3/js/dataTables.fixedHeader.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/keytable/2.3.2/js/dataTables.keyTable.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.0.2/js/dataTables.rowGroup.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.3/js/dataTables.rowReorder.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/scroller/1.4.4/js/dataTables.scroller.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.js"></script>
I make sure that there is only 1 import of jquery 3.3.1 and 1 import of bootstrap's css and bootstrap.min.js.
EDIT: HTML for the table that I am using.
<div id="similar-results" class="tabcontent">
<h3>Similar Documents</h3>
<table border="1" class="dataframe table display" id="example">
From the Bootstrap documentation on tables:
Due to the widespread use of tables across third-party widgets like
calendars and date pickers, we’ve designed our tables to be opt-in.
Have you added the .table class to your <table> element?
Im working a C# MVC project. Datepicker stopped working and I narrowed it down to what is causing it but don't have a solution...
I change one line of code in the Layout page and it breaks the date picker. Specifically going from jquery-1.11.1.min.js to jquery-3.3.1.min.js
This layout works:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.timepicker.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datepicker.min.js"></script>
<script src="~/Scripts/mvcfoolproof.unobtrusive.min.js"></script>
<script src="~/Scripts/MvcFoolproofJQueryValidation.min.js"></script>
<link href="~/Content/jquery.timepicker.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" />
<link href="~/Content/Menu.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
This layout breaks datepicker:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.timepicker.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datepicker.min.js"></script>
<script src="~/Scripts/mvcfoolproof.unobtrusive.min.js"></script>
<script src="~/Scripts/MvcFoolproofJQueryValidation.min.js"></script>
<link href="~/Content/jquery.timepicker.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" />
<link href="~/Content/Menu.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
So the Datepicker doesn't pop a calendar below the input, just a thick white line above the input.
I haven't been able to resolve this. Help?
I needed Bootstrap.Datepicker v1.7.1....
It brought in some new .css files and overwrote some of what was in the project and now the datepicker calendar is working.
I neededthe new code in bootstrap-datepicker.css . The code I had was not up to date. Also needed the new code in bootstrap-datepicker.js and bootstrap-datepicker.min.js
I deleted everything else the Package Manager brought in and everything works as intended.
I've checked other answers on here and I don't think there's one that covers my problem. I am trying to include two JQuery plugins (Datepicker and Select2) and I just want to download them, include them in the head of my site and initiate them in...
$(document).ready(function() {
// HERE!
$('[data-toggle="datepicker"]').datepicker();
$(".js-example-basic-single").select2();
});
...as both suggest I should be able to do... but both give me a ReferenceError: require is not defined in the console and if I go into the .js files and comment out the offending line (as suggested in other answers) the plugin doesn't work at all and I just get an undefined function in the console.
I'm sure this is something simple that's simply outside of my understanding, if anyone can help, that would be great.
This is the head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- fonts -->
<link rel="stylesheet" type="text/css" href="/fonts/roboto.css" media="screen" />
<!-- end fonts -->
<link rel="stylesheet" type="text/css" href="/css/general.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/message_boxes.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/loading_screen.css" media="screen" />
<link href="/css/datepicker.css" rel="stylesheet">
<script type="text/javascript" src="/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="/js/retina.min.js"></script>
<script type="text/javascript" src="/js/jscolor.min.js"></script>
<script type="text/javascript" src="/js/datepicker.js"></script>
<script type="text/javascript" src="/js/general.js"></script>
<script type="text/javascript" src="/js/message_boxes.js"></script>
<script type="text/javascript" src="/js/loading_screen.js"></script>
<script type="text/javascript" src="/js/tipped.js"></script>
<link rel="stylesheet" type="text/css" href="/css/tipped.css" />
<link rel="stylesheet" type="text/css" href="/css/icheck_blue.css" />
<script type="text/javascript" src="/js/icheck.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
I have the following files
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<link href="css/style2.css" rel="stylesheet" type="text/css" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
That was working fine but when I added other JS files like DateTimepicker then my autocomplete function stops working.
<script src="js/jquery.datetimepicker.full.js" type="text/javascript"></script>
<link href="css/jquery.datetimepicker.css" rel="stylesheet" type="text/css" />
Error:
Uncaught TypeError: $(...).autocomplete is not a function
The issue is because you're including two versions of jQuery. The first one has jQueryUI methods added to it. The second one then overwrites the first. Remove the last jQuery script include.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- REMOVE THIS >> <script src="js/jquery.js" type="text/javascript"></script> -->
<script src="js/jquery.datetimepicker.full.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/resources/demos/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.css" />
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
seems like you have added jQuery library twice.
keep it only once.
Either this one <script src="//code.jquery.com/jquery-1.10.2.js"></script> or <script src="js/jquery.js" type="text/javascript"></script>
I've installed Grocery-Crud and it works! But there is no any css files were loaded on page. I have standard code grocery_crud gives to users, so this is what I see, when I want to see page's code:
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="http://localhost/grocery.ru/assets/grocery_crud/themes/datatables/css/demo_table_jui.css" />
<link type="text/css" rel="stylesheet" href="http://localhost/grocery.ru/assets/grocery_crud/css/ui/simple/jquery-ui-1.9.0.custom.min.css" />
<link type="text/css" rel="stylesheet" href="http://localhost/grocery.ru/assets/grocery_crud/themes/datatables/css/datatables.css" />
<link type="text/css" rel="stylesheet" href="http://localhost/grocery.ru/assets/grocery_crud/themes/datatables/css/jquery.dataTables.css" />
<link type="text/css" rel="stylesheet" href="http://localhost/grocery.ru/assets/grocery_crud/themes/datatables/extras/TableTools/media/css/TableTools.css" />
<link type="text/css" rel="stylesheet" href="http://localhost/grocery.ru/assets/grocery_crud/css/jquery_plugins/fancybox/jquery.fancybox.css" />
<script src="http://localhost/grocery.ru/assets/grocery_crud/js/jquery-1.8.2.min.js"></script>
<script src="http://localhost/grocery.ru/assets/grocery_crud/js/jquery_plugins/ui/jquery-ui-1.9.0.custom.min.js"></script>
<script src="http://localhost/grocery.ru/assets/grocery_crud/themes/datatables/js/jquery.dataTables.min.js"></script>
<script src="http://localhost/grocery.ru/assets/grocery_crud/themes/datatables/js/datatables-extras.js"></script>
<script src="http://localhost/grocery.ru/assets/grocery_crud/themes/datatables/js/datatables.js"></script>
<script src="http://localhost/grocery.ru/assets/grocery_crud/themes/datatables/extras/TableTools/media/js/ZeroClipboard.js"></script>
<script src="http://localhost/grocery.ru/assets/grocery_crud/themes/datatables/extras/TableTools/media/js/TableTools.min.js"></script>
<script src="http://localhost/grocery.ru/assets/grocery_crud/js/jquery_plugins/jquery.fancybox.pack.js"></script>
<script src="http://localhost/grocery.ru/assets/grocery_crud/js/jquery_plugins/jquery.easing-1.3.pack.js"></script>
Is that means, that it loads these files? I thought it so. And this is what I see when I connect with controller "examples.php" (I'm nor writing this code, 'cause it basic files in grocery's archive): http://rghost.ru/46695190