const targetPos = target.offset();
I am getting this error:
Uncaught TypeError: elem.getClientRects is not a function
The target is not a window. jQuery version is 3.2.1 and I am not using jQuery UI.
Any ideas why is it crashing and how to fix it?
Oh, it turns out target was a wrong object (#adeneo was probably suspecting this).
When passing it to a function which expects the target I forgot that ElementRef (element field) is not actually the DOM element I wanted, it's just a wrapper.
I changed
jQuery(angularComponent.element)
to
jQuery(angularComponent.element.nativeElement)
and now it works :).
Related
carousel.js:5 Uncaught TypeError: Cannot read property 'children' of null**
I got this error when I'm going to ad slider to the page.
here is the js code for the error.
const track = document.querySelector('.carousel_track');
const slides = Array.from(track.children);
const dotsNav = document.querySelector('.carousel_nav');
const dots = Array.from(dotsNav.children); //here
const slideWidth = slides[0].getBoundingClientRect().width;
slides[0].style.left = 0;
slides[1].style.left = slideWidth + 'px';
Can anyone give me a solution for this? I really appreciate your help.
Apparently the error throws here const dots = Array.from(dotsNav.children); //here , though the source of error is coming from previous line.
The error hints that the track is null, which can happen when the selector didn't return any value.
Without seeing your HTML code its not so clear whats the exact reason, but its obvious that the element with class carousel_nav doesn't exist in the DOM at the moment of execution of this code.
Steps to debug:
Do the console log after acquiring the track object.
const dots = document.querySelector('.carousel_nav');
console.log('Dots are: ', dots);
...
Then on the console of the browser check the value, its probably null.
Check if the class is written correctly on the HTML element, without typos and mistakes. You can even run the js directly on the browsers console to see if the code is actually fetching .carousel_nav
If when you run your js code in browser's console and it returns actual value instead of null, but on the page load it still returns null then it can mean the carousel is being initialized by 3rd party library after certain event, most probably document.ready, you have to as well listen to the document ready event and only after that execute your code.
Sometimes just waiting for the document ready is not enough, so check the documentation of the library that you use, it should have some callback where you can execute your code exactly after the carousel is being initialized.
Might be that the carouself library that you use, need an additional parameter to render dots, do you actually see the dots in the rendered dom?
If you need more hints, provide the library name youre using and also html
P.S.
Sorry I didn't see //here comment. But the debugging steps are the same
My code is:
var internal= $("span[title='expand']")[0];
var clickEvent = document.createEvent("MouseEvent");
clickEvent.initEvent("click",true,true);
internal.dispatchEvent(clickEvent);
and IE9 throws runtime error
Unable to get property 'dispatchEvent' of undefined or null reference
I am confused because IE9 starts supporting dispatchEvent. But IE10 AND IE11 works fine with the same code.
How can I solve it? Thanks!
Are you sure the local variable 'internal' is not undefined at the moment dispatchEvent is called?
Did the call to jQuery to fetch the span return a valid DOM Node?
I am trying to use draggabilly available at
https://github.com/desandro/draggabilly
it works fine in html. Now when i have tried to add it in wordpress. I am getting following error in firebug console.
TypeError: Argument 1 of Window.getComputedStyle is not an object.
return s.getComputedStyle(t, null)
here is a link for js file
http://draggabilly.desandro.com/draggabilly.pkgd.min.js
You are calling init twice. Go through your code and remove one instance.
I received this error testing my project with IE8: finally it was so obvious, this method doen't work with IE 8!
Error: Object doesn't support this property or method at: http://...
I received this error with FF that does support this method but I forgot to change window to my frame window object!
console.log(getComputedStyle(window.document.querySelector('.tip > .tip.top'), ':after').getPropertyValue('left'));
TypeError: Argument 1 of Window.getComputedStyle is not an object.
at: http://...
Note that the above error pops up even if your window object is ok but the querySelector returns nothing! (I suspect it's your case).
Hey all looking throughout all of stackoverflow this looks like a common error i just cant wrap my head around. i am busy upgrading our site from pure JS to jquery in preparation for us moving over to Rails 3.1 now i have this javascript:
:javascript
["Ownership", "Management", "EmploymentEquity", "SkillsDevelopment", "PreferentialProcurement", "EnterpriseDevelopment", "SocioeconomicDevelopment"].each(function(element) {
$$('.' + element).each(function(s) {
s.toggle();
});
});
so basically it is running trough an array of css classes and then toggling them. now when i run this with the jQuery lib i get an error that looks like this
Uncaught TypeError: Object Ownership,Management,EmploymentEquity,SkillsDevelopment,PreferentialProcurement,EnterpriseDevelopment,SocioeconomicDevelopment has no method 'each'
now i am just trying to test one element at a time to get the jQuery working at least this is what i have so far.
$("OwnershipHeader").click(function () {
$("Ownership").toggle("slow");
});
very simple so just when you click on the header it toggles its children. so when i enter that in the console it works just fine. until i click on the header of coarse:
Uncaught ReferenceError: $$ is not defined
this seems really simple and yet its breaking every time... i am relatively new to jQuery i have just worked with the Jquery UI lib before. any suggestions are appreciated
Uncaught TypeError: Object Ownership,Management,EmploymentEquity,SkillsDevelopment,PreferentialProcurement,EnterpriseDevelopment,SocioeconomicDevelopment has no method 'each'
I think you meant forEach. But since this doesn't work in all browsers, use jQuery's each function
$.each(["Ownership", "Management"], function(i, element) {...
Uncaught ReferenceError: $$ is not defined
jQuery uses a single dollar sign ($)
$("OwnershipHeader").click(function () {
$("Ownership").toggle("slow");
});
jQuery selectors are mostly like CSS selectors. So this should work:
$(".OwnershipHeader").click(function () {
$(".Ownership").toggle("slow");
});
Try this.
var array = ["Ownership", "Management", "EmploymentEquity", "SkillsDevelopment", "PreferentialProcurement", "EnterpriseDevelopment", "SocioeconomicDevelopment"];
$.each(array, function(i,element) {
$('.' + element).toggle();
});
It looks like it was coded previously with PrototypeJS, which provides $$ and [].each.
I'm not sure if .toggle is the same behavior in PrototypeJS and jQuery.
var col = ["Ownership", "Management", "EmploymentEquity", "SkillsDevelopment", "PreferentialProcurement", "EnterpriseDevelopment", "SocioeconomicDevelopment"];
$.each(col,function(i,e){
$('.'+e).each(function(j,s){
$(s).toggle();
});
})
*in jquery first of all there is no variable defined as $$ and only $ is defined.
*secondly each function is used as i have mentioned and the first variable passed to the function that is provided to each is the index in array and second variable is the actual element
look here for each and toggle documentation
I have a class that extends dijit.Dialog but only to set default functionality and buttons for my site. When clicking the dialog's cancel button the following code is run:
this.actionDialog.destroyRecursive();
this.actionDialog.destroy();
nb this.actionDialog = dijit.Dialog
Sometimes (not always) the following error gets thrown:
Uncaught TypeError: Cannot call method 'destroy' of undefined
DialogUnderlay.xd.js:8
Which causes following dialogs to incorrectly display. I am using 1.5 from Google API's. Am I missing something with the underlay code?
Error thrown after Ken's answer:
exception in animation handler for: onEnd
TypeError: Cannot read property 'style' of null
Both from dojo.xd.js:14. But the code still works properly.
I'm still not entirely sure what the problem is, other than for some reason dijit.DialogUnderlay code is getting confused. FWIW, this doesn't happen in Dojo 1.6.
While I was poking at some potential solutions, I seemed to accidentally find out that avoiding this problem is perhaps as easy as calling hide() on the dialog immediately before destroying it, e.g.:
this.actionDialog.hide();
this.actionDialog.destroyRecursive();
Alternatively, you might be interested in hiding the dialog, then destroying it once the hide animation finishes.
Here's how you can do it on Dojo 1.5 and earlier (tested 1.3+):
dlg.connect(dlg._fadeOut, 'onEnd', function() {
this.destroyRecursive();
});
dlg.hide();
In 1.6, the fadeOut animation is no longer exposed on the instance (granted, it was technically private earlier anyway), but onHide now triggers once the animation ends (whereas before it triggered as soon as it began). Unfortunately a setTimeout is needed to get around an error that occurs due to other code in the branch calling onHide, which assumes that something still exists on the instance which won't after we've destroyed it (see #12436).
dlg.connect(dlg, 'onHide', function() {
setTimeout(function() { dlg.destroyRecursive(); }, 0);
});
dlg.hide();
See it in action on JSFiddle: http://jsfiddle.net/3MNRu/1/ (See the initial version for the original error in the question)
The dialog.hide() method returns a Deferred, your code can be something more readable like this:
var dialog = this.actionDialog;
dialog.hide().then(function(){ dialog.destroyRecursive(); });
Be careful not to do this:
this.actionDialog.hide().then(function(){ this.actionDialog.destroyRecursive(); });
At the context of then this has another meaning!
You only need to call destroyRecursive()
The second destroy command is what is probably causing the error, and the error probably is causing the issues with other dialogs.
http://dojotoolkit.org/api/1.3/dijit/_Widget/destroyRecursive
destroyRecursive
Destroy this widget and it's descendants. This is the generic "destructor" function that all widget users should call to cleanly discard with a widget. Once a widget is destroyed, it's removed from the manager object.
I was getting the IE8 error : 'this.focusNode.form' is null or not an object. I found this was the result of the dialog.hide() returning a deferred. I wrote my own _closeDialog which eliminated the IE error.
_closeDialog : function(cntxt){
cntxt.popup.hide().then(
function(){
cntxt.popup.destroyRecursive(false);
cntxt.popup.destroy(false);
cntxt.destroyRecursive(false);
cntxt.destroy(false);
});
},