`Uncaught SyntaxError: Unexpected token <` when referencing existing javascript file - javascript

Important edit at bottom of some strange behavior.
I'm trying to include a javascript file into my html via a <script> tag and I'm getting the error Uncaught SyntaxError: Unexpected token <
In case it matters, I'm using the Velocity templating engine.
Any help is greatly appreciated!
Here is my directory structure.
Here is my index.vm file.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Velocity Demo</title>
</head>
<body>
<input type="text" onkeydown="filter(this)"></input>
#foreach ($person in $personList)
<div>
<h4>$person.name</h4>
</div>
#end
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="../static/js/filter.js"></script>
</body>
</html>
And here is the javascript file.
function filter(element) {
$.ajax({
url: '/updateFilter?filter=' + element.value,
success: location.reload(true),
error: location.reload(true)
})
}
Editing to add this image. For some reason this is the filter.js file when I inspect the sources in Chrome.
EDIT: For some reason, every request other than the one I have mapped to the controller, including filter.js, is returning the raw html from index.vm

You have an unnecessary closing tag for your element - pasting your html into plnkr highlights this.
I would also perform a "trial and error" process of elimination, as it may not be the inclusion of the JS file that is the cause.

Related

Use js file as cdn in HTML

I made a library in jquery an hosted in to my shared hosting. That js file is accessible when I hit from browser . But if I set it in my html like cdn it's not working. That's mean if I use code directly without use separate file it works but when I keep that js code in a file and include file then not works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
body code ...........
<script src="https://mydomain/acdn/jsfile.js"></script>
</body>
</html>
My cdn file
<script>
$(document).ready(function() {
$.ajax({
url: '{{ url('get-list') }}',
.........................
})
</script>
here shows error Unexpected identifier in {{ url('get-list') }}
You JavaScript contains:
'{{ url('get-list') }}'
This appears to be some kind of template code that the server-side code which generates your HTML document will replace with some data.
When you take it out of the HTML document, it is no longer being generated by that server-side code so won't be replaced. The JS parser therefore attempts to parse it, fails, and throws an error.
Move the template code back inside your HTML, then read the data from the HTML document using the JS.
e.g.
<script src="..." data-url="{{ url('get-list') }}">
And then in your script:
const url = document.currentScript.dataset.url;
(Make sure you change any logic which escapes the data to make it safe to be injected into JS to logic which makes it safe to be injected in HTML).

Why I get error when I attach reference to js file?

I fill shame to ask this silly question but anyway I get this erorr:
Uncaught SyntaxError: Unexpected identifier
Any time that I add this ref:
<script src="../Scripts/ddd.js"></script>
to index.cshtml page.
Here is index.cshtml page:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="../Scripts/ddd.js"></script>
</head>
<body>
<div>
Home
</div>
</body>
</html>
And here is ddd.js file:
(function () {
alert("ddd")
}());
UPDATE
I use asp.net core 2.2
Any idea why I get the error above?
please add reference like this
<script src="~/Scripts/ddd.js"></script>
In ASP.NET Core default root folder is always wwwroot folder. So you need to put your files under wwwroot folder. If you want to refer that file from a regular html file you can use '''
"../Scripts/ddd.js"
'''
However if you refer it in a cshtml page with razor code then you would need
'''
"~/Scripts/ddd.js"
'''
"~" points to root folder in razor syntax.

Unexpected token < exception when I set charset="utf-8" in js file

I have book.jsp and book.js file. I was trying to set charset in js file like below.
<script src="/js/view/page1/main/book/book.js" type="text/javascript" charset="utf-8"/>
Jsp content loading without issue but getting below exception in the console while trying to load js file for that page.
Uncaught SyntaxError: Unexpected token <
You need to make sure to close the tag.
<script src="/js/view/page1/main/book/book.js" type="text/javascript" charset="utf-8"></script>

Riot custom tag not loading (hello world example)

I have the most basic possible custom tag, but it's not mounting. Also if I use riot.mount('*') I get this error in riot.min.js
Uncaught SyntaxError:
Failed to execute 'querySelectorAll' on 'Document': The provided selector is empty.
Compiled Tag
riot.tag('test', '<div>Hello world!</div>', function(opts) {
});
Index file:
<!doctype html>
<html>
<head></head>
<body>
<test></test>
<script src="https://cdn.jsdelivr.net/riot/2.2/riot.min.js"></script>
<script src="tags/test.js" type="riot/tag"></script>
<script>riot.mount('test')</script>
<!-- <script>riot.mount('*')</script> throws error -->
</body>
</html>
Oh was mixing the pre-compiled and browser compiled syntax. After removing type="riot/tag" from my tag reference it mounted correctly.

Jsp expression language not evaluated in .js files

I am making a Java EE 6 application and using Glassfish 3.1.2.2.
I wan't to use EL inside a jquery script, stored in a sepparate .js file but I can't get it to work. This is the script:
$(document).ready(function(){
$("select#classLabel").change(function(){
var unsetList = ${classyJson};
var chosen = $("select#classLabel").val();
$("select#classSubLabel").val(chosen);
});
});
And I get the following error message from netbeans:
"subLabelSet.js: Expected ; but found {
Expected semicolon ; after 'classy'.
The global variable 'classy' is not declared."
The same script works fine if I put it directly in the .jsp file like this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Titly</title>
<script type="text/javascript" src="js/jquery-1.10.2.js" ></script>
<script type="text/javascript" src="js/generateSavedSearchTable.js" ></script>
<script type="text/javascript" src="js/subLabelSet.js" ></script>
<script>
$(document).ready(function(){
$("select#classLabel").change(function(){
var unsetList = ${classyJson};
var chosen = $("select#classLabel").val();
$("select#classSubLabel").val(chosen);
});
});
</script>
</head>
This reminded me of a problem I had before where I couldn't get the EL to evaluate inside files ending in '.jspf'. This I fixed by adding:
<jsp-property-group>
<description>Used to enable interpretation of EL in jspf files</description>
<display-name>jspf</display-name>
<url-pattern>/WEB-INF/jspf/*</url-pattern>
</jsp-property-group>
in the web.xml file. But when I try to do the same for .js files:
<jsp-property-group>
<description>Used to enable interpretation of EL in javascript files</description>
<display-name>javascript</display-name>
<url-pattern>/js/*</url-pattern>
</jsp-property-group>
I does not work and I get the following error:
SEVERE: PWC6117: File "C:\S1\Documents\netbeansprojects\UI\build\web\js\generateSavedSearchTable.js" not found
SEVERE: Error compiling file: C:\S1\GlassFish_Server\glassfish\domains\domain1\generated\jsp\UI\org\apache\jsp\js\jquery_002d1_10_2_js.java
WARNING: StandardWrapperValve[jsp]: PWC1406: Servlet.service() for servlet jsp threw exception
org.apache.jasper.JasperException: PWC6033: Error in Javac compilation for JSP
PWC6199: Generated servlet error:
code too large for try statement
PWC6199: Generated servlet error:
code too large for try statement
PWC6199: Generated servlet error:
code too large
at org.apache.jasper.compiler.DefaultErrorHandler.javacError(DefaultErrorHandler.java:129)
at org.apache.jasper.compiler.ErrorDispatcher.javacError(ErrorDispatcher.java:299)
at org.apache.jasper.compiler.Compiler.generateClass(Compiler.java:392)
at org.apache.jasper.compiler.Compiler.compile(Compiler.java:453)
at org.apache.jasper.JspCompilationContext.compile(JspCompilationContext.java:625)
at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:375)
at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:473)
at org.apache.jasper.servlet.JspServlet.service(JspServlet.java:377)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:770)
at org.apache.catalina.core.StandardWrapper.service(StandardWrapper.java:1550)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:281)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:175)
at org.apache.catalina.core.StandardPipeline.doInvoke(StandardPipeline.java:655)
at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:595)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:161)
at org.apache.catalina.connector.CoyoteAdapter.doService(CoyoteAdapter.java:331)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:231)
at com.sun.enterprise.v3.services.impl.ContainerMapper$AdapterCallable.call(ContainerMapper.java:317)
at com.sun.enterprise.v3.services.impl.ContainerMapper.service(ContainerMapper.java:195)
at com.sun.grizzly.http.ProcessorTask.invokeAdapter(ProcessorTask.java:860)
at com.sun.grizzly.http.ProcessorTask.doProcess(ProcessorTask.java:757)
at com.sun.grizzly.http.ProcessorTask.process(ProcessorTask.java:1056)
at com.sun.grizzly.http.DefaultProtocolFilter.execute(DefaultProtocolFilter.java:229)
at com.sun.grizzly.DefaultProtocolChain.executeProtocolFilter(DefaultProtocolChain.java:137)
at com.sun.grizzly.DefaultProtocolChain.execute(DefaultProtocolChain.java:104)
at com.sun.grizzly.DefaultProtocolChain.execute(DefaultProtocolChain.java:90)
at com.sun.grizzly.http.HttpProtocolChain.execute(HttpProtocolChain.java:79)
at com.sun.grizzly.ProtocolChainContextTask.doCall(ProtocolChainContextTask.java:54)
at com.sun.grizzly.SelectionKeyContextTask.call(SelectionKeyContextTask.java:59)
at com.sun.grizzly.ContextTask.run(ContextTask.java:71)
at com.sun.grizzly.util.AbstractThreadPool$Worker.doWork(AbstractThreadPool.java:532)
at com.sun.grizzly.util.AbstractThreadPool$Worker.run(AbstractThreadPool.java:513)
at java.lang.Thread.run(Thread.java:724)
Any ideas on what is going wrong and if/how I can fix it?

Categories