How to make DataTables work with Turbolinks 5? - javascript

I'm working on something in Ruby (2.7.3) on Rails (6.1.3).
I got a task to setup jQuery Datatable. No problem there:
<script>
$(document).ready( function () {
$('#stakingTable').DataTable();
} );
</script>
I have my jQuery imports at the top of the html.erb file as such:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
In this path, app/javascript/packs/application.js, I have the following imports:
import Rails from "#rails/ujs"
import Turbolinks from "turbolinks"
Rails.start()
Turbolinks.start()
Now, when given this task to implement DataTable, I noticed that I need to refresh my page, once, before it loads the DataTable. I checked my console, before reload, and got the following error:
Uncaught ReferenceError: $ is not defined
at <anonymous>:3:1
at o.assignNewBody (turbolinks.js:604:1)
at o.replaceBody (turbolinks.js:542:1)
at turbolinks.js:535:1
at o.e.renderView (turbolinks.js:495:1)
at o.render (turbolinks.js:533:1)
at Function.e.render (turbolinks.js:493:1)
at t.renderSnapshot (turbolinks.js:690:1)
at t.render (turbolinks.js:686:1)
at r.render (turbolinks.js:940:1)
The answer my mentor gave me had something to do with Turbolinks, and how it loads the page too fast for the jQuery to be applied. So I had a look around and saw that this seemed to be a common solution:
<script>
$(document).on(;'turbolinks:load' function () {
$('#stakingTable').DataTable();
} );
</script>
However, this does nothing for me. Still the same error in the console, as mentioned above. I've looked at some of the Turbolinks documentation here: https://github.com/turbolinks/turbolinks, and I have tried playing around with different turbolinks:before-cache and other features, and yet, nothing works.
Is there something I am missing? If anyone could help, I would be very thankful.

Related

jSignature is not a function

I'm trying to use jSignature in my website, but it keeps showing me this error:
Uncaught TypeError: $(...).jSignature is not a function
My code is:
<div id="signature"></div>
$("#signature").jSignature();
I have Jquery 1.11.1:
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
The Jquery is called before the JS of the function.
I have also tried to call Jquery Mobile, calls like $('#signature').jSignature({'UndoButton':false,color:"#000000",lineWidth:5});, etc but it never works.
Can anyone help ?
Well, i fixed the problem.
The problem was: I had the Jquery 1.12.4 in my plugins file. It would work normal in any page, but with the jSignature it made the JS throw an error.
I removed the Jquery from the Plugins ( but keeped the CDN one ) and now it works fine.
I already found many questions about this but never an answer.
Hope this helps anyone out there.
Many Thanks
i use jQuery 3.4, had the same issue. Im not quite sure where the problem came from but it was the phantom.
First i added all recommended libs to my project and accessed the element as used to:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="/jSignature.min.noconflict.js"></script>
...
$(`#id`).jSignature();
I received the same jSignature is not a function
Afterwards i assumed the problem might be in jQuery version compatability, so added few lines:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="/jSignature.min.noconflict.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
var jq_1_12 = $.noConflict(true)
</script>
...
jq_1_12(`#id`).jSignature();
it was keeping throw the same error jSignature is not a function.
Finally
I removed the last changes and jquery 1.12 import. The problem solved it-self, have no idea what have happened. But the plugin works now without any explicable reason

jQuery plugins conflict and script declaration order

I'm new to web development, and was having issues with two plug-ins. I already found a workaround to solve it, but I'm not convinced at all about what I did, so I ask you guys if you can enlighten me on what is this about.
The page in question uses SlimScroll and DataTables plugins. At first, I had an HTML file like this one.
<body>
<!-- STUFF -->
<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="plugins/DataTables/datatables.min.js" type="text/javascript"></script>
<script src="assets/scripts/tablas.js" type="text/javascript"></script>
<script src="assets/scripts/general.js" type="text/javascript"></script>
At the bottom, general.js is used to handle click events and other stuff, and tablas.js has the code that picks up a file with data and displays it in DataTables. The relevant code from general.js:
$(document).ready(function() {
$('#contenedor-menu').slimScroll({
height: '100%'
});});
And the code for tablas.js:
$(document).ready(function() {
$('#tablita').DataTable( {
"ajax": 'data/COut2.txt',
} );});
With this structure, when I load the page, SlimScroll fails with the message in the console: "TypeError: $(...).slimScroll is not a function"
Then after touching around, I switched the order of the scripts in the HTML file. I put datatables first and then slimscroll.
<script src="plugins/DataTables/datatables.min.js" type="text/javascript"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
And now it works ok, with no errors.
Could somebody please explain to me what's going on?
Thanks in advance!
The use of multiple $(document).ready(function() { } is the main cause of this issue. There should be only one Document Ready event handler.
You may try using the pageLoad() function or onLoad() events
Not positive but it is usually best practice to put the scripts you absolutely need before everything else in the head. This is so that the content of the page does not finish loading until all the dependencies have been loaded first.
By reordering your scripts you may have a solution that will only work some of the time.
Put all the scripts you need to load in the head and your general.js script at the end of your body element.

Boostrap lightbox not working as expected

I'm trying to get a functional lightbox to work on my page using code from 'bootply.com/' but it does't seem to work. It works as a link, but not as a lightbox. I get an error relating to the Javascript which states '$ is not defined', but I can't seem to locate the issue. I'm simply replicating the code, so not sure what I'm missing!
<script type="text/JavaScript">
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
http://www.bootply.com/71401
Any help is appreciated.
you have to include jQuery.
if you have jQuery lib then
<script src="jquery-1.11.2.min.js"></script>
or
use jQuery CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
You are missing the jQuery library..
Include this in the top of your HTML before you attempt to use the $
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
Alternatively you can download the jQuery library and reference it yourself.
This should resolve the issue.

Plugging in a jQuery plugin

I'm trying to use the jquery tokeninput plugin, the demos work fine however when I try to implement it I'm hitting a brick wall. Chrome chucks this at me:
Uncaught TypeError: Object [object Object] has no method 'tokenInput'
Below is an excerpt from my <head>, chrome's resource browser shows both jQuery and jquery.tokeninput are loaded fine. No URL issues.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.tokeninput.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>
And showing that tokeninput has loaded:
Right, bare-bones page worked fine. After digging a while longer I found this buried at the base of the page:
<script src="http://code.jquery.com/jquery.js"></script>
It seems having multiple versions of jQuery loaded is not a good thing to do.
I am not sure if you already solved it or not. But Try this it should work if your sequence of jquery library inclusion is right (which it seems right), also remove one of jquery.min.js, jquery.js.
Then try this
<script type="text/javascript">
// Any valid variable name is fine.
var j = jQuery.noConflict();
j(document).ready(function () {
j("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>
Check this out to understand why you might need this.
http://api.jquery.com/jQuery.noConflict/

$('body').layout is not a function

I'm using the jQuery UI Layout plugin and I keep getting this error in Firebug: $('body').layout is not a function. I also get the same error in IE8 and below.
Obviously, it's being caused by the line where I initiate the layout UI in my scripts file:
$('body').layout({ *options here* });
Is there a way to prevent this error from showing? I'm pretty sure I need the BODY selector for this particular plugin to run.
** SOLUTION **
As the helpful answers say below, I had this line: $('body').layout({ *options here* }); BEFORE I included my jQuery and jQuery UI Layout Plugin files. Once I put the body.layout after those two inclusions, the error went away.
You seem to either
1) have not included the plugin properly (script tag missing/typo in the url, included it before loading jquery itself, whatever else could go wrong)
 or
2) calling $("body").layout too early - wrap it with $(document).ready(function() { });
it should be
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.layout.js"></script>
...
<script type="text/javascript">
$(document).ready(function() {
$("body").layout() // will work now
});
</script>
Make sure you're including the lines:
<SCRIPT type="text/javascript" src="/path/to/jquery-latest.js"></SCRIPT>
<SCRIPT type="text/javascript" src="/path/to/jquery.layout-latest.js"></SCRIPT>
Prior to the code you placed in your question. Otherwise, layout will have been undefined before use.

Categories