Develop Reference

How to Eliminate Datatables Warning(Cannot reinitialise DataTable)

Hello i have created a table using the jquery datatable framework to display data.
automatically my datables are sorted into a form in which i do not want
so i did some research on how to disable sorting and then i get sorting disabled.
the problem now is when i disabled sorting i get a funny error :
"DataTables warning: table id=datatable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3"
so i do another round of research on why i am having this problem.
the problem is i am calling the dataTable() function twice on my page
so the solution should be to only call it once.
the second problem i have is i dont know where the first function has been called.
Reason : i am making use of a template and it does not state explicitly where this is defined.
how can i get rid of this error? is there any method.
please see my implementation for disabling sorting below which works for sorting but triggers that error
$(document).ready(function() {
$('#datatable').dataTable({
"bSort": false,
"bDestroy": true
});
});
what i am trying to achieve is display my datatable without sorting
Thanks

You need to destroy the existing DataTable before re-initializing it:
$(document).ready( function() {
if ( $.fn.DataTable.isDataTable( '#datatable' ) ) {
$( '#datatable' ).DataTable().destroy();
}
$( '#datatable' ).dataTable( {
"bSort": false,
"bDestroy": true
} );
} );

Datatables not correctly working through JQuery-UI Tabs

I seem to have a problem with the way jQuery-UI tabs and Datatables work together. I want to create a table that is scrollable and has information from a database.
When I enter the page for the first time it looks like this.
As you can see it looks like a normal table instead of one from Datatables.
When I reload the page again it looks like this.
This is roughly how I want it to look upon first load.
It also seems that it only works for the first table on the page.
I tested this multiple times on multiple pages with the same results.
I'm assuming this problem is because of jQuery-UI seeing as on another page it work perfectly and when I load in the page without jQuery-UI it works aswell.
This is the code:
//jQuery-UI
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
//DataTables
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
$('table.scrollable').DataTable({
"scrollY": "240px",
"scrollX": true,
"scrollCollapse": true,
"paging": false
});
});
</script>
The HTML is just a standard table loaded in through a while loop from a database.
To decrease loading times I've set up jQuery-UI in a way that it loads seperate files when a tab is clicked so that no unnecessary things are loaded at the start.
Any piece of help would be much appreciated thanks!
EDIT: Wanted to make a JSFiddle showcasing my problems but it basically works perfect there so I'm guessing the problem comes from the fact that I load it as seperate pages.
JSFiddle

I would advise the following code, expanding upon my comment.
$(function() {
$("#loading-voertuigen").show();
if ($(window).width() <= 1600) {
$('table.scrollable').DataTable({
"scrollY": "240px",
"scrollX": true,
"scrollCollapse": true,
"paging": false
});
} else {
$('table.scrollable').DataTable({
"scrollY": "240px",
"scrollCollapse": true,
"paging": false
});
}
$(window).resize(function() {
location.reload();
});
});
You were using $(document).ready() and it is not needed. The use of $(function(){}) already causes the jQuery to execute after the page is ready.
If need further help, please edit your post and include a more complete example.

How to use tablesorter plugins cssStickyHeaders widget?

$.noConflict();
jQuery(document).ready(function ($) {
var options = {
sortList: [
[1, 1]
],
theme: 'ice',
widgets: ['zebra', 'cssStickyHeaders'],
};
$("#myTable").tablesorter(options);
});
I use tablesorter and need to use cssStickyHeaders widget but I have two problems that I could not fix.
1) I have another sticky header on my page, and I need this tables sticky header to appear under it. I tried to understand widget options parameters from here but could not make it work.
2) CSS does not update automatically, so I have to turn on and off the developer tools in browser to make it work, to make the header move. In example everything works but it doesn't work with my page, though I do everything in the same way as it is presented in the example.
I am new to javascript. I hope someone will help me.

JscrollPane not loading into div properly

I'm having an issue with jscrollpane loading into a div using the following function:
$(document).ready(function() {
$("#shopping").click(function(event){
$('#stage').hide();
$('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });
The above code is on the index page and I'm calling up the "shopping page" as you can see above.
I have four other links that call up pages, one page has a slideshow and I managed to load that one into the div simply by eliminating the Jquery repository link, but this page doesn't want to know.
On the "shopping" page I have the following script, I've searched most of the web and also on here, without success, but nobody else's solutions have worked for me.
What am I doing wrong?:
<script type="text/javascript" src="./js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="./js/jquery.jscrollpane.min.js"></script>
<link type="text/css" href="./css/jquery.jscrollpane.mod.css" rel="stylesheet" media="all" />
<script>
$(function()
{
$('.horizontal-only').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
);
});

Ok...
After some digging and trial and error, I've found the solution to my problem, hunting on the web and stack, I found something that worked and I thought for all those that are complete noobs, like me, in javascript and Jquery I'd post my findings.
Current call up on index page:
$(document).ready(function() {
$("#shopping").click(function(event){
$('#stage').hide();
$('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });
I added the following to my index page (this is the page that is calling up the other pages)
to the link of a specific page add:
$.ajaxSetup({async:false});
then add the jScrollPane function after your call up e.g:
$('#stage').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
);
So altogether it looks like this:
$(document).ready(function() {
$("#shopping").click(function(event){
$('#stage').hide();
//--added the async code here--//
$.ajaxSetup({async:false});
$('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });
//--moved the jscrollPane from the page I was calling to the index page code here--//
$('#stage').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
);
This seems to be working for me at the moment, now I just need to re-edit some css and it's good to go.

I've found another workaround:
I've added the following code to the index.html:
$(function()
{
var api = $('.horizontal-only').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
).data('jsp');
$('#shopping').bind(
'click',
function()
{
api.getContentPane().load(
'pages/shopping.html',
function()
{
api.reinitialise();
}
);
return false;
}
);
});
I also made the jsp load in a separate div layer, as it was causing some styling conflicts and i can't determine where the issue is but this works.
What I also had to do is hide the new div layer from the other calls
so basically:
$(#scroller).hide();
Thanks, I'm sure this isn't the best way, but as i've only had one reply on this issue, which was a question, think I've done rather well for a noob.

jQuery Accordion breaks after first click when active: false is set

I've had a jQuery accordion on my site for a bit now, and it seemed to be working fine until I checked on it today and it is broken. I haven't touched the HTML in weeks. I've gone through the accordion documentation all over again, and it doesn't seem anything has changed, so I have no clue what is going on.
I had the accordion "active" property set to "false", so that the accordion would not display an active section on document load. I also had "collapsible" set to "true", like the documentation specified. Just to be sure it wasn't another element on the page, I created a whole new page with just the most basic accordion elements on it, and it still won't work.
The problem is that, after clicking on the first accordion section, clicking on any of the other ones doesn't work- you're stuck with that section open. I noticed that removing the "active" property altogether fixed this problem, but then of course there is an active section open on document load, which I don't want.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#accordion").accordion({active: false, alwaysOpen: true, autoHeight: false, collapsible: true});
});
</script>
</head>
<body>
<div id="accordion">
<p>1</p>
<div>this</div>
<p>2</p>
<div>isn't</div>
<p>3</p>
<div>working</div>
<p>4</p>
<div>correctly</div>
</div>
</body>
</html>
I also noticed that if I remove active: false, and leave collapsible: true, I am only able to "collapse" a section twice, and then the same thing happens- the sections lock up and stop collapsing/opening.

Well, I immediatly saw the following problem:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
By not specifying the revision (last third digit in the version) you will automatically get served the latest version of both jQuery and jQuery UI. So why it suddenly stopped working for you was because jQuery UI got updated, and changes were made to the UI Accordion.
Best way to solve this is to specify the revision. Walk down from the current version (1.8.7) and downwards until it's working for you. For example, the alwaysOpen open have been removed or changed. You should check the docs and see which options are available.
Also, you can try this which I've got working on jsFiddle:
$(function(){
$("#accordion").accordion({
active: false,
autoHeight: false,
collapsible: true
});
});

heightStyleType
Controls the height of the accordion and each panel. Possible values:
"auto": All panels will be set to the height of the tallest panel.
"fill": Expand to the available height based on the accordion's parent height.
"content": Each panel will be only as tall as its content.
Code example:
$(function(){
$("#accordion").accordion({
active: false,
heightStyle: "content",
collapsible: true
});
});