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.
Related
AdminLte select2 not working means not showing search in select box, i have included css and js file and used like below and also i have included bootstrap related css and js files
<html>
<head>
<link rel="stylesheet" href="bower_components/select2/dist/css/select2.min.css">
</head>
<body>
<select class="form-control select2" style="width: 100%;" ng-options="t.id as t.name for t in tags" ng-model="t_id">
<option selected="selected">Select Tag</option>
</select>
<script src="bower_components/select2/dist/js/select2.full.min.js"></script>
<script>
$(function () {
//Initialize Select2 Elements
$('select2').select2();
});
</script>
</body>
</html>
It will work
$('.select2').select2();
you may need to load Ajax.googleapis cdn from google. My problem was like as yours.I have faced the problem and solved it. Main problem was select2 doesn't get ajax.googleapis cdn. So, before the jQuery code I have loaded the cdn and it works fine now. You mush notify the version of your cdn. Firstly, the code was
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
</script>
The problem is looked like the picture below
Now after solving the problem the code looks like below
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
</script>
Now it is seen like below
I am having an issue getting a dialog to work as basic functionality. Here is my jQuery source imports:
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>
Html:
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
<script type="text/javascript">
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
</script>
From the posts around seems like as a library import issue. I downloaded the JQuery UI Core, Widget, Mouse and Position dependencies.
Any Ideas?
Be sure to insert full version of jQuery UI. Also you should init the dialog first:
$(function () {
$( "#dialog1" ).dialog({
autoOpen: false
});
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
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.
Some times it could be issue with older version (or not stable version) of JQuery files
Solution use $.noConflict();
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
// Code that uses other library's $ can follow here.
</script>
If you comment out the following code from the _Layout.cshtml page, the modal popup will start working:
</footer>
#*#Scripts.Render("~/bundles/jquery")*#
#RenderSection("scripts", required: false)
</body>
</html>
Change jQueryUI to version 1.11.4 and make sure jQuery is not added twice.
I just experienced this with the line:
$('<div id="editor" />').dialogelfinder({
I got the error "dialogelfinder is not a function" because another component was inserting a call to load an older version of JQuery (1.7.2) after the newer version was loaded.
As soon as I commented out the second load, the error went away.
Here are the complete list of scripts required to get rid of this problem.
(Make sure the file exists at the given file path)
<script src="#Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
</script>
and also include the below css link in _Layout.cshtml for a stylish popup.
<link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css" />
I had a similar problem and in my case, the issue was different (I am using Django templates).
The order of JS was incorrect (I know that's the first thing you check but I was almost sure that that was not the case, but it was). The js calling the dialog was called before jqueryUI library was called.
I am using Django, so was inheriting a template and using {{super.block}} to inherit code from the block as well to the template. I had to move {{super.block}} at the end of the block which solved the issue. The js calling the dialog was declared in the Media class in Django's admin.py. I spent more than an hour to figure it out. Hope this helps someone.
It's been a nightmare to me before I came to know that in order to get jquery ui working in ASP.NET MVC I need to add #Scripts.Render("~/bundles/jqueryui"). Before doing so I kept getting Uncaught error: Undefined is not a function. What I did not understand was why on earth this would happen when I could see the jquery ui file in the sources when inspecting the html source. This is the _Layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.plugins.js"></script>
<script src="~/Scripts/Helpers.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")//Added later to get it working
#RenderSection("scripts", required: false)
</body>
</html>
In my Helper.js file I have some helper functions that I usually use. One of them is applyDatetimePickerAndFormat that is called on $(document).ready(). Inside that function I have the following code:
$('.txt-date').datepicker({
showAnim: "drop",
changeMonth: true,
changeYear: true,
dateFormat: "dd.mm.yy"
});
If I omit #Scripts.Render("~/bundles/jqueryui") in the _Layout.cshtml I will get the aforementioned error. This code works perfectly with any plain html or web form. So it seems that somehow the document can't see the contents of the jquery-ui file. To make my question concrete:
When I look at the Sources of the the web page I can see jquery-ui-1.8.24.js and it's referenced in the html source. Then why can't the code find jquery-ui functions?
If every java script file has to be specified in the #Scripts.Render then why isn't there any problem with my Helper.js file?
And finally where does this ~/bundles/jqueryui path refer to?
jquery-ui depends on jquery (i.e. it must be defined after jquery) but you have duplicated your files. In the head you have included <script src="~/Scripts/jquery-1.8.2.js"></script> followed by jquery-ui. You then reload jquery at the end of the file using #Scripts.Render("~/bundles/jquery") (Its now after jquery-ui).
Delete the script in the head and it should work. I addition, I recommend you delete jquery.validate and jquery.validate.unobtrusive from the head and use #Scripts.Render("~/bundles/jqueryval") at the end of the file (before #RenderSection..). You can examine these bundles in App_Start\BundleConfig.cs file. There are numerous advantages to using bundles (see Bundling and Minification).
If you are using all these files in every page based on _Layout, you can define your own bundle to includes all files.
You need to define the strategy for your js. I recomend you ot organize your js first and after that separate it to smaller parts. One should be common for all the pages(jQuery in your case) and other scripts for validation should be included only on pages that have some editing fileds etc.
Use DRY principle and read some information about how js works. It helps me a lot some time ago and won't take a lot of time.
It works at first open of the page but when i navigate to other pages that uses also the datepicker. It no longer works. Did i missed something in my code? Please see below. Thank you so much.
<link href="css/custom-theme/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.js" type="text/javascript" language="javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
$('#btnDfrom').focus(function () {
$(this).datepicker();
});
$('#btnDto').focus(function () {
$(this).datepicker();
});
</script>
<span id="filtertxt">Date From: </span>
<input type="text" id="btnDfrom" />
<span id="filtertxt">Date To: </span>
<input type="text" id="btnDto" />
This one does not work also
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
Jquery UI datepicker isn't intended to be called multiple times on the same element, which is what would happen if you call it on a focus event.
All you need to do is call it once on the target element, like so:
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
The datepicker plugin will take care of handling clicks and focus events on the elements by itself, you don't need to.
EDIT: You should also check that you are both including the script files, css files and this code on each page where you use the datepicker (but make sure it's only included once!)
your code is looking cool
$(function(){
$('#btnDfrom').datepicker();
$('#btnDto').datepicker();
});
check your code I think may be jquery is Conflicting somewhere in your pages.
This seems like it would have a really obvious answer, however I cannot get a simple checkbox to uncheck with JQuery once I add Jquery Mobile.
Here is some very simple code as an illustration:
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
jQuery(function () {
jQuery('#a').change(function () {
if (jQuery(this).is(':checked')) {
jQuery('#b').removeAttr('checked');
}
});
jQuery('#b').change(function () {
if (jQuery(this).is(':checked')) {
jQuery('#a').removeAttr('checked');
}
});
});
</script>
</head>
<body>
<input type="checkbox" id="a"><label for="a">AAAA</label>
<input type="checkbox" id="b"><label for="b">BBBB</label>
</body>
</html>
This is a simple bit of code. When Checkbox 'A' gets checked, it should uncheck checkbox 'B', and vise verse. However it doesn't, and no error is written to the console.
This is using the standard version of Jquery & Jquery Mobile, linked directly to their site
If I remove the Jquery Mobile elements, by removing the following lines, then it works fine
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
Can anyone please enlighten me as to where I am going wrong, since this seems so simple yet I'm at an absolute loss as to what is going on.
Many thanks
Because you need to use .prop and then re-apply styles using .checkboxradio('refresh').
Check
$('selector').prop('checked', true).checkboxradio('refresh');
Uncheck
$('selector').prop('checked', false).checkboxradio('refresh');