I am having an issue where all link button controls on my page do not work once we deploy our website to our production server. Here are a few details:
We have 3 environments upon which we develop: Our local Machine, which uses local IIS7 to run for development; test environment which is an actual webserver behind our firewall(IIS6); Production which is our live webserver(IIS6). The website works fine on local machines and test server but once we click a link button on production server it hangs.
The problem does not exist in Chrome, or FireFox it only exists in IE9. It does not exist when you put IE9 in compatibility mode.
If I use the IE9 Developer tool bar and watch the scripts, as soon as you click one of the link buttons the console shows this error:
SCRIPT28: Out of stack space
, line 340 character 9
I am using quite a bit of JQuery and am wondering if this is causing an issue: However, I see no javascript errors.
Any thoughts?
Thanks for any suggestions.
As people said in comments: it means that infinite recursion takes place. Whether it is simple recursion or some devious path across code like a serpent biting its tail - unknown, it seems IE gives out no stacktrace, or does?
I've reproduced this issue when I'm doing the following code:
HTML
<span class="search-icon"><input title="search" type="submit" value=""></span>
JS
(function($) {
$('.search-icon').on('click', function(e) {
// The click event will call $('.search-icon').on('click', function(e) { .. } for every time
// which make an infinte loop in click event as long as there are no stop condition added here.
$(this).find('input').click();
});
})(jQuery);
I've solve this problem by changing my JS code to be:
(function($) {
$('.search-icon').on('click', function(e) {
$(this).closest('form').submit();
});
})(jQuery);
I hope this answer will be helpfull for you.
Can you post the code / a link to the code, or close this issue?
Common problems: you might have a closure problem in the html, thus different browsers interpret the html hierarchy differently, or you might be looping through a for(x in y) where x contains a backreference to y.
Check out the msdn page for info on this error. In my case, the error was caused by:
Your code triggered an event cascade.
An event cascade is caused by triggering an event that calls an event procedure that's already on the stack. ...
Basically, I was trying to trigger a click event (using jQuery) on a file upload control using the control's click event. Seems like it would cause infinite recursion. Perhaps you may be having a similar problems with your buttons.
Related
EDIT
Added a link to a sandbox with working code. For some reason it seems to be working in the sandbox in the same browser it wont work on?!?!
CodeSandbox Demo
I am experiencing this weird issue of invoking a function in the console and it working as expected. However, when I invoke the function via an event listener it breaks the element.
The element is a canvas that is drawing different "bodies" on to it over a set interval.
Why would cause this function to work in the console but not in the document?
Two questions and then I might be able to help you.
Number 1: Are you using a library like p5.js or are you drawing it straight onto the canvas?
Number 2: Could you please post the code, as there might be an error?
Also if you want a quick solution, try using a different browser (although this might not be the solution, it is worth a try), such as Firefox Developer Edition, or just regular Firefox.
Hope this is helpful!
We're using the javascript plugin Simple-ajax-uploader to upload files on your web site and it suddenly stopped working today (09/05/2019).
The upload div/button can't be clicked on anymore.
This is happening on our site and even on the official plugin site.
This is only happening on Chrome and only on computers where Chrome has been closed and restarted today.
We found out this article indicating that Chrome Dev tools have just been updated today but our version of Chrome hasn't changed since the restart (76.0.3809.132). However the restart definitely triggered the bug so something happened there. But what?
Same problem here found this morning.
Quick jQuery fix...
$('input[type=file]').css('position','relative');
UPDATE: Issue has been fixed with version 2.6.5 of the plugin. Ignore the below.
Plugin maintainer here. A short term fix is to remove or comment out line 2002:
'position' : 'absolute',
Alternatively: the issue does not appear to be present in Firefox. At any rate, I'll try to have a fix pushed soon.
I've just checked on Chrome and you're right about the button not working. It is a problem with the Stacking Context, unfortunately each browser has its own implementation.
Basically the outer div is preventing the click events from reaching the inner input.
My suggestion would be to use a custom button or to restyle the current one (I've found that if you remove the position property from the outer div it will work again. Consider that many properties can cause stacking context problems: position, transform, opacity, z-index. Try adding/removing/modifying some of them, in the outer div and in the inner input).
Anyway, it is guaranteed to be a style problem and not a JavaScript problem.
We are building a Saas product and have purchased a bootstrap dashboard, all the JS/CSS assets are loaded though a sobdomain via our CDN.
Works perfectly on chrome but on ie and ff the components do not load properly, on ff I get the following errors:
TypeError: can't access dead object
ReferenceError: event is not defined
A link to a non working example is below (We don't want to give access to our working dashboard for commercial reasons) You can see the error when click on the "dropdown" menu item. As far as I can tell, all the assets are loading correctly.
http://hunchbuzz.com/acme/index.html
Any help would be appreciated.
Well, take your bugs one by one. Did you turn on the JavaScript Debugger when you tested your page in IE? In the F12 developer tools, select Script and then Start Debugging.
First there were a couple of errors in jquery.sparkline.min.js which I ignored for the moment. Then I tried clicking your 'dropdown' link and got this error:
SCRIPT438: Object doesn't support property or method 'preventDefault'
custom.js, line 3 character 1193
The highlighted code is (reformatted for readability):
$('.dropmenu').click( function(){
event.preventDefault();
// ...
});
Do you see the problem? What is event? The code should be:
$('.dropmenu').click( function( event ){
event.preventDefault();
// ...
});
The fact that it worked in any browser at all is probably due to the global event variable that some browsers create for compatibility with very old code.
Now back to the sparkline problems. I see it hitting two errors in jquery.sparkline.min.js, but with the minimized code the problem isn't jumping out at me the way the other one did.
When you're debugging, it would help a lot to load the non-minified versions of jquery.sparkline.js, custom.js, jQuery, etc. Then you'll have readable code to look at in the debugger, which should make it easier to spot these problems.
I have added a piece of javascript code and it is not getting reflected in some of my peer's machine. Don't know whats going wrong.
This is what I did.
OnClick of a button, there was an existing JS function and I added an overlay feature inside the click event like,
function existing() {
var testDate = document.getElementById('test');
......
.....
newOverlay(); // This is the newly added function
}
I defined the newOverlay() as
function newOverlay(){
document.getElementbyId('divId').style.display = 'block';
}
I have defined the new function above the existing() and both the functions are inside the head tag
When I check this change in my local environment, it was working fine and there was no issues. When I deployed to the server, it was working fine for me and my peer could not see the change in firefox. But, he can verify the change in IE and Chrome.
We were thinking of some cache in the browser and we cleared the cache (ctrl+shft+del --> Everything) and tried. The issues occurred again. The part I added was not in the DOM itself. We tried Ctrl+F5, but it was not helpful.
When we reset the firefox browser and tried, the change got reflected and it was working fine. Don't know what was exactly happening. The issue is still occurring in some of our machines. Kindly share your thoughts.
Note: The entire JavaScript is inside a JSP and all are using the same version of Firefox (latest)
Try double quoting in the getElementById(). "id_name" instead of 'id_name'. Sometimes browsers are prone to this kind of bugs.
I'm trying to debug some JavaScript, I want to find out what code gets executed when I hover over a certain div element (I've got no idea which bit of code, because there's no direct 'onmouseover' - I think there's a jQuery selector in place somewhere?).
Usually I'd use the "Break All" / "Break On Next" facility provided by Developer Tools / Firebug, but my problem is that other code (tickers, mouse movement listeners etc.) immediately gets caught instead.
What I'd like to do is tell the debugger to ignore certain JavaScript files or individual lines, so that it won't stop on code I'm not interested in or have ruled out. Is there any way to achieve that in IE (spit, spit!) - or could you suggest a better approach?
In FireFox this feature is called "Black boxing" and will be available with FireFox 25. It let's do exactly what you where looking for.
This feature was also introduced to Chrome (v30+) although it's tougher to find/configure. It's called "skip through sources with particular names" and Collin Miller did an excellent job in describing how to configure it.
Normally I'm for putting answers and howtos here instead of links but it would just end in me copying Collin's post.
Looks like you're looking for Visual Event.
You might want to take a look at Paul Irish's Re-Introduction to the Chrome Developer Tools, in particular the Timeline section (starts around 15 minutes into the video.)
You can start recording all javascript events - function executions (with source lines etc) and debug based on what events fired. There are other really handy debugging tools hiding in that google IO talk that can help you solve this problem as well.
If you're pretty sure it's a jQuery event handler you can try to poke around with the jQuery events.
This will overwrite all the click handlers (replace with the type you're interested in) and log out something before each event handler is called:
var elem = document.body; // replace with your div
// wrap all click events:
$.each($._data(elem).events.click, function(i, v) {
var h = v.handler;
v.handler = function() {
// or use 'alert' or something here if no Dev Tools
console.log('calling event: '+ i);
console.log('event handler src: '+ h.toString());
h.apply(h, arguments);
};
})
Then try calling the event type directly through jQuery to rule out that type:
$('#your_div').click()
You can use JavaScript Deobfuscator extension in Firefox: https://addons.mozilla.org/addon/javascript-deobfuscator/. It uses the same debugging API as Firebug but presents the results differently.
In the "Executed scripts" tab it will show you all code that is running. If some unrelated code is executing as well it is usually easy enough to skip. But you can also tweak the default filters to limit the amount of code being displayed.
If using are using IE 7.0 onwards, you should have developer toolbar from where you can debug. Just use breakpoint where you need, rest of the code will not stop.
Alternatavely you can define other applications like Interdev/ Visual Studio.net for debugging purpose too.