'DataTable Error: Uncaught ReferenceError: jQuery is not defined
My datatable plugin is not working and i dont know why please help...
when trying to debug the javascript on Google crome i found this error and i know if they are clashing
Uncaught ReferenceError: jQuery is not defined localhost:49769/Scripts/main.js:1 Uncaught Error: Graph container element not found localhost:49769/Scripts/Template/js/plugins/morris/morris.min.js:1 'Range.detach' is now a no-op, as per DOM (http://dom.spec.whatwg.org/#dom-range-detach).
Am using MVC5 to develop the application
this is the main Js
jQuery(function ($) {
$(document).ready(function () {
var table = $("#customers").DataTable();
});
});
<!-- add new calendar event modal -->
<!-- jQuery 2.0.2 -->
<script src="/Scripts/Template/js/jquery-1.11.1.min.js"></script>
<script src="/Scripts/Template/js/jquery.min.js"></script>
<script src="/Scripts/main.js"></script>
<!-- DATA TABES SCRIPT -->
<script src="/Scripts/Template/js/plugins/datatables/jquery.dataTables.js"></script>
<!-- jQuery UI 1.10.3 -->
<script src="/Scripts/Template/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<!-- Bootstrap -->
<script src="/Scripts/Template/js/bootstrap.min.js" type="text/javascript"></script>
<!-- Morris.js charts -->
<script src="/Scripts/Template/js/raphael-min.js"></script>
<script src="/Scripts/Template/js/plugins/morris/morris.min.js" type="text/javascript"></script>
<!-- Sparkline -->
<script src="/Scripts/Template/js/plugins/sparkline/jquery.sparkline.min.js" type="text/javascript"></script>
<!-- jvectormap -->
<script src="/Scripts/Template/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js" type="text/javascript"></script>
<script src="/Scripts/Template/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script>
<!-- jQuery Knob Chart -->
<script src="/Scripts/Template/js/plugins/jqueryKnob/jquery.knob.js" type="text/javascript"></script>
<!-- daterangepicker -->
<script src="/Scripts/Template/js/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<!-- datepicker -->
<script src="/Scripts/Template/js/plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="/Scripts/Template/js/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
<!-- iCheck -->
<script src="/Scripts/Template/js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="/Scripts/Template/js/AdminLTE/app.js" type="text/javascript"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="/Scripts/Template/js/AdminLTE/dashboard.js" type="text/javascript"></script>
<!-- AdminLTE for demo purposes -->
<script src="/Scripts/Template/js/AdminLTE/demo.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-2.6.2.js"></script>
this are all my script reference
Here is the Table
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<br />
<div class="box-header row-fluid">
<div class="col-lg-12">
<div class="span2 pull-right">
<button class="btn btn-primary btn-sm">Enable</button>
<button class="btn btn-warning btn-sm">Disable</button>
<button class="btn btn-danger btn-sm">Delete</button>
</div>
</div>
</div><!-- /.box-header -->
<div class="box-body table-responsive">
<table id="customers" class="table table-bordered table-striped">
<thead>
<tr>
<th><input type="checkbox"></th>
<th>Customer Name</th>
<th>Phone Number</th>
<th>Email</th>
<th>Location</th>
<th>Registration Date</th>
<th>Customer Status</th>
</tr>
</thead>
<tbody>
<tr>
<th><input type="checkbox"></th>
<td>Mike Ebon</td>
<td>0802647281243</td>
<td>[email protected]</td>
<td>Surulere Lagos, Country</td>
<td>10/13/2014</td>
<td><span class="label label-success">Approved</span></td>
</tr>
<tr>
<th><input type="checkbox"></th>
<td>Mike Ebon</td>
<td>0802647281243</td>
<td>[email protected]</td>
<td>Surulere Lagos, Country</td>
<td>10/13/2014</td>
<td><span class="label label-success">Approved</span></td>
</tr>
<tr>
<th><input type="checkbox"></th>
<td>Mike Ebon</td>
<td>0802647281243</td>
<td>[email protected]</td>
<td>Surulere Lagos, Country</td>
<td>10/13/2014</td>
<td><span class="label label-danger">Denied</span></td>
</tr>
</tbody>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
</div>
</section>
Solution 1:[1]
Do you have that before or after your script tag that includes jQuery? Make sure it's after.
Solution 2:[2]
According to Datatables.net
DataTables has only one library dependency (other software upon which it relies in order to work) - jQuery. Being a jQuery plug-in, DataTables makes use of many of the excellent features that jQuery provides, and hooks into the jQuery plug-in system, in the same way as all other jQuery plug-ins. jQuery 1.7 or newer will work with DataTables, although typically you will want to use the latest version. DataTables includes everything else that it requires to operate.
Update your jQuery to the newest version and try again. Also remove the
jQuery(function ($) {
});
in the main JS. You don't need it.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | vpzomtrrfrt |
| Solution 2 | GidiBloke |