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/
Related
I am aware of the another question like this on stackoverflow and have looked at it, but it doesn't answer/resolve my situation that I'm having from which the error has occurred.
I'm trying to make both scripts, embed.js (plugin) & more-content-arrow.js (my script) work properly on the page when the document loads. When and if I remove either script, one or the other will work but not both scripts together. When the page finishes loading first, it will load the more-content-arrow.js properly, then when it is trigged again by a scrolling event, it will give off this error message in the console browser:
VM249 embed.js:2 Uncaught TypeError: ((fe.event.special[s.origType] || (intermediate value)).handle || s.handler).apply is not a function
at dispatch (VM249 embed.js:2)
at m.handle (VM249 embed.js:2)
I tried to resolve it by adding a jQuery.noConflict();, but that doesn't work as I assume it could be a conflict between the two scripts. The only way I found out to get rid of the error message is removing one of the two scripts file or removing $.getScript(...), but I don't want to do that. I want to be able to keep both scripts running properly in the page.
JS:
$(document).ready(function(){
//jQuery.noConflict();
$.getScript("more-content-arrow.js", function(){
alert("arrow script loaded and executed.");
});
});
I recreated a jsfiddle with the uncaught type error here:
https://jsfiddle.net/wr6cc2ct/2/
Your error appears it be in your more-content-arrow.js file, you were passing an integer as a third argument which is not a handler, here is the jquery doc for .on()
$(window).on('scroll', function () {
if (!footerIsVisible) {
$('.bounce').fadeIn(300);
}
}); // <--- removed integer here.
Update
Alternatively, you can use event.stopPropagation(); along with re-ordering the jquery.unevent.js script after the ember.js script.
$(window).on('scroll', function (e) {
e.stopPropagation();
if (!footerIsVisible) {
$('.bounce').fadeIn(300);
}
}, 800);
After i include the bootstrap.js
<script type="text/javascript" src="/js/bootstrap/js/bootstrap.js"></script>
I get followning error in the console:
Uncaught TypeError: Cannot read property 'documentElement' of null
The boots collapse works just fine but the console get spammed this error.
I have included jquery before bootstrap.
Anyone else had this problem before?
Edit:
Tooltip.prototype.show = function () {
var e = $.Event('show.bs.' + this.type)
if (this.hasContent() && this.enabled) {
this.$element.trigger(e)
var inDom = $.contains(this.$element[0].ownerDocument.documentElement, this.$element[0])
if (e.isDefaultPrevented() || !inDom) return
var that = this
this is a snipet from the bootstrap.js script.
It seems the error comes always in the tooltip function in the var inDom line at the documentElement part
You most likely have another tooltip library still in use (like JQueryUI/Tooltip) OR you're trying to attach a tooltip directly to the document element. Please look into your code for something like:
$(document).tooltip
or something like that, and remove it in order to make things work again. Be sure to review every other .tooltip() call you might already have, since they'll most likely not work anymore: you'll need to manually port them to Bootstrap in order to make them work again.
If you want to keep both Bootstrap/Tooltip and JQueryUI/Tooltip (assuming that's your scenario), you can use $.widget.bridge to manually change the JQueryUI tooltip plugin name:
// Change JQueryUI/tooltip plugin name to 'uitooltip' to fix name collision with Bootstrap/tooltip
$.widget.bridge('uitooltip', $.ui.tooltip);
You need to to this AFTER importing the JQueryUI js file and BEFORE importing the Bootstrap js file: while you're at it I also suggest you to do the same with button/uibutton to solve the exact same problem. The result code will look like that:
<script type="text/javascript" src="path/to/jqueryui.js" />
<script type="text/javascript">
// Change JQueryUI plugin names to fix name collision with Bootstrap:
$.widget.bridge('uitooltip', $.ui.tooltip);
$.widget.bridge('uibutton', $.ui.button);
</script>
<script type="text/javascript" src="path/to/bootstrap.js" />
Then you can just re-route your $(document).tooltip call to $(document).uitooltip to make everything work.
Alternatively, if you don't find the offending js code and/or you don't want to use $.widget.brige, you can always manually patch bootstrap.js to avoid this kind of error. This can be done by replacing the following line (#1384 in bs 3.3.1):
var inDom = $.contains(this.$element[0].ownerDocument.documentElement, this.$element[0])
with this line:
var inDom = $.contains((this.$element[0].ownerDocument || this.$element[0]).documentElement, this.$element[0])
Keep in mind, tho, that you'll still have a broken .tooltip() call in your code somewhere.
See also:
http://www.ryadel.com/2015/01/03/using-jquery-ui-bootstrap-togheter-web-page/ (an article I wrote on my blog to better explain the issue)
https://github.com/twbs/bootstrap/issues/14483
http://jqueryui.com/tooltip/
Check whether the element is null before initialising it
i.e.
if($('[data-toggle="tooltip"]') != null)
{
$('[data-toggle="tooltip"]').tooltip();
}
I have problem with website slide. after clicking on inspect element in chrome i get massage
"Uncaught TypeError: undefined is not a function" in file custom.js
here is file code
jQuery(document).ready(function() {
jQuery('#slider').nivoSlider({pauseTime: 4500}); });
}
here is website address http://myisraeltoday.com using WordPress
Theme: http://wordpress.org/themes/effect
Help needed
That means that you're calling something as a function (or method), when in fact it doesn't exist. You're calling three functions:
jQuery
jQuery(document).ready
jQuery('#slider').nivoSlider
The third of these is most likely the problem.
try changing your code to this :
$(document).ready(function() {
$('#slider').nivoSlider({'pauseTime': 4500});
});
PS : Note the }); at the end not just the $
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
I recently updated my project to dojo version 1.6.2 from 1.6.1 now I keep getting strange errors without any code changed.
Chrome error console:
Error parsing in _ContentSetter#Setter_DIV_0
/etermin/js/dojo-release-1.6.2/dojo/../dijit/layout/ContentPane.js:203
Error undefined running custom onLoad code: This deferred has already been resolved
/etermin/js/dojo-release-1.6.2/dojo/../dijit/layout/ContentPane.js:142
Firefox error console:
dojo.js (vrstica 324)
Error parsing in _ContentSetter#Setter_DIV_0
Error: Could not load class 'dijit.form.FileringSelect
dojo.js (vrstica 372)
Error undefined running custom onLoad code: This deferred has already been resolved
There is a problem in the dojo.js file: If I change it back to 1.6.1 it makes things work. But I want to use 1.6.2 version
Plaease help and advise
UPDATE:
Something strange that I've found:
var p = new dijit.MenuItem({
label: "cut",
})
p.onClick = function() {
dojo.xhrGet({
//some ajax call
});
}
Doesn't work. But if I put just one simple alert before the ajax it works.
p.onClick = function() {
alert("123");
dojo.xhrGet({
//some ajax call
});
}
Why don't you update your Version to 1.9? Sooner or later the legacy dojo won't work anymore and in the Google Hosted librarys i found no Version 1.6.2
Have a look:
https://developers.google.com/speed/libraries/devguide
Is it still available? Where do you get the dojo.js from?
To prevent the timing Issue of the Menu, you can define the onClick when you
define your MenuItem.
Have a look :
var p = new dijit.MenuItem({
label: "Menu Item With an icon",
iconClass: "dijitEditorIcon dijitEditorIconCut",
onClick: function(){alert('i was clicked')}
}));
Regards, Miriam
This is reported as a bug.
Look here for the bug report..
You have to patch your dojo version or Upgrade it to 1.8 or later to fix it.
If you know what you are playing with you can fix it manually.
The patch is on here.
You can manually apply this to your current dojo build to fix it.