Jsp expression language not evaluated in .js files - javascript

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?

Related

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>

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

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.

ERROR: Kendo"Something" is not a function

So I am trying to convert my plain HTML/Javascript site (which works fine) into an ASP MVC4 project. What I do is get and XML and use and XSLT to transform. I litreally use the code from here to do that
In my _Layout.cshtml I use razor to load the resource
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
... things...
#Scripts.Render("~/bundles/kendoScripts")
#Scripts.Render("~/bundles/customScript")
#Styles.Render("~/Content/themes/Kendo")
#Styles.Render("~/Content/themes/customCSS")
my view that uses the layout is very straight forward, this is all that is in the page
#using Summ.ExtensionCode
#model SumMVC.Models.SummaryModel
#{
ViewBag.Title = "_Summary";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div data-role="content">
#Html.RenderXml(Model.ProgramFilename, Model.StylesheetFilename, Model.Parameters)
</div>
In #Scripts.Render("~/bundles/customScript"), is a JS file, renderpage.js that has this bit of code $(this).kendoDropDownList(); where this is a select element. But I am getting a error that .kendoDropDownList(); is not a function. The error from firebug: TypeError: $(...).kendoDropDownList is not a function and the errror from GoogleChrome Uncaught TypeError: Object [object Object] has no method 'kendoDropDownList'. It seems that in my bundle the JS file kendo.all.min.js is not begin loaded here is what is looks like
bundles.Add(new ScriptBundle("~/bundles/kendoScripts")
.Include("~/Scripts/kendoui/kendo.web.min.js")
.Include("~/Scripts/kendoui/kendo.all.min.js")
);
....
bundles.Add(new ScriptBundle("~/bundles/customScript")
.....
.Include("~/Scripts/SummaryScript/renderpage.js")
....
);
I am assuming that perhaps the code is being executed before kendo.all.min.js is done loading, but as you can see above renderpage.js is after kendo. Any ideas or insight?
UPDATE
I forgot to add that when I manually load the resource in the MVC project in the head tag
<script type="text/javascript" src="~/Scripts/kendoui/kendo.web.min.js"></script>
<script type="text/javascript" src="~/Scripts/kendoui/kendo.all.min.js"></script>
....
<script type="text/javascript" src="~/Scripts/ExecSummaryScript/renderpage.js"></script>
it works fine.
Update2
Turns out the Kendo JS file is not being loaded at all. I check the resource in the dev console and notice that it not even there.Upon closer inspection I notice that all resources are loaded except some .min.js files. There are a few loaded but some that are not loaded are jquery-ui-1.10.3.min.js, and jquery.browser.min.js.
I knew it was going to be something stupid. Turns out that it's a MVC4 gothcha. I had to rename my file. Appearently it did not like files with extension min.js I found the answer here

Referencing JQuery correctly

I am trying to use Jquery for the first time and I am getting an issue. I am using VS 2013, asp.net and VB.
My head tag is as follows.
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#LowerText').hide();
$('#UpperText').hide();
$('#AssetStatusChoice').change(function () {
if($('#AssetStatusChoice').val("Fully Available"))
{
$('#CommentsText').hide();
}
if ($('#AssetStatusChoice').val("Restricted"))
{
$('#UpperLimit').show();
$('#LowerLimit').show();
}
if ($('#AssetStatusChoice').val("Unavailable"))
{
$('#Commentstext').show();
}
});
});
</script>
</head>
When I debug the page I get the following error.
0x800a1391 - JavaScript runtime error: '$' is undefined
It seems from Googling the error that I am not referencing the js file correctly. Can anyone help?
Add <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script> and Remove the
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script> Just use a host Jquery instead of adding it to you source. Read more :
3 reasons why you should use hosted jQuery
IIS doesn't serve content in the /bin directory.
Move it to another directory like /scripts or /js or /scripts/lib, something like that. The bin directory is a bad place to put script files.
You have a number of options here. You could use the Google CDN by adding the following to your header:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Or, as it appears you're using .NET, you could do this:
<script type="text/javascript" src="<%=ResolveClientUrl("~/Bin/jquery-1.10.2.js") %>"></script>
The second option gives you the additional advantage that when used in a master page can be used in any content pages at any file system level and it will still resolve correctly.
As Stefan has also said, I'd recommend moving your jQuery file from your bin directory.
Copy the jQuery file in some other folder, like Scripts, or js, and in Solution Explorer check to see all files. Find the jQuery file you just copied, include it in the project, then drag it on the page where you want to place it. A correct script tag will be created.

linked JS not running on slow webserver

I have a probably very simple problem that is completely spoofing me.
I have got a web server (XAMPP) running off a reasonably slow usb stick.
I've got a very simple file structure:
--htdocs
--projects
--callback
index.html
--js
jquery-1.9.1.min.js
callbackclient.js
--css
main.css
For some reason, I can't get a simple linked script working:
Here is my index.html
<!DOCTYPE HTML>
<html>
<head>
<script src='js/jquery-1.9.1.min.js' type='text/javascript'></script>
<script src='js/callbackclient.js' type='text/javacsript'></script>
<link href='css/main.css' rel='stylesheet' type='text/css'>
</head>
<body>
This is a test
</body>
<script>
$(document).ready(function(){
tester();
});
</script>
</html>
And here's my callbackclient.js:
function tester(){ console.log("test");
}
When I hit localhost/projects/callback the browser displays "This is a test" as expected, but I get an error in the console:
Uncaught ReferenceError: tester is not defined
I get the same if I try to run tester(); from console directly, yet $("head") correctly selects the head element which I guess means jQuery is being loaded fine.
I must have missed something fundamental - someone please enlighten me!
It could be that you misspelled the type on the script tag. text/javacsript instead of text/javascript
Try this inside your callbackClient.js:
var tester = function (){ console.log("test"); }
If that works, you just need to have the function be set to a variable, and then call it. If that doesn't work, then I would just remove the JS code on your HTML page and do this inside your callbackClient.js:
jQuery(function () {
// Logic here
console.log('this is working, right?');
var functionName = function () {
console.log('blah blah blah')
}
functionName();
})
Hope that helps!

Categories