I'm new at Play Framework and making my first project with it. I added jQuery and bootstrap.js to my main.scala.html:
<script src="#routes.Assets.at("javascripts/jquery-2.1.3.min.js")"></script>
<script src="#routes.Assets.at("javascripts/bootstrap/bootstrap.js")"></script>
When I run my application in a browser, I get the compilation error:
Missing semicolon in \app\assets\javascripts\jquery-2.1.3.min.js:2
You can see the screenshot here: http://oi61.tinypic.com/2lllklx.jpg
The same problem if I add only a bootstrap js, minified version or separate js files.
I don't change those files, I add them in the form they were originally - downloaded from jQuery/Bootstrap websites.
I tried to add semicolons manually, but there are hundreds of them missing. I don't think that's a good idea.
Maybe I should change some settings in the Play application?
You put a js file on app/assets/javascript, that folder is for files that need to be compiled, like coffee script files. So, jquery and bootstrap files need to be on public/javascript.
Ensure you have a route similar to this on conf/routes:
GET /assets/*file controllers.Assets.at(path="/public", file)
Anyway, I recommend you to use WebJars.
Related
It looks stupid question, I'm using webpack to build static website
I wanted to bundle my JavaScript files of different pages into one
but some elements that I selected by JS that existing in home page and not in about page throwing error when I go to about page.
It's not effective just in console and I can ignore it
should I separate files ? if so is that possible to make webpack inject different pages with the proper JS file?
Thanks...
Try to make min files using webpack , or u cn use rollup.js
If possible please share code snippet.
I'm building a normal App (JQuery, ES6, etc) with webpack and it's usual loaders. I came across the following situation:
In development, I wish to use the style-loader, to have my css in an inline tag.
In production, I want to have a minified-css-bundle-file (dam, what a word), that I can cache later on and avoid FOUC. I'm using the well known Extract Text Plugin for that purpose.
The problem is, when I am in production I will need to add a
<link href="some-bundle.css" /> to my index.html. OK. But by doing this, back in development I would get a 404 every time, since my css is not coming from any external source (It comes from JS and it's inline thing).
And if I don't add the link tag, i'm never getting the compiled stylesheet.
So, how do you do this? Is there any loader to auto add the <link> in production? Or you just manually add It later on?
Thanks, []s
You could use HTML Webpack Plugin to generate index.html files based on your Webpack build (dev/prod). One would include the link tag, another would not.
i recently joined in a new company and found out they were using so many scripts in Layout.cshtml.as shown in fig
so in order to improve the performance,i used mvc bundling functions as shown
and referenced it on layout page with #Scripts.Render("~/bundles/jqueryval").but the problem is.many of the java scripts doesnt work any more especially jquery data table.what point im missing here?
I think in your scenario your js files are conflicting with each other ,solution for your problem is :
Use $.noConflict() to avoid conflicts between jquery's files :-
Follow this link :
http://api.jquery.com/jquery.noconflict/
if some js files are not working then just check the order of your js files also..
Try and check if the files are in the correct order.
If you are on local, you might have some setting to not load the .min file, happened to me once.
2 suggestions, add scripts after css and maybe start using requirejs, it will help you with the dependencies and async loading of the js
I'm trying to call an external JS file from my Yii asset folder and the source code is showing the right file, but the JS is not responding.
I included this in my view file ...
<?php Yii::app()->clientScript->registerScriptFile( Yii::app()->request->baseurl . '/assets/test.js' ); ?>
And I know this is the problem b/c when I replicated it in a non-Yii folder it worked, and when I sourced the online JS file in Yii it worked.
The assets folder should be only used to publish there files by the asset manager. For example if the JS file is part of a widget, you can place it in protected/components/widgets/assets/yourJsFile.js and use the assets manager to publish it automatically in the /assets folder. Read more here: Understanding Assets. You probably would want to put your file in /js/test.js and work directly with it, if not using the asset manager.
I still do not know if this is the issue, if the file is loading. If this doesn't help, please show some more code - where and how do you load that js file in the views, what is in the file, etc.
CClientScript::registerScriptFile() can put the <script> tag in various parts of your page's HTML (three places to be exact: in the <head> or at the start or end of the <body>). Sometimes the position matters because the order of script tags matters. I found ordering to matter when I used jQuery UI.
By default it puts the script tag in the <head>. If you play with the position you may find it working.
The little bit of code you show doesn't indicate any problems. But you may want to give a bigger example and/or show what you did that worked. By the way, in Yii you should not be putting things directly into the assets folder. Items get in here by being published through the asset manager.
I am using Eclipse Ganymede and Tomcat 5.5. I would like to add some javascript and especially ajax functionality to a dynamic web project and need some help.
I would like to use jquery (but I am open to other suggestions, if you tell me why another library would be better in this case, but I have chosen jquery because it is supposed to be simple (which on the first look it seems to be)).
I am having two problems:
1- Tomcat can't find the jquery library. I tried several things in my jsp file like:
<script type="text/javascript" src="WEB-INF/lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/WEB-INF/lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./WEB-INF/lib/jquery-1.3.2.min.js"></script>
As you can see, I threw the jquery library in /WEB-INF/lib. Executing the jsp file within a browser without tomcat (with the last path version) works, so the path is correct.
2- There is no proper syntax highlighting within the dynamic web project for jquery and no popup suggestions. I also tried the information in this article, but it didn't change much.
To be more specific (because it took me about half an hour to figure this out after getting to this point):
When you create a Dynamic Web Project with Tomcat in Eclipse, among other things in the project you get a folder named "WebContent". That's the actual folder that gets deployed to the Tomcat server, in Eclipse's equivalent of Tomcat/webapps/<project name> (I'm not sure where it really exists). For security reasons, as a special case nobody can access the META-INF and WEB-INF folders in there, so putting your scripts in those places will not help.
What you have to do is create a folder inside of WebContent, and stick your Javascript in there. This folder will be globally visible, so visitors to your site (like you, when you test it) can actually get to the Javascript.
What I did, for instance, was create a folder named "script" in WebContent and put my Javascript in there; then, when I needed to reference it in a page, I put in src="ProjectName/script/AwesomesauceJavascript.js"
I'd like to add to what #Tacroy responded with. Within the server you're using in Eclipse, check the server.xml. Make sure:
Context docBase="SomeProjectName" path="/SomeProjectName" <-- path and docBase attributes need to be the same.
I had two different things there, and had to make them identical for the src attribute to work in the jsp.
First you must to add resource mapping to your folder where you put jquery.js script library. That folder must be public.
To make folder public use this line of code:
<resources mapping="/scripts/**" location="/WEB-INF/scripts/**" />
Now you just need to add reference in your page to this path:
<script type="text/javascript" src="scripts/jquery-1.10.2.js" ></script>
Below are the steps to enable jQuery syntax highlighting and content assist highlighting in Eclipse.
Download jqueryWTP0.40foEn.jar.
Find your Eclipse Plugin org.eclipse.wst.jsdt.core_version.jar, backup the plugin.
(e.g. C:\DEV\EclipseIndigo37\eclipse\plugins
\org.eclipse.wst.jsdt.core_1.1.100.v201104272153.jar)
Double click the JAR file or run with command java -jar jqueryWTP0.40foEn.jar.
On the opened swing UI, choose org.eclipse.wst.jsdt.core_version.jar, and output directory.
Click the generate button.
Replace the old org.eclipse.wst.jsdt.core_version.jar file with the generated file.
Delete the directory workspace/.metadata/.plugins/org.eclipse.wst.jsdt.core
Start Eclipse.
Open a HTML file or a JavaScript file, edit JavaScript content.
jQuery content assist is now available.
Plugin Developer & Source