why is jquery not loading - javascript

for some reason when i try to load jquery via cdn, it works perfectly
script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
however, when i try to load it using the local files, it does not work
script type="text/javascript" src="javascripts/jquery-1.11.2.min.js"
and displays this error:
Uncaught SyntaxError: Unexpected token < jquery-1.11.2.min.js:1
i must say that my server is running on node.js

it seems you have syntax error with your tag.
try this.
<script type="text/javascript" src="javascripts/jquery-1.11.2.min.js"></script>

It seems as though there is an error occurring inside jquery-1.11.2.min.js. Not in the document which contains the script tag. So, the question is: why does your local copy of jquery-1.11.2.min.js contain a <? The answer is that it most likely doesn't. The request for jquery-1.11.2.min.js is probably resulting in a HTML response, which the browser attempts to load as JavaScript, and fails on the first character. Ensure that javascripts/jquery-1.11.2.min.js is the correct path to your JavaScript file.
It can be shown that this is the case because a SyntaxError is a JavaScript error. MDN says the following (emphasis mine):
A SyntaxError is thrown when the JavaScript engine encounters tokens or token order that does not conform to the syntax of the language when parsing code.
So, the error is being thrown by the JavaScript engine, which means that the browser is actually trying to load a script file. As you can see from the error message, the error is thrown at jquery-1.11.2.min.js:1, which is line one of jquery-1.11.2.min.js. You can reproduce the same error message using the following code saved in a file named foo.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="foo.html"></script>
</head>
<body></body>
</html>
Alternatively, you can view a demonstration of equivalent code here (check your console).

Related

Getting "unexpected token" error in Javascript

I wanted to give a little background first, I was facing the below issue in SSR React using NextJS. In my <head> I have <script></script> tag in which I have multiple <script> tags nested containing minified JS code for Google Analytics, Adobe Analytics, etc. To debug the issue, I tried to break it up more and only including one JS code at a time in my outer <script> tag like only GA or only Adobe to see where it is breaking.
It works fine when I use <noscript> tag and inside it, I have multiple <script> tags containing minified JS for GA, AA, etc. But it breaks my purpose, as when page loads Google Tag Assistant does not catch the tags.
To my surprise, when I tried running below a simple JS code (PSB SS) in incognito mode (just to make sure plain browser profile without any extensions/plugins) I get the same error. Even if I try without incognito mode I get the same error for this simple JS code.
Uncaught SyntaxError: Unexpected token '<'
What is the issue here and why am I getting this error?
Java script belongs inside <script> tags, but <script> tags themselves are HTML, therefore they are not expected, and thats why you get the Unexpected < token.
In other words, don't nest <script> tags. Removing the outermost Tag should fix the error.

"Unexpected token import" implementing native ES6 modules

I need to refactor some JavaScript code and am trying to implement ES6 modules using the native import/export commands. I struggled for awhile to get this working, so I am going to document what needed done here for future reference.
The symptom is that I receive the following message in the Chrome console:
Uncaught SyntaxError: Unexpected token import
My basic code for testing is:
HTML:
<!DOCTYPE html>
<html>
<body>
<h1>Import test</h1>
</body>
<script type="application/javascript" src="./import.js"></script>
</html>
import.js:
import { apath } from './alert_path';
alert_path.js:
export function apath() {
alert('Bang!!!');
}
There were two actions I had to take to resolve this problem.
First, Chrome must be at 61+ or chrome://flags must enable Experimental Web Platform features.
Second, the script tag must use type module:
<!DOCTYPE html>
<html>
<body>
<h1>Import test</h1>
</body>
<script type="module" src="./import.js"></script>
</html>
I found the second answer here under What are the basics?
Modules must be eventually included in your HTML with type="module",
which can appear as an inline or external script tag.
OBTW, the sample will fail due to CORS violations after this is resolved unless it is run through a server but that is another question.

Console Errors getting css files

I am having some errors linking to my css files from my html. I am getting the following errors.
GET http://localhost:3000/app/assets/javascripts/bootstrap.min.css
habits:30
GET http://localhost:3000/app/assets/stylesheets/application.scss
habits:34
GET http://localhost:3000/assets/js/ie-emulation-modes-warning.js
habits:52
GET http://localhost:3000/assets/js/ie10-viewport-bug-workaround.js
habits.self-f894a4f031f58f24694feda9c89f464976d99c2eda34ee3f03c956dc29757a67.js?body=1:8
Uncaught ReferenceError: Handsontable is not defined
I know that the first four is from an error referencing the css file from my html file, but what is the last error for? And how would I fix it?
The Uncaught ReferenceError sometimes means you don't have your javascript files in the correct order. For instance, if a script relies on jQuery but gets loaded first, you'll get this error.
Without viewing the entire code it's impossible to say exactly where the problem lies, but I've found that linking jQuery first, then other scripts, generally fixes the error.
One way to avoid this error is to put a conditional script in the header like so:
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write("<script type=\"text/javascript\" src=\"[jquery CDN of your choice]\"></" + "script>");
}
</script>

Chrome Sources Displaying Javascript in Chinese

My javascript was working properly and then all of the sudden it wasn't. Chrome give me the Uncaught SyntaxError: Unexpected token ILLEGAL error on line 1 of my JS file called para2.js. I removed script from the file except for the following and I still get the error:
$( window ).ready(function() {
});
My jQuery file is included in the head of my document:
<script src="../shared/jquery.js" type="text/javascript"></script>
<script src="js/para2.js" type="text/javascript"></script>
When I look at my js file in Chrome developer tools on the Sources tab, it displays the script in Chinese:
兪敵祲搨捯浵湥⥴爮慥祤昨湵瑣潩⡮笩⥽
When I view the source of the js file, it looks fine. I have read similar posts that say copy and pasting from JSFiddle can include some hidden characters that may cause it, but I have started from scratch writing this file from a blank text file and copy and pasting nothing. It is strange that it was working and now it is not. Did my server get hacked or something? And help is appreciated.
You should use the charset attribute to indicate which charset you are using.
<script src="../shared/jquery.js" type="text/javascript" charset="UTF-8">
I had the same problem with jquery-1.5.1.min.js. Chrome kept evaluating it as Chinese (scripts worked fine in IE). I finally solved the problem by re-encoding the .js files using "convert to UTF-8" in Notepad++. Note, not UTF-8 without BOM, but UTF-8.

D3.js: "Uncaught SyntaxError: Unexpected token ILLEGAL"?

I've just downloaded D3.js from d3js.org (link to zip file), unzipped it, and referenced it in the following HTML page:
<html>
<head>
<title>D3 Sandbox</title>
<style>
</head>
<body>
<script src="/d3.v3.js"></script>
</body>
</html>
But when I load this page, my console (in Chrome) is giving me this error:
Uncaught SyntaxError: Unexpected token ILLEGAL: line 2
It doesn't like the pi and e symbols at the start of the file. Errrr... what can I do about this? I am serving the file with python's SimpleHTTPServer.
Update: yes I know I can just link to a CDN version, but I would prefer to serve the file locally.
Try specifying the UTF-8 charset on the HTML host document :
<meta http-equiv="content-type" content="text/html; charset=UTF8">
D3 contains UTF-8 symbols (like π) invalids in non-UTF8 documents.
That sounds like a problem with encoding. I recommend The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!). Despite the somewhat condescending title, it contains some very useful information. Specifically, it sounds like your server is serving the d3.v3.js file with the wrong encoding.
Add 'charset="utf-8"'
<script src="/d3.v3.js" charset="utf-8"></script>
I tried setting the charset in the doc and in the script tag itself, but Chrome doesn't seem to care. Not sure if i'm doing something wrong.
I did find success by running it through uglify with the --ascii-only option first.
UPDATE: Turns out my View->Encoding setting in Chrome was not on Auto-Detect, but some Western encoding. Not sure why, but changing that resolved the problem. Ridiculous that that setting would trump a charset property right on the script tag. Considering that users might be in the same situation and not be able to figure it out, i'll still be using uglify to ensure success.
Check if you have a plus sign between all of your string concatenations, if you do not this error will be generated.

Categories