jquery.dragtable.js, simple error, WTF solution - javascript

Sorry for bad title, but I'm at a loss here.
I am implementing akottr's dragtable jquery for reordering columns in a table, and have no luck, source code and demos here https://github.com/akottr/dragtable and here http://akottr.github.io/dragtable/
In the source .js file I put,
$(document).ready(function () {
$(".reorderable").dragtable();
});
And my table has reorderable in its class, which should have been all I need
I get:
Uncaught TypeError: undefined is not a function
on $(".reorderable").dragtable(); in Chrome dev tools surprise surprise $(".reorderable").dragtable returns an undefined
The demo works and is the same source files, am I missing something to register the dragtable method?

I tried to use dragtable today and got the same error. The error went away when I corrected the order javascript files were loaded and also I used the dragtable.js from demo
http://rawgit.com/akottr/dragtable/master/jquery.dragtable.js
its working fine for me. Seems like a very old question,may it help others :)

Related

Uncaught TypeError: jQuery(...).fancybox is not a function |fancybox used in wordpress

I have a wordpress website and I want to show my video using fancybox, so I tried wp plugin like "fancybox for wordpress" and "easy fancybox".
But both of them give me the error message "Uncaught TypeError: jQuery(...).fancybox is not a function".
I search for many questions on here and found this can be jquery conflict, but I cannot figure out where is it.
here is my site http://skyblueenglish.co.uk
Notice that I only have one of above plugins at one time.
as per my thinking and till i have checked, what happen is,
in word-press you have included fancybox jQuery and it will obviously installed when you have installed the plugin. Now what happen is ,while using some JS function or JS Class it is mandatory to include jQuery file before we use/include the third party JS.
I checked the "View Source" for your page.
<script src="http://skyblueenglish.co.uk/wp-content/themes/skybluetheme/js/jquery.min.js"></script>
and i found that above JavaScript file is included in the footer.
i just removed that line and put it before
<script type='text/javascript' src='http://skyblueenglish.co.uk/wp-content/plugins/fancybox-for-wordpress/fancybox/jquery.fancybox.js?ver=1.3.4'></script>
and the error is Gone.
so what you have to do is, you have to find your footer, find the included jquery.min.js . remove it from the footer and include it from header.
Let me know if you dont understand anywhere.
;( function( $ ) {
$(document).ready(function(){
$(".fancybox").fancybox({
//....
});
});
} )( jQuery );
I did so many experiments on same topic and also tried with many different way to solve according to wherever I found similar topics on internet but trust me nothing worked out for me and then finally I simply tried to see what exactly error says:
Uncaught TypeError: $(...).fancybox is not a function
and for which I simply removed a line which was saying if($.fn.fancybox!==null).
I am not strong enough to understand Javascript or Jquery thing being fresher so I just tried with simple logic and it worked for me lol.
This might not be the right solution but just thought to share my experience so maybe for someone it may work too.
It worked properly without loosing any function by removing below code
if($.fn.fancybox!==null)
{$("a[class^='fancyBox']").fancybox();
$("a[class^='fancybox-thumb']").fancybox(
{helpers:{title:{type:'outside'},thumbs:{width:50,height:50}}});}
Thank You!

IE 11 showing error when i clicking with jquery function

IE so much confusing me with some errors like this,
SCRIPT1002: Syntax error
File: jquery-2.1.4.min.js, Line:2 Column 2538
The weird thing is , on firefox and chrome running well and no error.
And some button with jquery click function is working.
I'm Using IE 11
Before this i'm using jquery-1.1.13.min.js and when i use jquery 2.0 it still running properly on firefox and chrome
I'm really new with cross browser so any info will helping me very much, thanks :)
For the record I had this error which only showed itself on IE when doing cross-browser testing of a big Javascript code change.
In my case the problem was a function definition which included what would be a default in any other language:
i.e. Function Foo(param1, param2, param3=false)
.. clearly this was a stupid bit of code .. but it took me a while to track down so this might help someone out there. Doesn't show up in Chrome, FF, or even Edge.
Mostly these errors are not problems of jQuery itself. The problem situates in code using jQuery or inserted into jQuery (callbacks or event functionalities). In my case I used $.ajax to load a remote page in a div element. In the page I loaded there where // comment tags in the javascript part. As IE is putting this content on one line, more code that as I wanted was commented and this created the error.
So if in our case us are using $.ajax maybe this can be an issue. Otherwise best thing to do is debugging the code that generates this error and look for code that is not supported by IE (the version you use). Look for functions passed trough to jQuery.

Can't destroy CKEditor instances

I'm trying to refresh all my CKEditor instances using this code:
for(name in CKEDITOR.instances)
{
console.log(name);
CKEDITOR.instances[name].destroy();
//Also tried this
//CKEDITOR.instances[name].destroy(true);
}
CKEDITOR.inlineAll();
and I'm receiving this:
Uncaught TypeError: Cannot call method 'getRanges' of null.
The interesting part is that, if I use the code directly in the console, it works just fine.
Anyone has any idea on how to solve it?
Check this bug report: http://dev.ckeditor.com/ticket/10219
In 4.1 and 4.0.3 we have partially fixed this issue, but... only partially :). However, this error shouldn't cause any problems - it is completely harmless.
I also had the same issue but it seems to be fixed in ck-editor-dev repositories.
Somebody checked in a fix 2 days ago for CKEDITOR 4.1.1 milestone.
Check http://dev.ckeditor.com/ticket/10219 again to access the change link in git.

$.datepicker not defined

I cannot coax the datetimepicker to work. Datepicker works fine. But the add-on has not worked after about 7 hours of attempts.
Firebug shows no 404's.
All jQuery libraries are included with the theme framework as well.
I tried replacing all instances of $.datepicker with jQuery.datepicker in the script. This made no difference.
I tried moving scripts above or below or combining them. The same error persists. I have examined several related answers in this forum and many, many others to no avail. I have reviewed jQuery literature but it does not address this specific problem..
My code is this. Just a couple of html inputs. Datepicker works fine.
`jQuery(document).ready(function(){
jQuery('#datepicker').datepicker();
});
jQuery(document).ready(function(){
jQuery('#datetime').datetimepicker();
});`
This segment of code works fine. Datetimepicker then hits the line
$.datepicker.parseDateTime = function(dateFormat, timeFormat, dateTimeString, dateSettings, timeSettings) {
$.datepicker not defined.
If you do not know the answer, perhaps there is a way for javascript/jQuery to produce more detailed information about its failures?
Change to this
jQuery(document).ready(function(){
$.datepicker.parseDateTime = function(dateFormat, timeFormat, dateTimeString, dateSettings, timeSettings){};
});
Looks like you are trying to call the function before it gets loaded. Jquery will go through each doc.ready function in order, so as long as this is after the initial load it should work.
Also, use chrome's built in develop tools for debugging purposes. Ctrl-shift-j on a PC will open them up, you can see the console messages to figure out whats going on.
heres a jsfiddle to show the working syntax http://jsfiddle.net/XA79k/
( function($$) {
$$(document).ready(function(e) {
$.datepicker.parseDateTime = function(dateFormat, timeFormat, dateTimeString, dateSettings, timeSettings) {
});
} ) ( jQuery );
I had similiar issues and had to do it this way since there was conflicts. And I tried jQuery.noConflict() aswell, but didnt work. Above code worked for me.

Jquery Error in ie8 and ie9 with Wordpress theme. (Object doesnt support this property or method)

I recently launched a website for a client http://www.bridgechurch.us/ only to recieve complaints of it not displaying correctly on ie8 or ie9. I have confirmed this to be true. IE is pointing to this line of Javascript:
jQuery(function () {
jQuery(".scrollable").scrollable({circular: true}).navigator().autoscroll({interval: 7000});
[...]
Can anyone help me figure out what is wrong with this line of code?
Thank you
UPDATE - FIXED
I figured out that there was a comment before the Doctype Declaration that forced IE into quirks mode.
You have a lot of 404's on that page, mainly related to ie-specific css and border images, which is probably why the page doesn't look like it should. Files like /images/internet_explorer/borderBottomRight.png and /wp-content/themes/Moses/styles/default.css aren't loading.
That being said, looking at the scrollable documentation, there is no .navigator() function off of the return value of scrollable(); and I'm getting the same error in Chrome.
Well, visually, the site doesn't appear to work well at all in IE9 (compared to Chrome). But just looking at the code that adds scrollable() to jQuery, you can see that that function doesn't always return the original element. In your code, if you split the call into two, you might be ok:
jQuery(".scrollable").scrollable({circular: true});
jQuery(".scrollable").navigator().autoscroll({interval: 7000});
I blame the plug-in on this one: functions that extend jQuery are supposed to always return the original elements found by the selector.

Categories

Resources