Develop Reference

Something overwrites window.onbeforeunload in Javascript

Hello guys,
I have a strange problem with my ASP.NET 4.5 page. For some strange reason, my window.onbeforeunload function gets overwritten every time I load the page. Inside the debugger, I can clearly see that the right value is set in my head section, if I place a breakpoint there. However, after finishing the loading process of the site, the value changes to the following:
function (a){return typeof p!="undefined"&&(!a||p.event.triggered!==a.type)?p.event.dispatch.apply(h.elem,arguments):b}
I have no idea where this is coming from. This is my code from the head section of the page:
window.onbeforeunload = function (e) { return 'Do you really want to cancel?'; };
I'm using JQuery 2.1.3 as well as DevExpress 14.2 in my project. Any idea what could be responsible for this weird behavior?
Thanks in advance!

I actually found the answer where this is coming from thanks to #DavidTansey's hint. It's the Browser Link feature that was introduced in Visual Studio 2013. It looks like Browser Link uses some old jQuery library and overwrites various handlers.
So if you are having the same issue, please try to disable the feature (the menu is next to the browser selection in the tool bar). This should solve the problem.
I'm pretty sure that this problem wouldn't appear on a real server, because it would likely not use Browser Link.

HtmlUnit wait for onclick event

I have this web code:
<a id="btn">Click</a>
<script>
$('document').ready(function() {
$('#btn').click(function() {
...
location.search = $.params({click: '1'});
});
});
</script>
This code work perfectly in Chrome.
But I want to test it with HtmlUnit. I wrote:
page= (HtmlPage) ((HtmlAnchor) page.getDocumentElement().querySelector("#btn")).click();
assertThat(page.getUrl().getQuery(), containsString("click=1"));
This code works randomly. Sometime the test passed and sometimes failed.
I think it is due because of the asynchronous call to JS, but I couldn't solve it.
So how can I test it?
Besides, there is better solution to test web site insted HtmlUnit? HtmlUnit disappointed...

The fact that your code works randomly might mean that there is a timing issue in the asynchronous JS call. I have explained the best alternative to come around these kind of issues in this other question: Get the changed HTML content after it's updated by Javascript? (htmlunit)
Answering your second question, HtmlUnit is a pain in the neck when it comes to JS. Maybe Selenium with the native browser (eg: IE) drivers are a better alternative. Plan C would be PhantomJS but it is not a Java library.

I fell also in similar issue. My html link is triggering javascript using events.
My not working test code was:
HtmlAnchor anchor = element.getFirstByXPath("//a[#id='...']");
anchor.click(); // This is not firing events on js side!!!!
How it works:
HtmlAnchor anchor = element.getFirstByXPath("//a[#id='...']");
anchor.fireEvent("click"); // JS running which listening on click events!

Ignore javascript syntax errors in a page and continue executing the script

I develop plugins for WordPress. It uses some jquery in the user side (themes) as a jquery plugin.
The problem is, when there is an javascript error with other plugins made by other autors, my plugin's javascript fails to execute.
And the worst thing is people consider that there is a serious fault with my plugin even though it works 100% fine with error handling conditional statements. But it is actually due to some other javascript syntax errors of some other WP plugin/theme authors.
Is there a way to continue execute my plugin JS ignoring other JS errors. Or can i have suggestions to handle this problem ??

Try :
window.onerror = function(){
return true;
}
That is if you can include this before the bugged script has been executed.

You should correct the old JavaScript error because it may create many problems, not for right now but for next time.
Put your JavaScript file / code at the top (before JS having error), and call it before JavaScript effected by other JavaScript code.
In case you need handle JavaScript exception at run time, best option is
try { /* run js code */ }
catch (error){ /* resolve the issue or bug */ }

You should be able to swallow any error using the error event:
$(window).error(function(e){
e.preventDefault();
});
I've never attempted this, but it should work in theory.
It should be noted that this probably isn't a great solution to your problem. It could be that your plugin is interfering with other plugins. It is, of course, possible that the errors are no fault of your own, but generally speaking (with publicly released plugins) not the case.

I encountered the same problem: There are a bunch of plugins out there that make too many assumptions and cause JavaScript errors on YOUR page, even when you are being a good citizen; these errors have nothing to do with your plugin.
There's no sense trying to handle errors in other plugins -- IMO it is better to be self-contained but resilient to their errors.
In my case, the errors were halting the jquery DOM ready event, and my JavaScript init code wasn't getting executed. The exact form of the error isn't important though -- the solution is just to fire on multiple events.
The solution for me was to have fallbacks in addition to relying on the jQuery DOM ready event:
I wrapped any code I wanted to fire on the DOM ready event into their own function -- e.g. my_hardened_init_action();
I added a function, my_hardened_init(), that only runs once. It calls my_hardened_init_action() the first time it is called, and does nothing on subsequent calls.
I added various methods to call my_hardened_init() in the WordPress footer. In my case, I only needed two. First, trying the usual jQuery DOM init, but falling back to a simple setTimeout(). So if the jQuery DOM init never fires due to broken JavaScript, the timeout will fire shortly after when the page has finished loading.
You could add multiple other fallbacks -- even add the code to the header if needs be. As my_hardened_init() only runs once, you can try as many times as you like to trigger it.
This has worked on a bunch of client sites with a range of other broken plugins.
Hope this helps.

What about window.onerror?
https://developer.mozilla.org/en-US/docs/DOM/window.onerror

<script>
var _z = console;
Object.defineProperty(window, 'console', {
get: function(){
if (_z._commandLineAPI) {
return true;
}
return _z;
},
set: function(val) {
_z = val;
}
});
</script>

If you page is running. Use:
$(window).error(function(e){
e.preventDefault();
}); // IGNORE ALL ERROR JQUERY!
or use:
window.onerror = function(){
return true;
} // IGNORE ALL ERROR JAVASCRIPT!

A regular try catch statements won't work for these types of errors.
Possible workarounds:
Use inline-css to float the bar to the left instead of jQuery (I am not sure what the full function of your plugin is but if it just floats the bar to the left why not just use css?)
Have a invisible iframe which tries to run some code on the parent page. if it fails than alert the user(from within this iframe) that it wasn't your fault :)

Perhaps you could try putting your js in an html object, so that it's executed in a separate page. That probably won't help much if the js on the main page wont run to interact with the object. Just something to play with.

Put your call to plugin in
try{
......
}
catch(e){
}

This is worked for me:
try{
//your code
}
catch(error)
{
return true;
}

"SCRIPT28: Out of stack space" on website using IE9

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.

How to ignore certain script files / lines when debugging?

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.