Can't figure out where this syntax error is - javascript

JS
<script type="text/javascript"><![CDATA[ jQuery(".track").hide();jQuery(document).ready(function() {jQuery(".track").show();});]]></script>
Console says
Uncaught SyntaxError: Unexpected token <
What is the issue with the syntax? I don't see it.
I'm assuming it really means everything inside the <script> tags, since it starts off with a <
Not sure how to get to this file to fix, I'm thinking something/plugin is injecting this, but how do I find out what is causing it?
Is there any easier fix?
Thanks

This would fix the error if for some reason you insist on using CDATA, but again its not needed because the page is very HTML5
<script type="text/javascript">
//<![CDATA[
jQuery(".track").hide();jQuery(document).ready(function() {jQuery(".track").show();});
//]]>
</script>

Related

Why there exist error Uncaught ReferenceError: $ is not defined if add async?

My index like this :
...
<html >
<head>
...
<script src="/scripts/myapp.min.js"></script>
<script src="/scripts/myapp-themming.min.js"></script>
</head>
<body class="header-static">
<div class="page-container">
<!-- this is call header, navigaton, content, footer -->
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/Content/assets/script/jquery-ui.min.js"></script>
...
<script type="text/javascript">
...
</script>
<script>
$(document).ready(function () {
...
});
</script>
</body>
</html>
If I test pages speed using gtmetrix. And gtmetrix recommendation for Defer parsing of JavaScript. So I try to add async like this :
<script src="/scripts/myapp.min.js" async></script>
<script src="/scripts/myapp-themming.min.js" async></script>
it showing following error,
Uncaught ReferenceError: $ is not defined
If I using defer, it make 3 error like this : Uncaught ReferenceError: $ is not defined, Uncaught TypeError: $(...).material_select is not a function, and Uncaught TypeError: $(...).select2 is not a function
How can I solve this error?
First move the two scripts in the <body> into the <head> section at the top (above the 3 dots you have added). This is what #Nijin Koderi meant.
The important thing is making sure that jQuery is ABOVE everything else so it is loaded first.
Secondly - you can't just use async as mentioned in the other answer I gave as you will end up with a race condition.
The reason you get less errors with async is purely down to load speed of resources, you will find that with enough loads you will get different errors depending on which scripts download the fastest.
It is much easier while you are learning this to use defer (in fact I nearly always use defer unless you are loading megabytes of JS or your site needs JS within milliseconds to work)
To quote the answer I gave
The easiest way [to defer parsing of JavaScript] is to add defer
attribute to each JavaScript request.
For better performance (difficult) I would recommend using async
instead as this will start downloading sooner and activate each Script
as soon as it is available.
However this often causes issues with 'race conditions' where scripts
may load out of order (i.e. if you are using jQuery and another script
loads before it that needs jQuery you will get an error).
Try defer first and if performance is good use that.
You have two errors as mentioned above, Uncaught ReferenceError: $ is not defined, Uncaught TypeError: $(...).material_select is not a function, and Uncaught TypeError: $(...).select2 is not a function
the first problem can be resolved by adding the following js file on the top before any other js as shown below
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
...
<script src="/scripts/myapp.min.js"></script>
<script src="/scripts/myapp-themming.min.js"></script>
Next Error is for select2. For resolving this issue,add the following stylesheet and js file after jquery.min.js
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js">

Uncaught SyntaxError: Unexpected token in console if script tag is present

Why is this simple code not working?
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.grid-lg').insertBefore('#menu-item-21');
});
</script>
I' read in console this error message:
Uncaught SyntaxError: Unexpected token <
at Object.InjectedScript._evaluateOn (<anonymous>:875:140)
at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34)
at Object.InjectedScript.evaluate (<anonymous>:664:21)
When I remove the script tag everything works!
When I add the beggining and ending script tag I got that error and I'm confused about why and how I fix it?
Thank you.
If "this simple code" is in a JavaScript file (not an HTML file), you don't want the script tags. Those are HTML. "Everything works" when you remove them because they don't belong there.
This HTML:
<script src="somefile.js"></script>
loads the script. somefile.js wouldn't have the tags in it, because the tags are HTML, not JavaScript:
jQuery(document).ready(function(){
jQuery('.grid-lg').insertBefore('#menu-item-21');
});
...if I added my code to the console with that...
If you mean you're pasting it into the web console, again, that's a JavaScript environment, not HTML. You don't want HTML tags there, either.

blogger.com function load uncaught referenceerror $ is not defined

My javascript is loaded before on a blogger template here: http://fashioncherry.blogspot.no/ I've also tried to make sure it is only loaded once by adding the code:
function loadAdlinkAd(){
if( !adlinkAdLoaded ){
adlinkAdLoaded=true;
Before the post footer () I've added the code:
<a class='adlink-stylemag-btn' href='http://stylemag.no'> <img alt='stylemag' height='150' src='http://adlinkmedia.no/wp-content/uploads/2013/09/STYLEmag_knapp_150x150.png' width='150'/> </a>
<script type='text/javascript'>loadAdlinkAd();</script>
I tried the same thing on http://www.camillaabry.com/ and it worked great there. So I cannot understand why I get the uncaught referenceerror $ is not defined. I'm also a newbie when it comes to this, so I'm not sure how to fix it...:-(
$ is the variable jQuery is normally stored under. Include the jQuery library before you initialize the code that throws the error and it will probably work fine.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Plugging in a jQuery plugin

I'm trying to use the jquery tokeninput plugin, the demos work fine however when I try to implement it I'm hitting a brick wall. Chrome chucks this at me:
Uncaught TypeError: Object [object Object] has no method 'tokenInput'
Below is an excerpt from my <head>, chrome's resource browser shows both jQuery and jquery.tokeninput are loaded fine. No URL issues.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.tokeninput.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>
And showing that tokeninput has loaded:
Right, bare-bones page worked fine. After digging a while longer I found this buried at the base of the page:
<script src="http://code.jquery.com/jquery.js"></script>
It seems having multiple versions of jQuery loaded is not a good thing to do.
I am not sure if you already solved it or not. But Try this it should work if your sequence of jquery library inclusion is right (which it seems right), also remove one of jquery.min.js, jquery.js.
Then try this
<script type="text/javascript">
// Any valid variable name is fine.
var j = jQuery.noConflict();
j(document).ready(function () {
j("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>
Check this out to understand why you might need this.
http://api.jquery.com/jQuery.noConflict/

Problems Adding Syntax Highlighter To Blogger

I'm trying to add Syntax Highlighter to my new blog at blogger. For some reason I keep getting these errors:
Uncaught ReferenceError: SyntaxHighlighter is not defined Uncaught
ReferenceError: XRegExp is not defined shCore.js:123 Uncaught
TypeError: Cannot read property 'config' of undefined
Here is my code:
<script src='https://xarpixels.googlecode.com/files/shAutoloader.js'/>
<script src='https://xarpixels.googlecode.com/files/shCore.js'/>
<script type="text/javascript">
$(document).ready(function(){
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.autoloader(
'js https://xarpixels.googlecode.com/files/shBrushJScript.js',
'php https://xarpixels.googlecode.com/files/shBrushPhp.js',
'sass https://xarpixels.googlecode.com/files/shBrushSass.js',
'sql https://xarpixels.googlecode.com/files/shBrushSql.js',
'xml https://xarpixels.googlecode.com/files/shBrushXml.js',
'css https://xarpixels.googlecode.com/files/shBrushCss.js'
);
SyntaxHighlighter.all();
});
</script>
To me, everything looks correct?
EDIT: I noticed that when I change the path to any of the files in the demo, the script breaks and doesn't work. This isn't making any sense at all...
I followed this method here: http://oneqonea.blogspot.com/2012/04/how-do-i-add-syntax-highlighting-to-my.html
It may not be using the autoloader(as I want to prevent http requests), but it gives me a working example to work from and perhaps I can get the autoloader working.
Thanks.
Easy alternatives using highlight js will be very easy and has many very interesting views
for demo see here from the official website
<!– Syntax highlighter –>
<link href=‘//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/github.min.css’ rel=‘stylesheet’/>
<script src=‘//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js’/>
<script>hljs.initHighlightingOnLoad();</script>
<!– end Syntax highlighter –>

Categories