Develop Reference

Wordpress JQuery Conflict (theme and plugin)

A wordpress website I am developing is throwing an error with the QTip tooltip function. The theme I am using is called Eventum and the tooltip is included in the calendar of the Event Espresso Plugin. With a default WP theme, the calendar works just fine, but with the Eventum theme it is giving the following error:
Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value).done is not a function
at QTip.PROTOTYPE._waitForContent (jquery.qtip.js?ver=2.2.0:633)
at QTip.PROTOTYPE._update (jquery.qtip.js?ver=2.2.0:618)
at QTip.PROTOTYPE._updateTitle (jquery.qtip.js?ver=2.2.0:642)
at QTip.PROTOTYPE.render (jquery.qtip.js?ver=2.2.0:187)
at QTip.<anonymous> (jquery.qtip.js?ver=2.2.0:1501)
at d (jquery.js?ver=1.12.4:2)
The theme uses wp_enqueue_script for the JQuery functionality and other than that I can't see why it isn't working. The function which is breaking from the qtip.js file is:
PROTOTYPE._waitForContent = function(element) {
var cache = this.cache;
// Set flag
cache.waiting = TRUE;
// If imagesLoaded is included, ensure images have loaded and return promise
return ( $.fn.imagesLoaded ? element.imagesLoaded() : $.Deferred().resolve([]) )
.done(function() { cache.waiting = FALSE; })
.promise(); };
Any ideas how to fix the error?

I think in Worpress you can't use $ directly. Not sure why they don't add that but try with jQuery instead of $
UPDATE
Ok, I think the issue is still with javascript. See if $.fn.imagesLoaded and $.Deferred are defined in your theme. It looks like one or other is not defined and not returning a promise() so undefined.done() throws an error. If imagesLoaded() is defined then I don't think it should throw that eror. Most likely it is not defined so it falls under $.Deferred() function which is also undefined. You may need to get imagesLoaded function and include that script before. Which most likely solve your issue
http://imagesloaded.desandro.com/
https://api.jquery.com/jquery.deferred/

Uncaught TypeError: $(...). is not a function... flagged after upgrade to PHP7.0

I upgraded my test server environment from PHP 5.x to 7.0. This has resulted in quite a few changes to the base code (mysql --> mysqli, etc), but this error has me running in circles. I am using the stock slimbox2 lightbox jQuery alternative. After the upgraded PHP modules, and dsorted out most of the issues, the slimbox no longer worked, and flagged with this error:
Uncaught TypeError: $(...).slimbox is not a function
If I drill down a bit, the following is the location the error is coming from (straight from slimbox2.js.. v2.05):
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
Other posts seems to circle in on this error being a conflict between JQuery / Prototype / etc.
The function is defined in slimbox2.js and they all appear to be wrapped in JQuery to ensure the right bits are being pulled.
Thanks for any ideas of help you can provide!

Turns out the issue was buried somewhere in a package that was not properly installed. I unloaded the webserver and php packages and put them back again, resoling the issue.

Error initializing Rangy.js in Internet Explorer

I'm working on an angular app that uses textAngular, which depends on rangy-core and rangy-selectionsaverestore. I'm having the following errors with the latest IE:
Module 'WrappedSelection' failed to load: Unspecified error.
Error: Unspecified error.
at Anonymous function (js/plugins/textAngular/rangy-core.js:2970:29)
at Anonymous function (js/plugins/textAngular/rangy-core.js:2923:14)
at Anonymous function (js/plugins/textAngular/rangy-core.js:415:21)
at Module.prototype.init (js/plugins/textAngular/rangy-core.js:387:13)
at init (js/plugins/textAngular/rangy-core.js:294:17)
at loadHandler (js/plugins/textAngular/rangy-core.js:3825:17)
Module 'SaveRestore' failed to load: Unable to get property 'isDirectionBackward' of undefined or null reference
TypeError: Unable to get property 'isDirectionBackward' of undefined or null reference
at Anonymous function (js/plugins/textAngular/rangy-selectionsaverestore.js:30:9)
at Anonymous function (js/plugins/textAngular/rangy-core.js:415:21)
at Module.prototype.init (js/plugins/textAngular/rangy-core.js:387:13)
at init (js/plugins/textAngular/rangy-core.js:294:17)
at loadHandler (js/plugins/textAngular/rangy-core.js:3825:17)
This error seems to happen during rangy initialization.
What is odd about this is that the TextAngular demo works fine on Internet Explorer. One different between the demo and my application is that I'm using the unminified rangy library. Finally, these errors do not happen on Chrome or Firefox.
Although the app loads (I think the errors above are just warnings in the console), when I click into the textAngular field, I see the following error:
Object doesn't support property or method 'getSelection'
File: textAngular.js, Line: 693, Column: 4
I can't find anything in the textAngular or rangy github that addresses these problems. Has anybody encountered these issues before?
If it helps, I can post the link to our application.
Thanks!

Looks like textAngular is initializing rangy select too early. I fixed this issue by updating textAngular/dist/textAngular.js ln 2036 to wait for onload before checking for rangy library
window.onload = function() {
// Ensure that rangy and rangy.saveSelection exists on the window (global scope).
// TODO: Refactor so that the global scope is no longer used.
if(!window.rangy){
throw("rangy-core.js and rangy-selectionsaverestore.js are required for textAngular to work correctly, rangy-core is not yet loaded.");
}else{
window.rangy.init();
if(!window.rangy.saveSelection){
throw("rangy-selectionsaverestore.js is required for textAngular to work correctly.");
}
}
};

I was having this same issue. I tried the window.onload fix suggested but it just got me to another error about textAngularSetup not being loaded. I took the window.onload fix out and included the textAngularSetup.js file. It now is working fine in Chrome and IE. I am confused because I didn't see that file included in the demo.

sharing my solution, I also got the same issue in IE 11(edge mode), tried with above solution(window.onload), but issue was still persisted in the app.
I have done following changes,
Added window.onload as in above solution, textangular.js - run() function
Replaced textangular-rangy.min.js with rangy.core and rangy-selectionsaverestore dependencies,
Modified the core code to handle the exception,
File: rangy-core.js, line number:2967-2972
var r2;
try {
// code generating above exception
r2 = r1.cloneRange()
r1.setStart(textNode, 0);
r2.setEnd(textNode, 3);
r2.setStart(textNode, 2);
sel.addRange(r1);
sel.addRange(r2);
selectionSupportsMultipleRanges = (sel.rangeCount == 2);
} catch (e) {
selectionSupportsMultipleRanges = false;
}
It might help, tested in IE11 and chrome

i was facing the same issue while loading the third party tool into modal popup where i have dependency of textangular-rangy.min.js
I have replaced textangular-rangy.min.js with rangy.core and rangy-selectionsaverestore dependencies,
Modified the core code to handle the exception,
File: rangy-core.js, line number:2967-2972
var r2;
try {
// code generating above exception
r2 = r1.cloneRange()
r1.setStart(textNode, 0);
r2.setEnd(textNode, 3);
r2.setStart(textNode, 2);
sel.addRange(r1);
sel.addRange(r2);
selectionSupportsMultipleRanges = (sel.rangeCount == 2);
} catch (e) {
selectionSupportsMultipleRanges = false;
}
it works in IE11 and chrome :)

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.

"undefined handler" from prototype.js line 3877

A very niche problem:
I sometimes (30% of the time) get an 'undefined handler' javascript error on line 3877 of the prototype.js library (version 1.6.0.2 from google: http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js).
Now on this page I have a Google Map and I use the Prototype Window library.
The problem occurs in IE7 and FF3.
This is the info FireBug gives:
handler is undefined
? in prototype.js#3871()prototype.js (line 3877)
handler.call(element, event);
I switched to a local version of prototypejs and added some debugging in the offending method (createWraper) but the debugging never appears before the error...
I googled around and found 1 other mention of the error on the same line, but no answer so I'm posting it here where maybe, some day someone will have an answer :).

I just found out this error also occurs if you accidentally leave on the parenthesis on your observer call:
Event.observe(document, 'myapp:application_ready', myapp.MyClass.initApp());
instead of
Event.observe(document, 'myapp:application_ready', myapp.MyClass.initApp);

This will probably cause an error:
Event.observe(myElement, 'click', myFunction(myParameters));
You should do it like this instead:
Event.observe(myElement, 'click', function() { myFunction(myParameters) });

I switched to a local version of prototypejs and added some debugging
in the offending method (createWraper) but the debugging never appears
before the error...
Actually the offending function being called when the error occurs is "wrapper" which is created inside createWrapper (but not called there). Basically what is happening is that you've attached a function as the event handler for an element, and the function doesn't actually exist.
If you're trying to put any debug information in to try and pinpoint which function "doesn't exist" then add your alert messages or firebug console output inside the wrapper function between lines 3871 and 3878.

Really simple solution for “undefined handler” from prototype.js error in Prototype is just... fix prototype. I found advice here: https://prototype.lighthouseapp.com/projects/8886/tickets/407-ie7-i8-report-handler-is-null-or-not-an-object and it's actually working.
Just find line with:
handler.call(element, event);
and replace with
if (handler) handler.call(element, event)
problem solved with prototype 1.6.0.3 and latest :)