In my index.html I have a number of scripts and css files that I have version control suffix on, like so:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/framework/compile/css/main.min.css?version=3.0">
</head>
<body>
<script type="text/javascript" src="/framework/compile/js/app.min.js?version=3.0"></script>
<script type="text/javascript" src="/framework/compile/js/app.min.js?version=3.0"></script>
</body>
</html>
I also have a directory of html views and smaller html files. Whenever I update one of these files, I increase the minor version number. For example, /framework/compile/css/main.min.css?version=3.0 becomes /framework/compile/css/main.min.css?version=3.1 after an update.
However, if I do a major site update and change most files, I will push the version number to 4.0. I don't want to have to manually change the version number on every file. Is there an easy and readable way to do this with a javascript variable or something similar.
I'm looking for something like this:
<script>var version = "3.0";</script>
<link rel="stylesheet" type="text/css" href="/framework/compile/css/main.min.css?version=" + version>
</head>
<body>
<script type="text/javascript" src="/framework/compile/js/app.min.js?version=" + version></script>
<script type="text/javascript" src="/framework/compile/js/app.min.js?version=" + version></script>
</body>
</html>
The above is obviously incorrect syntax and does not work.
Here's a fast solution, using some Jquery:
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Your css and js will be referred inside this div -->
<div id="updatable_source"></div>
<!--Version updater script-->
<script>
var version = '3.0'
$('#updatable_source').html(
'<link rel="stylesheet" type="text/css"'
+'href="/framework/compile/css/main.min.css?version='+version+'"/>'
+'<script type="text/javascript" src="/framework/compile/js/app.min.js'
+'version='+version+'"/>'
+'<script type="text/javascript" src="/framework/compile/js/app.min.js version='+version+'"/>'
);
</script>
</body>
</html>
Just change the 'version' var for updating the version
Solution Using Pure Javascript
index.html
<html>
<head>
</head>
<body>
<div>
Your main content should come BEFORE your javascript.
The script to include the files should be immediately after your content,
but before any other script file includes or in page javascript.
</div>
<script>
/*******************************************************
/ Alternate Solution: If you're only wanting to get the
/ most current version of each file, you can just append
/ a datetime stamp to the script tag's url src
/*******************************************************/
//get current datetime in milliseconds
var version = new Date().valueOf();
/*******************************************************
/ OR you can use manual version numbers as per your ?
/*******************************************************/
//variable to hold version number
var version = "3.0";
/*******************************************************
/ Add the following ahead of any other scripts before
/ the closing body tag
/*******************************************************/
var cssLnk = document.createElement("link");
cssLnk.setAttribute("rel", "stylesheet");
cssLnk.setAttribute("type", "text/css");
cssLnk.setAttribute("href", "/framework/compile/css/main.min.css?version=" + version);
document.head.appendChild(cssLnk);
var scr_A = document.createElement("script");
scr_A.setAttribute("type", "text/javascript");
scr_A.setAttribute("src", "/framework/compile/js/app.min.js?version=" + version);
document.body.appendChild(scr_A);
var scr_B = document.createElement("script");
scr_B.setAttribute("type", "text/javascript");
scr_B.setAttribute("src", "/framework/compile/js/app.min.js?version=" + version);
document.body.appendChild(scr_B);
</script>
</body>
</html>
Related
I am new at JS and never tried Handlebars before. I'm trying a very bare-bones example from a tutorial. I have downloaded handlebars-v4.0.5.js from the Handlebars website and included it in my page, as follows, along with a template I precompiled, name-table.js. I'm trying my god damned hardest to complete this tutorial but I can't, because when I run the following code, I get ReferenceError: Handlebars is not defined which I can't for the life of me understand, if the file I downloaded from Handebars' own site is in any way valid.
<html>
<head>
<meta charset='UTF-8'>
<title>Test Page!</title>
<script type='text/javascript'>
function init() {
document.getElementById('button').addEventListener('click', buttonClick, false);
}
function buttonClick() {
var injection = Handlebars.templates['name-table'];
document.getElementById('button').innerHTML = injection;
console.log('hello, world.');
}
window.addEventListener('load', init, false);
</script>
</head>
<body>
<button id='button'>Button</button>
<div id='content'></div>
<script type='text/javascript' rel='js/handlebars-v4.0.5.js'></script>
<script type='text/javascript' rel='js/name-table.js'></script>
</body>
</html>
Edit:
The answer I marked solved the problem. Another error appears in this code, and I want to let anyone reading this know that var injection as defined in this code is a function, not a string as I had thought. This code will work if rel is changed to src as in the answer given, and if we use document.getElementById('button').innerHTML = injection(); (note the parens).
You are not loading in Handlebars (or your name-table script). You currently have the following markup:
<script type='text/javascript' rel='js/handlebars-v4.0.5.js'></script>
<script type='text/javascript' rel='js/name-table.js'></script>
You should be using the src attribute instead of the rel attribute for script tags.
<script type='text/javascript' src='js/handlebars-v4.0.5.js'></script>
<script type='text/javascript' src='js/name-table.js'></script>
The Mozilla documentation does not specify the rel attribute as a valid script tag attribute.
Include this line:
<script src="https://twitter.github.io/typeahead.js/js/handlebars.js"></script>
You are done.
Thanks.
I am creating a website, I am using a NodeJS server. In my public folder I have a script named website.js and it has the jQuery code to give a console.log when the h1 is clicked. (Code Below). But when I click on the h1 in the browser it does not work. The file is loaded properly, gives no 404 error and my CSS stylesheet works fine.
Further Testing: I did a simple test to see if it would give back the text when I called the variable (test code below) it responds with: "" (two quotation marks) so it must not be recognizing it.
//Test code
var xyz = $("#testh1").text();
//jQuery Code
$("#testh1").on("click", function(){
console.log("Clicked");
});
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/javascripts/website.js"></script>
<link rel="stylesheet" type="text/css" href="/stylesheets/website.css">
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<title>test</title>
</head>
<body>
<h1 id="testh1">TEST</h1>
</body>
</html>
You need to load jQuery before your script.
<script src="https://path-to-jquery"></script>
<script src="/javascripts/website.js"></script>
You need to wait for the DOM to be ready before accessing any elements in it. You can either do it with the following code:
$(document).ready(function() {
$("#testh1").on("click", function(){
console.log("Clicked");
});
});
or by putting your <script>s at the bottom of the <body> instead of in the <head>.
<script src="https://path-to-jquery"></script>
<script src="/javascripts/website.js"></script>
</body>
You're getting an empty string in your test code because your #testh1 element hasn't been loaded yet.
Trying to implement jQuery countdown using this reference
Code:
<html>
<head>
<meta charset="UTF-8">
<title>Merry Christmas</title>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<!-- countdown -->
<div id="defaultCountdown"></div>
<!-- countdown -->
<link rel="stylesheet" type="text/css" href="css/jquery.countdown.css">
<script src="js/jquery.countdown.js" type="text/javascript"></script>
<script src="js/jquery.plugin.js" type="text/javascript"></script>
<script>
var newYear = new Date();
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1);
$('#defaultCountdown').countdown({until: newYear});
</script>
</body>
</html>
It shows nothing but blank page. No console errors.
The fiddle can be seen below
https://jsfiddle.net/n4nmgkgc/1/
jquery.countdown.js has a dependency on jquery.plugin.js. Try changing the loading sequence of these two JS files like below. Load the "jquery.plugin.js" first, then load the "jquery.countdown.js".
<script src="js/jquery.plugin.js" type="text/javascript"></script>
<script src="js/jquery.countdown.js" type="text/javascript"></script>
There is no issue in your script , just that the external libraries/resources your loading is over http protocol, jsfiddle is not working properly as its blocked.
but that should not stop you when running the same script on your browser.
Workaround:
Anyway as a workaround I have dumped all those resources manually on your jsfiddle and your count down script is working fine.
Working CountDown Timer #JSFiddle
Also you need to understand the dependency of the libraries your loading for your script , because in your case your jquery.plugin.js is dependent on jquery.js and jquery.countdown.js is dependent on jquery.plugin.js.
so below is the order in which you need to load the external libraries (Top to Bottom):
jquery.js
jquery.plugin.js
jquery.countdown.js
Your script at the bottom of your page needs to be like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.plugin.js"></script>
<script src="jquery.countdown.js"></script>
<script>
$(function () {
var newYear = new Date();
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1);
$('#defaultCountdown').countdown({until: newYear});
});
</script>
Like #Tarafder Ashek E Elahi said, jquery.countdown is a dependency of jquery.plugin
you forget to add style
please add it
in head
<style type="text/css">
#defaultCountdown { width: 240px; height: 45px; }
</style>
and refresh page.. clock will show in page.. try fast
I have a small nw.js app that alters the div section of the index.html page:
var myDiv = document.getElementById("outputSection");
var myImg = document.createElement("img");
myDiv.appendChild(myImg);
myImg.src = 'http://127.0.0.2:8080/prime_almost_full_00007.0001.png';
myImg.width = '256';
myImg.height = '256';
myImg.class = 'reel';
myImg.id = 'image';
myImg.setAttribute("data-images", 'http://127.0.0.2:8080/prime_almost_full_00007.####.png|0001..0250');
The HTML code I'm trying to mimic in my static example, which works, is:
<img src='http://127.0.0.2:8080/prime_almost_full_00007.0001.png'width='256' height='256' class='reel' id='image' data-images='http://127.0.0.2:8080/prime_almost_full_00007.####.png|0001..0021'>
I'm using the Jquery-reels library. At the top of my page, I include it thusly:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='http://code.vostrel.cz/jquery.reel.js' type='text/javascript'></script>
For some reason, while the image shows up with the first code snipped, it isn't interactive. My static page, which works is like this:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='http://code.vostrel.cz/jquery.reel.js' type='text/javascript'></script>
<head>
<title>Hi there</title>
</head>
<body>
<div>
<img src='http://127.0.0.2:8080/prime_almost_full_00007.0001.png'
width='256'
height='256'
class='reel'
id='image'
data-images='http://127.0.0.2:8080/prime_almost_full_00007.####.png|0001..0021'>
</div>
</body>
</html>
It's not clear to me why this is happening. Is it something about node-webkit?
EDIT: re-scanning doesn't seem to work:
myDiv.innerHTML = "<img src='http://127.0.0.2:8080/prime_almost_full_00007.0001.png' width='256' height='256' class='reel' id='image' data-images='http://127.0.0.2:8080/prime_almost_full_00007.####.png|0001..0021'>";
$.reel.scan();
When the page loads, the reel plugin automatically looks for elements with the attribute class="reel". See the annotated source for more info about this.
According to that documentation, since you are adding an element to the page after the page loads, you may need to call the $.reel.scan() function at the end of your javascript.
I'm trying to use an external JavaScript file in order to write "Hello World" into a HTML page.
However for some reason it does not work, I tried the same function and commands inline and it worked, but not when it's using an external JavaScript file. The part I commented out in the JS file was the previous method I was trying to use. Those lines of could worked when I ran the script from the header, and inline. Thanks
Html file:
<html>
<head>
</head>
<body>
<p id="external">
<script type="text/javascript" src="hello.js">
externalFunction();
</script>
</p>
<script type="txt/javascript" src="hello.js"></script>
</body>
</html>
JavaScript file
function externalFunction()
{
var t2 = document.getElementById("external");
t2.innerHTML = "Hello World!!!"
/*document.getElementById("external").innerHTML =
"Hello World!!!";*/
}
In general, you want to place your JavaScript at the bottom of the page because it will normally reduce the display time of your page. You can find libraries imported in the header sometimes, but either way you need to declare your functions before you use them.
http://www.w3schools.com/js/js_whereto.asp
index.html
<!DOCTYPE html>
<html>
<head>
<!-- You could put this here and it would still work -->
<!-- But it is good practice to put it at the bottom -->
<!--<script src="hello.js"></script>-->
</head>
<body>
<p id="external">Hi</p>
<!-- This first -->
<script src="hello.js"></script>
<!-- Then you can call it -->
<script type="text/javascript">
externalFunction();
</script>
</body>
</html>
hello.js
function externalFunction() {
document.getElementById("external").innerHTML = "Hello World!!!";
}
Plunker here.
Hope this helps.
Script tags with SRC values do not run the contents. Split it to two script tags. One for the include, one for the function call. And make sure the include is before the call.
use onload eventListener to make it simple
<script>
window.onload = function() {
externalFunction();
}
</script>
You're trying to call the function before it has been loaded.
Place the load script above the declaration:
<html>
<head>
<script type="txt/javascript" src="hello.js"></script>
</head>
<body>
<p id="external">
<script type="text/javascript">
externalFunction();
</script>
</p>
</body>
</html>
Also you have a typo:
<script type="txt/javascript" src="hello.js"></script>
Should be:
<script type="text/javascript" src="hello.js"></script>
The script type needs to be "text/javascript" not "txt/javascript".