Include javascript file in freemarker template using spark - javascript

I've tried to include javascript file in ftl (Freemarker Template)
but I keep getting this message
I'm using Spark framework which has Jetty server. This happens every time I try to include any file, even just an image. With css I've used <#include "style.css"> but it's workaround.
Is there any way to include scripts?

You must use staticFileLocation to tell where static files like *.js and *.css are placed, so spark will serve them directly.
Secondly, don't include css like that:
<#include "css/style.css">
because it will end up with css rules inside <head> tag, which will not work.

Related

Where should I put static files in my shared hosting account?

I tried putting the JS file in public_html, where I also put my CSS, but than it only shows the JS code.
I also cannot find any tutorial as to where do put any files and wanted to ask before I do something that will harm my site.
Should I make a new file and change the url in my HTML to the new folder?
Anurag Srivastava said:
It is good practice to put css and js in respective folders, the
index.html will be directly in the public_html folder. But I did not
get this statement of yours - "I tried putting it in public_html,
where I also put my CSS, but than it only shows the JS code."
So I will put every css and js file in separate folders inside public_html, only index.html goes straight inside public_html

Include javascript with resources via h:outputScript

I would like to include JScolor to my jsf application. It is possible via <script> tag, but I mean it is more system via <h:outputScript>.
However it is not working with resources. JSColor includes one js file and some picture files - it seems like the js file is included and the reousrces not.
Could anybody tell me why? And how to solve this?
Thank you.
The JS file is apparently referencing picture files via a relative path which do not represent a valid JSF resource URL.
The <h:outputScript> generates a JSF resource URL which goes through the JSF resource handler which worries about among others automatic localization and versioning. It would generate an URL prefixed with /javax.faces.resource and also append the currently used FacesServlet URL mapping such as *.xhtml or /faces/*.
Thus, if you mapped the faces servlet on *.xhtml and have a /resources/jscolor folder with the JS and image files and have referenced the JS file as follows,
<h:outputScript name="jscolor/jscolor.js" />
then it would generate
<script type="text/javascript" src="/context/javax.faces.resource/jscolor/jscolor.js.xhtml"></script>
However, the image files are not physically available in /javax.faces.resource/jscolor folder, instead they are physically available in /resources/jscolor folder. The /javax.faces.resource would only be automatically resolved when you apply the faces servlet mapping on the resource name. Thus, this specific case would only work if you manually edit the jscolor.js file to change image file names from e.g. arrow.gif to arrow.gif.xhtml.
If you don't utilize any automatic localization or versioning features of the JSF resource resolver, nor are using any special custom resource resolvers which requires real JSF resources rather than static HTML elements, such as this one, then you can also just go ahead with a plain vanilla HTML <script> element instead of a <h:outputScript>.
<script type="text/javascript" src="#{request.contextPath}/resources/jscolor/jscolor.js"></script>
I may misunderstand your question, but this snippet will help:
<script
type="text/javascript"
src="#{facesContext.externalContext.requestContextPath}/path/on/WebContent/foo.js"></script>
I regularly use this kind of java resource include, instead of the <h:outputScript>
add in web.xml
<servlet-mapping>
<servlet-name>Resource Servlet</servlet-name>
<url-pattern>/resources/*</url-pattern>
</servlet-mapping>
Suppose your js file's path (file named jquery.js) into resources/js folder like that:
resources/js/jquery.js
Then you have to write:
<h:outputScript name="./js/jquery.js" target="body"/>
PS. Pay attention on attribute target (eg head, body)

How to get visual studio to recognize a cshtml file as javascript

I am writing a css/js page that has some dynamic parts in it.
To do this i am using a cshtml file containing css/js - i am using mvc.net and returning the css from a controller action.
The trouble is visual studio recognizes this page as html and not as javascript/css so it does not give me javascript/css coloring and IntelliSense.
My questions:
is there a better/easier way of creating dynamic css/js in .net
How can i get visual studio to recognize a cshtml page as javascript.
I know this is an old post...but...
What I did was just put the script tags around my javascript files in their own .cshtml file.
I created a separate controller (JavascriptController.cs), and I created a filter on that controller that removes the script tags. I set the filter in the OnActionExecuting method. by just doing
this.Response.Filter = new ScriptFilter(Response.Filter, Response.ContentEncoding);
So you get the syntax, you get razor without having to use RazorJS, and you can request the js files like regular routes in an MVC application. You just have to keep the script tags on the partial view while editing.
So you can call
/Javascript/{Action}
and you'll get your javascript file with your razor in it, and the filter will remove the script tags so you can include it like a normal script.
<script src="http://{host}/Javascript/{action}"></script>
What is wrong with putting <script> and <style> tags in a page and put your dynamic js/css there , in the end if it is dynamic there is no way for caching it so this approach will be fine.
you can write something like below:
<script>
function myFunction_#MyFunc(params)(obj) { return obj.field + #MyOtherFunc(params); }
<script>
and razor engine will evaluate #MyFunc(params) and #MyOtherFunc(params) before sending it to browser
The best solution is to follow unobtrusive javascript and unobtrusive styling and put your javascript into a .js file, put your css into a .css file and reference them in the markup in your cshtml file with a <script> and <link> tag.
e.g.
<script src="Scripts/scriptName.js" type="text/javascript"></script>
<link rel="stylesheet" href="Content/styleSheetname.css" type="text/css" />
This is good practice as it keeps your content(markup)/styling/behaviour separate.
For JavaScript you could try the RazorJS nuget package. But we've run into some inconsistencies while using it.
Still trying to find a better way to do this using Controller/Views and still be able to use intellisense and get decent coloring.

MVC3 Relative URL Paths - Javascript

I have an issue with relative paths whereby when the web app is running off subdirectory of the domain, the paths are not correct. e.g. http://www.example.com/webapp/
If I use #Url.Content("~/path/to/action") on the page it is fine. I can even embed the #Url.Content("") inside the javascript script. I want to clean up the page I wanted to put the javascript inside a js file and reference that. Now that the #Url.Content is being called inside the javascript file, it doesn't seem to work (probably for obvious reasons). How can I get around this issue?
I had a look at the <base /> but that doesn't seem to work.
Now that you moved everything into a separate js file, the file is being served as static content, and the Razor syntax is not being parsed.
If you need relative paths inside of your js which might change, then you should include a script in each page which sets a path var, and use #Url.Content(...) in this script, e.g.,
<script type="text/javascript">
pathToAction = "#Url.Content(...)";
</script>
Then, declare the pathToAction var in your js file, and use it as needed.

Grails: Javascript files in views folder

I'd like to split my views in Grails into 2 files a .gsp file and a .js file so that I get a cleaner Javascript separation from my views. So here's an example:
views/index.gsp
views/index.js
views/home/index.jsp
views/home/index.js
But when I simply add the index.js script reference like this:
<script src="index.js" type="text/javascript"></script>
all I get is a 404.
Does anyone knows how to deal with this?
A great benefit would be to have the ability to use view data inside the index.js file to produce the desired content.
Matthias.
Actually, it should be perfectly possible to serve a JS file (or any other file type) as a GSP from your grails-app/views/ directory. The only thing you have to do, is define a suitable URL mapping for those GSPs, e.g.:
"/javascript/home/index"(view:'/home/index.js')
With this URL mapping, you can put your JS code into grails-app/views/home/index.js.gsp (note the trailing .gsp) and you can use any grails tags in your JS source. To ensure that your JS is delivered with the correct content type, you may want to place
<%# page contentType="text/javascript"%>
at the beginning of your GSP.
Unfortunately, the createLink tag doesn't support link rewriting to views, but it should be easy to write your own tag to create those links.
Anyways, keep in mind that this won't have a very positive impact on your app's performance. It's usually better to have static JS files (and also serve them as static resources) while passing dynamic stuff as parameters to JS functions for example. This will also keep you from some headaches wrt. caching etc.
The idea is good, but Grails has this directory structure for a reason. The view folder is intended for a certain artifact type (views)..
You could clone your view folder structure under web-inf, but that gives you more work as I guess the idea behind this is to keep related files close together for convenience reasons.
Even though I'm not to excited about storing Javascript together with the view I loved Robert's idea of hooking into the build process by using build events to copy javascript sources into the right directory! If you decide to go down that road you might as well compress the sources while you're at it. ShrinkSafe is popular library.
I don't think you are allowed to access js inside views/
if you need to do that ... here is the trick
create your js and rename it with myjs.gsp (use "")
iniside _myjs.gsp type you js
... write down you js in here ...
inside you gsp (for example: index.gsp, view.gsp, etc)
type this tag to upload you js
Update 2:
Grails offer the possibility of hooking into the build lifecycle using custom events.
An event handler can be written which synchronises all JavaScript files under grails-app/views with the target folder of web-app/js.
Place the custom code in $PROJECT/scripts/Events.groovy. The PackagingEnd is a good target for the invocation, since it happens right after web.xml is generated.
eventPackagingEnd = { ->
// for each js file under grails-app/views move to web-app/js
}
Update
If you'd like the JavaScript files simply 'meshed' together, you can do that using symlinks, e.g.:
grails-app/views/view1/index.js -> webapp/js/view1/index.js
As far as I know, there is no way of forcing grails to directly serve content which is outside of web-app.
Alternatively, you can inline your JavaScript, but that can have performance implications.
JavaScript files belong under web-app/js.
Then you can reference them using <g:javascript src="index.js" />.

Categories