Error is not caught by jquery start() function - javascript

[Update. I need to be more precise, I see...]
See the following example in javascript:
<html>
<head>
<script>
window.onerror = function() {
alert('error'); // this one works
try {i.dont.exist += 0;}
catch(e) {
// do some stacktrace stuff, this does not trigger
alert(e.stack);
}
};
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'></script>
<script>
$(document).ready(function() {
foo[1]++;
});
</script>
</head>
<body>
<p>Hello world.</p>
</body>
</html>
The 2. alert is not triggered. Why?
If I replace "foo[1]++" by "this is a bogus line" everything works and both alerts are triggered. Is there some run-time error problem?

The alert is not triggered because your error handler function was not successfully defined, due to your Javascript error :-) That block of code can't be parsed correctly so it isn't run.
Set it up this way:
<script>
$(function() {
window.onerror = function() {
// ...
};
});
</script>
If it's in its own script tag, then it'll be OK. Now, you may want to reconsider delaying the definition of your error handler to the "ready" event handling, since you may have errors before that point is reached.
[edit] OK here is a complete example, and it works fine for me:
<html>
<head>
<script>
window.onerror = function() {
alert("OH NO THERE HAS BEEN AN ERROR!");
};
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'></script>
<script>
$(function() {
here is some bogus stuff that will cause Javascript parse errors.
});
</script>
</head>
<body>
<p>Hello world.</p>
</body>
</html>

Related

Document 'load' event callbacks not called; how did I mess this up?

In this HTML document, in Chrome, none of my load event callbacks are called:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script>
console.log('just checking');
function someFunction () { console.log('test 3'); }
document.addEventListener('load', () => console.log('test 1'));
document.addEventListener('load', function () { console.log('test 2'); });
document.addEventListener('load', someFunction);
</script>
</head>
<body>
</body>
</html>
However, I can see that they are set in the inspector:
And there are no errors in the console.
I am almost certain this is some trivial error on my part, and I can't figure out what it is.
I spent a fair amount of time searching the internet for reasons, but for the most part every post I found about failed load callbacks generally had to do with accessing the DOM before it was ready, which doesn't really apply here.
I hand-wavily tried setting the defer attribute on the script but it had no effect.
What am I missing here... ?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script>
function docReady(func) {
document.addEventListener("DOMContentLoaded", function (event) {
func(event);
});
}
function someFunction () { console.log('test 3'); }
docReady(() => console.log('test 1'));
docReady(function () { console.log('test
2'); });
docReady(someFunction);
</script>
</head>
<body>
</body>
</html>
use 'DOMContentLoaded' instead 'load'

AngularJS including javascript in HTML

Could someone explain why this is working:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="appLogin">
<head>
<script src="../Scripts/jquery-2.1.0.min.js"></script>
<script src="../Scripts/angular.min.js"></script>
<script src="../Global/config.js"></script>
</head>
<body>
</body>
</html>
But when I try to add my config.js script like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="appLogin">
<head>
<script src="../Scripts/jquery-2.1.0.min.js"></script>
<script src="../Scripts/angular.min.js"></script>
<script>
var element1 = document.createElement("script");
element1.src = "../Global/config.js";
document.head.appendChild(element1);
</script>
</head>
<body>
</body>
</html>
I get:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.13/$injector/modulerr?p0=appLogin&p1=Error%….c%20(http%3A%2F%2Flocalhost%3A49723%2FScripts%2Fangular.min.js%3A17%3A431)
appLogin is my angular module defined in config.js. In both cases when I use developer tools in my browser I see that the script is loaded but for some reason the second approach is not working?
the second example tries to download and create the module asynchronously.
so, there is a chance that 'appLogin' does not yet exist when angular tries to bootstrap.
unlike the first example, browsers wait for the script tag to finish. so, the document's ready event is not yet fired.
i can remember, that auto-bootstrap begins when the ready event is fired.
I got it now.
As all of you mentioned, the problem is that appLogin does not exist yet.
I solved my problem using document.readyState():
<script type="text/javascript">
function getConfig() {
var element1 = document.createElement("script");
element1.src = "../config.js";
document.body.appendChild(element1);
}
if (document.readyState === "complete") { getConfig(); }
</script>
Thank you guys. :)
you can try something like this
<script type="text/javascript">
function getConfig() {
var element = document.createElement("script");
element1.src = "../Global/config.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", getConfig, false);
else if (window.attachEvent)
window.attachEvent("onload", getConfig);
else window.onload = getConfig;
</script>

$(document).ready(function () { ... won't fire

I have the following code at the end of one of my Views:
#section Scripts {
<script type="text/JavaScript">
$(document).ready(function () {
alert("!!!");
});
</script>
}
What ever I do, I can't get it to fire. I have checked and further up in the code JQuery is included. Using the suggestion here I changed my code to the following to confirm that jquery was correctly loaded. This gives the 'Yeah!' alert when loading the page.
#section Scripts {
<script type="text/JavaScript">
window.onload = function () {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
</script>
}
The end of the source in my page looks like:
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.8.24.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/breakpoints.js"></script>
<script src="/Plugins/jquery-unveil/jquery.unveil.js"></script>
<script src="/Plugins/jquery-fademenu/jquery.fademenu.js"></script>
<script src="/Plugins/jquery-block-ui/jqueryblockui.js"></script>
<script src="/Plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<script src="/Plugins/bootstrap-select2/select2.js"></script>
<script src="/Plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="/Plugins/dropzone/dropzone.js"></script>
<script src="/Scripts/core.js"></script>
<script type="text/JavaScript">
$(document).ready(function () {
alert("!!!");
});
</script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"6301d560dc274f4ea5ec24b8e0c2a19f"}
</script>
<script type="text/javascript" src="http://localhost:50280/1cd42285f06243669b1fd5837f1f05c3/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
I can't work out where I am going wrong...
if this coode works properly
window.onload = function () {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
and this code doesn't :
$(document).ready(function () {
alert("!!!");
});
your likely problem is that there is a conflict with the dollar sign $
I would type out jQuery instead of using the dollar sign , or of course you can do something like this:
var j = jQuery.noConflict();
then you can do use the j where you used to use $
OR... there is simply just an error in the console that you still have not responded about , if that is the case I will update answer
EDIT::
The reasons that you code was not executing was because javascript is weird in the sense that if there is an error anywhere in the block of javascript code then nothing below it will be executed. That is why I asked if there were any console error's. Checking the console is the first step to solving any javascript error.
remove #section Scripts block put script block only and try... if not then remove all js use only jquery and try it will definatly. now add one by one script and find one which is conflicting. .

Why is nothing logged?

I tried to make it so that a string gets logged in the console every time I click on a button. However, nothing is logged. Why so?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function log_a_string_plz() {
console.log("some string i want logged");
}
document.onload = function() {
document.getElementById("my_wonderful_button").onclick = log_a_string_plz;
}
</script>
<title>logging a string test</title>
</head>
<body>
<button id="my_wonderful_button">log a string!</button>
</body>
</html>
I've tried changing event handlers to no avail.
Try:
window.onload = function () {
document.getElementById("my_wonderful_button").onclick = log_a_string_plz;
}
jsFiddle example

body onload and window.onload at the same time

Can I use body onload and window.onload at the same time? I've tried it using this code
<body onload = "alertFirst()">
</body>
<script>
window.onload = alertSec;
</script>
But it didn't work. I just need someone to confirm it to me. Many thanks
The answer to your question is "no". However there are ways around it.
Adding both calls to one onload function is ideal, but if you /have/ to add an onload handler after one is already added, and you are not using a framework which facilitates this, you can get by like this:
<html>
<head>
<script type="text/javascript">
function alertFirst(){
alert('First');
}
function alertSec(){
alert('Second');
}
</script>
</head>
<body onload="alertFirst();">
content
</body>
<script>
var func = document.body.onload;
window.onload=function(){
func();
alertSec();
}
</script>
</html>
You can (by adding event handler(s)) but you should NOT have both
Instead add the call to the window.onload:
<html>
<head>
<script>
window.onload = function() {
alertFirst();
alertSec();
}
</script>
</head>
<body>
</body>
No, document.body.onload is actually mapped to window.onload. You can check yourself—when you have <body onload="a()"> and to console.log(window.onload), a() is printed out into the console.
What you can do is to have one onload event handler that calls two other functions.
window.onload = function () {
a();
b();
};
or two event listeners
window.addEventListener('load', a, false);
window.addEventListener('load', b, false);
If one or more of the scripts you want to use has the event handler in the BODY HTML tag, you can still move it to into javascript code. See the example below:
Script #1:
<script language="javascript">
function start(){
...code for script #1...
}
</script>
<body onload="start()">
Script #2:
<script language="javascript">
function init(){
...code for script #2...
}
window.onload=init;
</script>
Result:
<script language="javascript">
function start(){
...code for script #1...
}
function init(){
...code for script #2...
}
window.onload=function(){
start();
init();
}
</script>
<body>
I think it may can help you.

Categories

Resources