Scripts only once (block multiple)
Enter your name and see what happens.
HTML
<html>
<body>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"> </script>
<!-- INCLUDE OUR SCRIPT -->
<script src="https://s3.amazonaws.com/michael-kennedy/blog/JavaScriptTwiceExamples/good-example.js" type="text/javascript"> </script>
<h1>Sample Repeated JS File (good version)</h1>
<div>
Enter your name:
<input type=text /><br />
<button id="nameIt">Tell Me Your Name</button>
<button id="nameIt2">Tell Me Your Name</button>
<button id="nameIt3">Tell Me Your Name</button>
</div>
<div id="nameOut"></div>
<!-- Imagine lots more content here. -->
<!-- OOPS, I DID IT AGAIN -->
<!-- But, it's ok now! -->
<script src="https://s3.amazonaws.com/michael-kennedy/blog/JavaScriptTwiceExamples/good-example.js" type="text/javascript"> </script>
<script src="https://s3.amazonaws.com/michael-kennedy/blog/JavaScriptTwiceExamples/good-example.js" type="text/javascript"> </script>
</body>
</html>
CSS
body {padding: 10px;}
h1 {font-size: 1.5em; padding: 10px; padding-left: 0px;}
#nameIt{margin: 5px; margin-left: 133px;}
#nameOut {color: red; font-size: 1.25em;}
JavaScript
/*
THE SCRIPT REFERENCED ON S3 IS BASICALLY THIS JS.
*/
/*
/// <reference path="blog.js" />
blog = {};
blog.comments = blog.comments || {};
blog.comments.debugMode = false;
blog.isFirstLoad = function(namesp, jsFile) {
var isFirst = namesp.firstLoad === undefined;
namesp.firstLoad = false;
if (!isFirst) {
console.log(
"Warning: Javascript file is included twice: " +
jsFile);
}
return isFirst;
};
$(document).ready(function () {
if (!blog.isFirstLoad(blog.comments, "comments.js")) {
return;
}
function disableButton(id){
$.each(id.split(" "), function(i, val){
$("#" + val).prop("disabled", true);
});
}
function enableButton(id){
$.each(id.split(" "), function(i, val){
$("#" + val).prop("disabled", false);
});
}
// normal event handling stuff.
$("#nameIt").click(function(e) {
var name= $("input[type=text]").val();
$("#nameOut")
.append("<div>Hi there " + name + "</div>");
});
});
*/