Script tag attributes - javascript - javascript

I am trying to understand the basics of templating and have the following problem. When I try to attach ID or/and type attribute to the <script> tag in my HTML code it just doesn't work:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="somescript.js"></script>
</head>
<body>
<script type="text/html" id="template1">
<form name="formXY">
<p>
<label>Field1
<input type="text" name="form_field1" value= "{{field1}}">
</label>
<button type="button">Submit</button>
</p>
</form>
</script>
</body>
</html>
I ran this in chrome/firefox/IE9/Opera and none of them parse the code between the <script> tags. Browsers think it is just a text field. When I remove ID and type attributes it is again parsed correctly.
I am probably missing something very basic...

You need to add a non javascript type to the script tag, as the point is that you don't want the browser to parse it (as javascript), and by using a custom type the browser will ignore it (until you grab it with javascript that is)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="somescript.js"></script>
</head>
<body>
<script type="text/x-handlebars-template" id="template1">
<form name="formXY">
<p>
<label>Field1
<input type="text" name="form_field1" value= "{{field1}}">
</label>
<button type="button">Submit</button>
</p>
</form>
</script>
</body>
</html>
And then in your javascript somescript.js you need to get the contents of that script tag using something like this
var uncompiledTemplate = document.getElementById('template1').innerHtml;
// then pass this template to your templating engine...
// if your using handlebars:
var template = Handlebars.compile(uncompiledTemplate);
And then you can work with your template!

The content of the <script> tag is never parsed into DOM elements, the contents simply appear in the DOM as text (although <script> is display:none; by default so it does not appear on the page). If a type is provided has to be one that the browser recognises before it attempts to execute it. Note that older browsers used the language attribute instead.

Related

Separate HTML / JavaScript

I'm attempting to have my JavaScript code in a file apart from my HTML file.
Linking the 2 scripts between each other works, however stuff like the function document.getElementById() doesn't.
Anyone know how to fix this?
HTML code:
<!DOCTYPE HTML>
<html>
<head>
<title>Boost</title>
<script src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<h3>
<p id="TopTextParagraph">Hi there</p>
<div>
<button id="clickNext">Next</button>
</div>
</h3>
</body>
</html>
JavaScript code:
document.getElementById("clickNext").onclick = goNext;
function goNext() {
console.log("stuff here")
}
JavaScript works when I put it in the HTML file using <script> </script>, just don't know how to make it work in a separate JavaScript file.
You are adding the script inside head tag. When that snippet is executed clickNext element does not exist in the dom
You can add the script near the closing body tag to resolve the problem & remove from the head tag
<body>
<h3>
<p id="TopTextParagraph"> Hi there</p>
<div>< button id="clickNext"> Next</button></div>
</h3>
<script src="javascript.js"></script>
</body>

Why there's a text node between head and body nodes in DOM tree?

I'm messing around with DOM tree. In particular with this HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MovieApp</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div>
<h1>MovieApp</h1>
<input type="text" name="movie-title" size="50"
placeholder="Enter movie title..." />
<input type="submit" name="search" value="Search"/>
</div>
</body>
</html>
and there's something I'm not able to figure out. When I check node children (document.documentElement.childNodes[i]) I always get three children instead of the two I was expecting to:
<head> node
#text
<body> node
What is this #text node? In JSFiddle I'm getting same result.
Thanks in advance.
Look at the textContent or other similar properties - it's a line feed and a few spaces, which is exactly between your </head> and <body>.
So there's nothing "useful" between head and body, but that space is still there.
Consider:
<div>Some Link Some Text Another Link</div>
This would have three nodes - the first link, the text, and the second link. Same deal, except your "text" is just a bunch of whitespace.

Correct way to determine if javascript is enabled

I've been checking questions and answers here (and elsewhere) without getting a clear answer:
Are there any drawbacks with the following html to display an alternate image if javascript is disabled?
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"> </script>
<script src="path to local js script here"></script>
<noscript><img src="path to alt image here" /> </noscript>
<link rel="stylesheet" type="text/css" href="path to css here">
</head>
<body>
...
</body>
</html>
This appears to be working for me, but I've seen more complicated solutions suggested; Is there anything 'wrong' with making an alt image this way?
That is invalid HTML; you cannot put content in the <head>.
Move it to the <body> and it'll be fine.
Note that if the user has Javascript enabled, but a proxy is removing your scripts, that won't be displayed.
Instead, you can put a no-js class in your <html>, then add a bit of Javascript to the <head> that replaces it with a js class.
You can then write CSS rules that apply only if Javascript is actually working.

Printing data using JavaScript taken from HTML

I am trying to learn how to debug jquery. I tried to make a page which will dynamically add input feilds. The data is sent to the jquery. Now for debugging, I tried to console.log the whole array, but I am getting this error in Firefox:
[17:40:27.073] The character encoding of the HTML document was not
declared. The document will render with garbled text in some browser
configurations if the document contains characters from outside the
US-ASCII range. The character encoding of the page must be declared in
the document or in the transfer protocol. #
file:///Users/ateevchopra/Desktop/takemehome%20dynamic/TakeMeHome/index.html
Please explain what this means of if there is some mistake in my code. Heres my code
HTML:
<!doctype html>
<html>
<head>
<title>TakeMeHome</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type='text/javascript' src='js/app.js'></script>
</head>
<body>
<center><form id="details">
Your Place:<input id="source" type="text"><br><br>
Friend1:<input id="friend1" type="text"><br><br>
<div id="friends"></div>
<div id="button">Add!</div><br><br>
<input type="submit" value="go">
</form>
</body>
</html>
jQuery:
var j=2;
var friends = [];
$(document).ready(function(){
$('#button').click(function(){
if(j<11){
$('#friends').append('Friend'+j+':<input type="text" id="friend'+j+'"/><br/><br/>');
j++;
}
else
{
alert("Limit reached");
}
});
});
$("form").submit(function(){
friends[0] = ('#source').val();
for(var i=1;i<j;i++)
{
friends[i] = ('#friends'+i+'').val();
}
console.log(friends);
});
your code is working perfectly you can see it from this
console.log is good for debuging but i prefer you to use firebug for debuging.
Using firebug you can debug each and every line and you can also view the values of each variable.
I am using firebug with firefox.
You can download firebug for firefox from that link .I hope that it helps you.
The error has nothing to do with JavaSCript.
If you add a meta tag like <meta charset="UTF-8" /> it should be fixed.
I also see the you have a type in doctype declaration.
This is not an error in your Javascript code, but a general warning issued by Firefox regarding the validity of the actual HTML markup.
The document's encoding should be declared with a meta tag in inside the header tag. For example, if your encoding is UTF-8 it would be:
<head>
...
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
...
</head>
Since your doctype is HTML5, you can also use the charset attribute:
<head>
...
<meta charset="UTF-8">
...
</head>

Why does including prototype.js break the functioning of jquery bbq?

I have:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="/temp/css/menu.css" />
<link rel="stylesheet" type="text/css" href="/temp/css/bottomchatdiv.css" />
<link rel="stylesheet" type="text/css" href="/temp/css/centercontent.css" />
<link rel="stylesheet" type="text/css" href="/temp/css/basics.css" />
<script type="text/javascript" src="jquery-1.7.js"></script>
<script type="text/javascript" src="jquery.ba-bbq.js"></script>
<script type="text/javascript" src="jquery.ba-bbq-addtl.js"> </script>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
function getusto(anchorid) {
$(anchorid).scrollTo();
}
</script>
<script type="text/javascript" src="hide&show.js">
</script>
</head>
<body >
<div class="bbq">
<div class="bbq-nav bbq-nav-top menu">
<a class="mainitem menu_links" href="">Welcome</a> <br>
<a class="menu_links" href="#" onclick="getusto('welcome'); return false;">Welcome</a><br>
<a class="menu_links" href="#" onclick="getusto('guidelines'); return false; ">Guidelines</a>
<br>
<hr style="width:48%"/>
<br>
<a class="mainitem menu_links" href="#Regular-Visitors-&-Ops.html">Regulars & Ops</a> <br>
</div>
<br>
<div class="bbq-content centercontent">
<!-- This will be shown while loading AJAX content. You'll want to get an image that suits your design at http://ajaxload.info/ -->
<div class="bbq-loading" style="display:none;">
<img src="/shell/images/ajaxload-15-white.gif" alt="Loading"/> Loading content...
</div>
<!-- This content will be shown if no path is specified in the URL fragment. -->
<div class="bbq-default bbq-item">
default welcome text here.
</div>
</div>
</div>
</body>
</html>
Now, the problem is Regular-Visitors-&-Ops.html page wouldn't load, but it was loading! So I tinkered with my undos until I found that not including prototype.js let that link work via jquery bbq's way.
What gives? How do I get both prototype.js & jquery bbq coexisting? I need both for different things..
to get this up & running you need an additional Regular-Visitors-&-Ops.html file in the same directory, say:
<!DOCTYPE html>
<head>
</head>
</body>
this is the additional file.
</body>
</html>
As well as jquery, jquery bbq's two scripts (I named one myself), & prototype.js.
now if you do set this up - takeaway prototype & the Regular-Visitors(...) link works. problem is, i am using prototype.js. so either how do i get these two to work, or more easily, how i do implement a scrollTo function (can't use anchors, due to jquery bbq hogging the anchors/hashes (e.g. "#welcome" in "index.html#welcome") WITHOUT USING PROTOTYPE.JS? there should be one right?
By including prototype.js after jQuery, Prototype will override the value of the global $ variable. You just need to use:
var $j = jQuery.noConflict();
You can then use $j in place of $ in jQuery contexts and $ for prototype contexts. Here's the documentation: http://api.jquery.com/jQuery.noConflict/.
jQuery and Prototype both use the $ character so they will conflict.
If you wish to use them both together you will need to make use of jQuery's noConflict() method to release the $ alias back to Protoype
There is also a scrollTo jQuery plugin

Categories