How to test if a script load succeeded/failed? - javascript

I've got a sample script as below. I wanna see if local.js or online/latest.js failed to load. Is it possible?
<html>
<title>My JQuery Test</title>
<head>
<!--<script type="text/javascript" src="jquery/jquery.local.js"></script>-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#Buttons-theTestAlert").click(function () {
alert("`Test Alert` clicked");
});
});
</script>
</head>
<body>
<button id="Buttons-theTestAlert">Test Alert</button>
</body>
</html>

You can test
if (myFunction) myFunction()
else alert('not loaded (yet)')

Related

Why external JS won't start?

after to make some research I took the measures to guarantee that the JS will be loaded before trying to run it but... it won't work!
This works:
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1" charset="utf-8">
</head>
<html>
<body>
<script type="text/javascript">
function initialize() {
console.log('foo')
}
window.onload = function() {
initialize();
};
</script>
</body>
</html>
But this doesn't:
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1" charset="utf-8">
</head>
<html>
<body>
<script type="text/javascript" src="test.js">
<script type="text/javascript">
window.onload = function() {
initialize();
};
</script>
</body>
</html>
test.js:
function initialize() {
console.log('foo')
}
I don't get any error. It just doesn't work. What am I doing wrong?
Thanks!
You need a closing script tag for the tag that is calling the external js file.
<script type="text/javascript" src="test.js"></script>

Why is jquery not running on my webpage?

Does anyone know why my jquery won't run? I've tried running on button click or page load but it isn't working. Thanks
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<iframe style="width:100%;height:700px;" id="frame" src="bing.com">
<script>
$(document).ready(function() {
alert("working");
});
</script>
</body>
You need to close your iframe tag and put in the complete url like this:
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<iframe style="width:100%;height:700px;" id="frame" src="http://bing.com"></iframe>
<script>
$(document).ready(function() {
alert("working");
});
</script>
</body>

with jQuery page does not

I am just learning jQuery and the page with the following code does not load. Any help will be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<title>First jQuery-Enabled Page</title>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript">
$("document").ready(function() {
alert("The page just loaded!");
});
</script>
</head>
<body>
</body>
</html>
$(document).ready(function() {
alert("The page just loaded!");
});
remove quotes from around document in jquery selector.

no json from array in javascript

The below code is intended to return json object from arraylist but it is not showing alert.
there is no js error...
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="json.js" />
<script type="text/javascript" src="json2.js" />
<script type="text/javascript">
var my_info= {};
my_info["john"]="1a";
my_info["joseph"]="2b";
my_info["helen"]="3c";
var val = JSON.stringify(my_info);
alert(val);
</script>
</head>
<body>
</body>
</html>
Script tags don't allow self-closing (<script ... />). You have to use <script src="..."></script> instead.
See for more information this question.
Your code becomes:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="json.js"></script> <!-- Here -->
<script type="text/javascript" src="json2.js"></script> <!-- And here -->
<script type="text/javascript">
var my_info= {};
my_info["john"]="1a";
my_info["joseph"]="2b";
my_info["helen"]="3c";
var val = JSON.stringify(my_info);
alert(val);
</script>
</head>
<body>
</body>
</html>
JSFIDDLE (ignore the warnings)

jquery not working inside html file

I'm trying to do a very basic jquery tutorial but I'm not able to get it to work.
I'm calling the jquery library from google and then I try to create a script inside html.
If I do the same in a .js file I wouldn't have any problem.
What am I missing here?
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
</script>
Link
</body>
</html>
You need to split this up:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js">
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
</script>
...into two script elements:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
</script>
In the snippet you gave, the code within the <script> element won't be evaluated because the browser is only evaluating the contents from the src attribute and ignoring everything else.
Move your scripts into the head element like this:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a").click(function () {
alert("Hello world!");
});
});
</script>
</head>
<body>
Link
</body>
</html>

Categories

Resources