AngularJS including javascript in HTML - javascript

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>

Related

Cordova inappbrowser: executeScript on loadstart

Is it possible to executeScript() on loadstart event in Cordova inAppBrowser? Here is my standalone example I made to try to make it happen:
<!DOCTYPE html>
<html>
<head>
<title>Standalone Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
var iabRef = null;
function testFunction() {
iabRef.executeScript({
code: {'alert("It is alive! ALIVE!")'}
});
}
function onDeviceReady() {
iabRef = window.open('http://telegraph.co.uk', '_self', 'location=no', 'zoom=no', 'hardwareback=yes');
iabRef.addEventListener('loadstart', testFunction);
}
</script>
</head>
<body>
</body>
</html>
Doesn't work for me though. Config.xml allow origin is set to *. Any suggestions?
Thanks!
Yes, it possible to executeScript() on loadstart.Remove {} from alert part as follows:
function testFunction() {
iabRef.executeScript({
code: 'alert("It is alive! ALIVE!");'
});
}
Hope this works
After a little bit of wandering I found that changing "_self" to "_blank" makes it work. So:
iabRef = window.open('http://telegraph.co.uk', '_blank', 'location=no', 'zoom=no', 'hardwareback=yes');

Firefox incompatibility?

http://ahmedstudio.za.pl/firefoxerror/
It works in chrome, opera but doesn't get along with Firefox.
The whole javascript thing is not applying.
This is directly in my javascript.js:
window.onload = function() {
todo("body", 50);
alert("alert!");
setTimeout(function () {
todo("body", 0);
}, 1000)
}
function todo(element, size) {
//blahblah
}
Even if it doesn't actually solve your problem I'd like to share my findings about replacing event handlers with invalid function calls. I've composed this little fiddle:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
jQuery(function(){
$("body").on("load", function(){
$(this).append("Should not run")
});
});
</script>
</head>
<body onload="doesNotExist()">
</body>
</html>
Firefox, Explorer and Edge actually replace the <body> event handler. However, Chrome ignores the onload="doesNotExist()" and execute previous handler.
In the land of tag soup it's hard to decide which workaround is the correct one but it's definitively a bug that could explain your symptoms.
function load() {
//do stuff
}
and the appropriate
<body onload="load()"> </body>
This runs fine in me. I even tried to create a dummy page with this snippet but could not replicate it.Here is snippet.Since the snippet you shared does not contain jquery , i opt to use same code .
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<script>
window.onload = function(){
_todo({
a:'body',
b:50,
alertFrom:'window.onload'
});
setTimeout(function(){
_todo({
a:'body',
b:0,
alertFrom:'setTimeOut'
});
},1000);
};
function _todo(options){
var a = options.a;
var b = options.b;
var c=options.alertFrom
alert(c +" "+a +" "+b);
};
</script>
</body>
</html>
Also note that there is a importance of semicolon after a function.
Here are couple of snapshots

How to call a function that is in a js file from another js file

I know this question has been answered many times but the solutions in those questions aren't working for me. I have a function in lets suppose, a.js. This function is outside the document.ready function and here is its format:
function thisIsFromAnotherFile(){
alert("This alert is from another js file");
}
I'm calling this function from the other file, b.js this way:
var openFile = function(context){
thisIsFromAnotherFile();
}
openFile is an onclick function.
onclick = "openFile(this)"
When I run this code I'm getting an
Uncaught ReferenceError: thisIsFromAnotherFile is not defined. Please help me out. Thanks.
It seems likely there's a few things you're not telling us.
The following code provides a minimal, functioning example.
file1.html
<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
}
</script>
<script src="filea.js"></script>
<script src="fileb.js"></script>
<style>
</style>
</head>
<body>
<button onclick='fromFileA();'>Fire func in filea.js</button>
</body>
</html>
filea.js
function fromFileA()
{
fromFileB();
}
fileb.js
function fromFileB()
{
alert("now in fileb.js");
}
A function cannot be called unless it was defined in the same file or one loaded before the attempt to call it.
You declare function fn1 in File1.js, and then in File2 you can just have fn1();
File1.js
function thisIsFromAnotherFile() {
alert("working");
}
File2.js
function openFile() {
thisIsFromAnotherFile();
}
**HTML**
<html>
<head>
<script src="File1.js" type="text/javascript"></script>
<script src="File2.js" type="text/javascript"></script>
</head>
<body>
<button onclick="openFile()">Click me</button>
</body>
</html>
you need to load a.js before you call the function
<head>
<script type="text/javascript" src="path/to/a.js"></script>
</head>

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

Error is not caught by jquery start() function

[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>

Categories

Resources