table.$ is not a function
table.$ is not a function
ClarkB
Posts: 8Questions: 3Answers: 0
I've searched for an answer for this, and all seem to say I'm loading JQuery after datatables. But I does not appear to me that I am:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="CLy00qe7NM2zf5WRS2rt9cHINK24hMxgF63iozP0Y6Ltq2lyoNGA/+yTLElUnfICxY75CYhELXPmQT3DrkE0PQ=="/>
<link rel="stylesheet" media="all" href="/assets/application.self-93b7ddd36456e9d99ecb884cad16015d77893552567350c8bee7d29ae7bd5b75.css?body=1"/>
<script src="/assets/rails-ujs.self-817d9a8cb641f7125060cb18fefada3f35339170767c4e003105f92d4c204e39.js?body=1"></script>
<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
<script src="/assets/popper.self-b5d0395dd499f58f910fee32e5221f71c3b8e6f3229879a7b76d481c5446de10.js?body=1"></script>
<script src="/assets/bootstrap/util.self-f2db8d2e646a4c0196dc185380722e53e26bdcb1dc0b696759563ed9641abc0d.js?body=1"></script>
<script src="/assets/bootstrap/alert.self-3c0e0ea912c51e8e7cdd46645658114f49c4245972067c7f07b9a66d30980b7c.js?body=1"></script>
<script src="/assets/bootstrap/button.self-b08385816b4677d7b197afc248181b5c1ccd97e8574f13fd18b2ec7503781692.js?body=1"></script>
<script src="/assets/bootstrap/carousel.self-814d08a1d0e798e67888247c116f8b6af05ea60c1486545812e830e8e8c136b0.js?body=1"></script>
<script src="/assets/bootstrap/collapse.self-1a79cba43ee7c30dece65724e64137b954b83b28c4d591c00734bf0b419c6d2d.js?body=1"></script>
<script src="/assets/bootstrap/dropdown.self-581cb0e8000124c7d3f24330cafa3ef23563cb526cd45e62d8c9cf7fc91fe935.js?body=1"></script>
<script src="/assets/bootstrap/modal.self-22d10c752d4dcc6815e1da5de44172f41902a6f92f1ea940bf1f232c051af5ba.js?body=1"></script>
<script src="/assets/bootstrap/tooltip.self-af0600d0aa69db3dc757c30fda2eb61b4189dc04238446c4f13f98e73658fa94.js?body=1"></script>
<script src="/assets/bootstrap/popover.self-c65dad71efe46a28e4a392027b4d4ac1c545db26552ffc82556bd520fd49a9ab.js?body=1"></script>
<script src="/assets/bootstrap/scrollspy.self-da52adbf5cee52bbef5ca164a9fa5da71bf73c6a92c980ad1ab67f61c082e3fe.js?body=1"></script>
<script src="/assets/bootstrap/tab.self-b6e67455db9465b475d6431cd0dd220f594ac034bcedb3e146a0b9dd5b094d2a.js?body=1"></script>
<script src="/assets/bootstrap-sprockets.self-636159b35205da4142a43bc02d2849d77d3ac07a0946211585cde15a9c6ff21f.js?body=1"></script>
<script src="/assets/badges.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1"></script>
<script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1"></script>
<script src="/assets/datatables/jquery.dataTables.self-09a1cac04cf9882e653cf3df15b46bed5a3c238a839c9d6040e30a14144af1f5.js?body=1"></script>
<script src="/assets/datatables/extensions/Select/dataTables.select.self-862eade47f647d6c4a51c90184450d132cbed38241e6edcc9b818b36a21a2529.js?body=1"></script>
<script src="/assets/datatables/dataTables.bootstrap4.self-7694572f5a6396d39c0384e4f1b6accaabd3c89647a4a8a27374583eed1498e0.js?body=1"></script>
<script src="/assets/datatables.self-177170bbf2634ab084c931a35b84b719808fdea3cf4684b32cecfa027b7c895b.js?body=1"></script>
<script src="/assets/standards.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/students.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script>
<script src="/assets/application.self-8b65b3952adab793be02406cf8176888fd765a95fbb34c17bdff04d92ec24968.js?body=1"></script>
</head>
<body>
...
I get the error when I hit the submit button, and try to reference the table var I saved during init:
$(document).ready(function(){
var table = $('#standards_form_table').DataTable({
stateSave: true,
select: true,
"pageLength": 15,
"lengthMenu": [ [10, 15, 25, 50, -1], [10, 15, 25, 50, "All"] ],
"order": [[ 0, "asc" ], [1, "asc"], [2, "asc"]],
"columnDefs": [
{ "targets": [3,4], "orderable": false}
]
});
$('#btn-submit').on('click', function(e){
e.preventDefault();
$.ajax({
url: '/badges/1',
data: table.$('input[type="checkbox"]').serialize()
}).done(function(data){
console.log('Response', data);
});
});
});
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
That does look like it should work. Can you give a link to the page so I can take a loop and help to debug it?
Thanks,
Allan
It's still only in local debug. And it started working for me when I got back from lunch. I'm guessing it was cached somewhere, and when I restarted things, it started working. Sorry for the false alarm.