How do I hide or show DataTables.net colums? - javascript

Based on the API docs at DataTables site, I created the following javascript function to show only one specific table at a time:
function ShowColumn(columnNum) {
var table = $('#MemberStatisticGrid').dataTable();
$('#SelectedMetricList option').each(function (index) {
table.fnSettings().fnSetColumnVis(index, false);
});
table.fnSettings().fnSetColumnVis(columnNum, true);
}
However, this fails with the error Uncaught TypeError: Object #<1> has no method 'fnSetColumnVis'
I don't get why I am getting this, as according to the API docs this is how you call it. Furthermore, when I view the available methods and properties on the fnSettings() via the chrome console, I don't see a fnSetColumVis method.
What am I missing?

Have you tried just using table.fnSetColumnVis? That works for me.

Related

Issue with JS callback when selecting a bokeh datatable row

I used a bokeh datatable in a simple report I had, which had the lines of:
source = ColumnDataSource(df)
callback = CustomJS(args=dict(callback_args), code="""some JS code""")
source.callback = callback
I had a simple JS code that would change some other datasources. Clicking on each row of the datatable would trigger it and it worked fine.
I upgraded bokeh to version 2.2.1
And now this code doesn't work anymore.
It seemed that for a datatable I might need to use something like:
source.js_on_change('value', callback)
or maybe:
source.js_on_change('start', callback)
But it doesn't work and the error I get is:
Uncaught (in promise) TypeError: Cannot read property 'connect' of undefined
at f.connect
at f._update_property_callbacks
at f.connect_signals
at Function._initialize_references_json
I wonder if I am doing something wrong or is it possible that it's a bug in bokeh?
Might be a bug with Bokeh. Take a look at this issue: https://github.com/bokeh/bokeh/issues/10345
Not a bug. ColumnDataSource has neither a start property nor a value property. You can only add callback handlers for properties that exist. You probably want
source.selected.js_on_change('indices', ...)

Is it possible to instantiate all datetimepicker's with one javascript call?

I have PHP generating a random amount of bootstrap-datetimepicker widgets, and I'm trying to instantiate them with one jQuery function, rather than one for each.
They all have the class .datepicker, but
$(function () {
$('.datepicker').datetimepicker();
});
does not work.
Any ideas?
EDIT:
I just tried
$(function () {
$('.datepicker').each(function(){
$(this).datetimepicker();
});
});
however, I still get the error Uncaught TypeError: Cannot read property 'dateOptions' of null.
EDIT: Fixed.
Hi,
I am working on a legacy codebase, and was using the wrong jQuery to instantiate. Everything works with the latest jQuery.

Possible causes of Cannot read property constructor of undefined

I want to iterate over all the forms present in a div. So I am using the following code for this
$('#divid form').each(function (index, formDetails) {
if (formDetails) {
console.log($(formDetails).attr('id'));
}
});
This is working fine in Mozilla with no issues but when I run this code in Chrome sometimes it throws the following error.
This error is coming
Uncaught TypeError: Cannot read property 'Constructor' of undefined
I am using Version 33.0.1750.117 m of Chrome.
Why this error is coming I am not able to understand?
Sounds like you don't have jQuery included before your try and load your functions.
Wrap your javascript code inside the below function:
$(document).ready(function() {
alert('loaded');
}
Also check if the initial is $ or jQuery

Mixitup - Uncaught TypeError: Cannot read property 'left' of undefined

Using default mixitup configuration $('#id').mixitup(), I am adding a filter button dynamically by appending html code for button <li> tag. And calling the same function again instantly after adding html code to the page, in order to make the new button work. After clicking some filter buttons on the page (even if I don't press the new one) animation effects break and on the browser console I see:
Uncaught TypeError: Cannot read property 'left' of undefined error.
The error occurs on line 937:
$toshow.each(function () {
var data = this.data;
data.tX = data.finalPos.left - data.showInterPos.left; //HERE
I saw on documentation how to add new images to the list by using jquery after method, but there are no explanations about how to dynamically add filter buttons and initialize them on the fly.
Is the described behaviour expected?
That means I am doing something wrong. Then, how to initialize the new filter button correctly?
I am using Mixitup 1.5.6 (latest) with jQuery 1.10.2 (Also tried with jQuery 2.0.3).
Thanks in advance!
Your problem is that either data.finalPos or data.showInterPos is undefined. console.log data after you define it to see if you even have those keys
$toshow.each(function () {
var data = this.data;
console.log(data); //here
data.tX = data.finalPos.left - data.showInterPos.left;

TypeError when running jasmine specs that use a jQuery plugin built using the Widget factory

I'm using a jQuery plugin called toggleEdit for inline editing.
Everything works fine when the code is actually used in the page.
However, my test suite fails with the following error:
TypeError: Cannot call method 'remove' of undefined
I tracked it down to be triggered from within the clear method of this particular plugin. Its source file can be found here.
There are two relevant bits in that code:
1- The _init function
self.element.addClass("toggleEdit toggleEdit-edit toggleEdit-edit-" +
self._tag(self.element))
//store reference to preview element
.data("toggleEdit-preview", self.p);
As you can see, when the plugin is first instantiated it uses the data structure on self to store the newly created element.
2- The clear function
self.element.data("toggleEdit-preview").remove();
The clear function then tries to access that structure and retrieve the element. That's when, while inside a jasmine spec, it fails with the aforementioned exception.
Has anyone seen anything similar?
EDIT:
This is my spec, it's the simplest piece of code able to reproduce the error:
it("should update the given attribute on the server", function(){
$('#user-details input, #user-details select').toggleEdit(); //this line triggers the error
});
http://alz.so/static/plugins/toggleedit/jquery.toggleedit.js
I was taking a look at the source for toggleEdit and it seems that the only 2 times the function clear is called is just before self.element.data gets set:
if (typeof self.element.data("toggleEdit-preview") !== "undefined") {
self.clear();
self.disableEvents();
}
And at destroy function:
destroy: function() {
var self = this;
self.clear();
self.disableEvents();
$.Widget.prototype.destroy.apply(self, arguments);
}
Since the first call seems to be protected, I ask you a somewhat dumb question: Is it possible that destroy is being called twice?
Found my problem: old version of the jQuery + jQuery UI duo. Upgrading them resolves the exception.

Categories

Resources