I tried to add a js file or css file as i mentioned below in the .vm file
<script src='/templates/jquery-1.6.2.js>
it didn't work.
But when i tried adding as given below it worked
<script type="text/javascript">
#include( "jquery-1.6.2.js" )
</script>
But the issue is in the browser if do view source even the jquery-1.6.2.js code also appears.It doesnot hide the js code. Is there any alternate way to add the js or css file in velocity template ??
In case someone comes across this question, there is a straightforward way to include CSS styles in a Velocity template. I had a need to add some overrides to a .vm file, and putting a <style> tag with the appropriate rules inside <body> worked. I initially had the <style> inside the <head> tag but that wasn't being picked up by the parser for some reason. It looked fine in IE 8, FF 3.6, and Chrome.
Related
I need to be able to add a js file to be able to manipulate the html? I tried to add something similar to what is done in the assets.yml by loading the styles.css, but I did not have the expected result, and I do not understand how else I could do it.
There is a new Quick Start Guide in a JavaScript tutorial that has the exact example you are asking for:
https://doc.oroinc.com/frontend/javascript/js-quick-start/
You can do JavaScript coding inline, I would suggest making a separate file for it though, just like you do with a .css file. A .js file is called with a <script> tag instead of <link> in your HTML document.
How to do it
Make a new file called main.js inside your folder
Call it with the <script> tag in your HTML document, usually just before the closing </body> tag.
Make an element and manipulate it - this example is the p element that has the ID #change. One way to do it is with document.querySelector. You can do it with a classname as well if you prefer.
I'll let you do the rest.
document.querySelector('#change').innerHTML =
<p id="change">Change me</p>
<script src="main.js"></script>
currently am working in a Golang Site, as frontend I am using the go templates. In order to separate the different parts of the sites I created this templates:
Head: containing the <head> tag, and some imports of css
Header: defining the navbar of the site, logo, etc. It's only HTML
Footer: defining the HTML of the footer of the site.
SomePage: defining the body tag, this template calls Head, Header and footer. This file can be for example the index, the login, etc.
I added the Javascript imports just after I nest the footer template, but still inside the body tag. As example, I added them like:
<script src="public/js/SomeJS.js"></script>
<link href="public/css/SomeCSS.css" type="text/css" rel="stylesheet"/>
In the routes of my project I have defined public to serve those static files, this is working pretty nice. Now, I have some routes of the project, lets say:
router.GET("/",controllers.Index)
router.GET("/login",controllers.Login)
With the first route, the libraries are being loaded pretty well. Then, with routes as the second, I am not able to load them because the browser tries to locate that files as:
http://myserver/login/public/css/someCSS.css instead of
http://myserver/public/css/someCSS.css
In this case, I understand why it's adding the login to the URL. So, my question is, how it's normally handled?
By now I added the domain and folder to the imports, example:
<script src="MyDomain.com/public/js/SomeJS.js"></script>
But I really don't want to do it in this way, because anytime that the domain change I should be editing the code and it's not really pratical. Also, I don't want to add the imports of the libraries in every view that I create. I have some files (CSS and JS) that are common for all the project and I just want writte it once.
Thank you!
Add / in the being of the path, it is called relative path from domain root.
<script src="/public/js/SomeJS.js"></script>
<link href="/public/css/SomeCSS.css" type="text/css" rel="stylesheet"/>
Without /, it is called as relative path from current domain directory. This is the behavior you have right now.
Output:
http://myserver/public/css/someCSS.css
http://myserver/public/js/SomeJS.js
I have a superfish jquery plugin, which has 4 js and 1 css:
<script src="~/Scripts/JQ_Addons/SuperFish/jquery.bgiframe.min.js"></script>
<script src="~/Scripts/JQ_Addons/SuperFish/hoverIntent.js"></script>
<script src="~/Scripts/JQ_Addons/SuperFish/supersubs.js"></script>
<script src="~/Scripts/JQ_Addons/SuperFish/superfish.js"></script>
<link href="~/Scripts/JQ_Addons/SuperFish/superfish.css" rel="stylesheet" />
I want to create one bundle for all of this, but when I call bundles.Add(), it can only add one type of bundle, ScriptBundle or StyleBundle.
bundles.Add(new ScriptBundle("~/bundles/superfish").Include(
"~/Scripts/JQ_Addons/SuperFish/jquery.bgiframe.min.js",
"~/Scripts/JQ_Addons/SuperFish/hoverIntent.js",
"~/Scripts/JQ_Addons/SuperFish/supersubs.js",
"~/Scripts/JQ_Addons/SuperFish/superfish.js")); // I can not add css here
and in the view, I can only choose to render one type of bundle:
#Styles.Render or #Script.Render
So, my question is: Is it possible to create only one bundle rule with both js and css included? and in my view, I want something like:
#Bundles.Render("~/bundles/superfish")
The main reason you cannot has to do with how browser handle these files.
To retrieve style sheets, the html tag is <link>
To retrieve scripts, the html tag is <script>
The html tag tells the browser what the contents of the file is.
On the MVC server side code, the main reason to use bundling is to combine script and link files into a single file. Then to minimize them. Bundling uses different minimization functions based on type of file. If you combine scripts and css into a single file, the bundling code will not properly minimize the resulting file.
Hy guys!
On my site I noticed that on some pages I don't have a Jquery library included. But on other pages I see it in my head tag:
<head>
...
<script type="text/javascript" src="/assets/fe9bd624/jquery.js"></script>
<script type="text/javascript" src="/assets/fe9bd624/jquery.ba-bbq.js"></script>
...
</head>
In my theme layout/main.php I don't have Jquery files in head tag. So question is: what controls inserting Jquery on my pages, and how to insert it on all pages. Thx.
jQuery would only be inserted automatically if you call the registerCoreScript method. There's nothing built into Yii to force jQuery upon you.
However, it could be that your using a widget or extension somewhere that uses jQuery, which would make it's own call to the registerCoreScript. (CGridView for example)
If you use any widget or component or extension which needs jquery & using function registerCoreScript than jquery will be loaded automatically otherwise YII does not load any JQuery.
In every view that requires jquery you can put this on top:
<?php Yii::app()->clientScript->registerCoreScript('jquery'); ?>
You can put it into your layout also if you want to include in all pages in a particular layout.
I am a beginer to DOJO , finding difficulty to set up DOJO
This is my Program :
<html>
<head>
<script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
</script>
<title>button</title>
<script type="text/javascript">
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button");
function init()
{
alert('Click on the Hello World Button');
}
dojo.addOnLoad(init);
</script>
</head>
<body bgcolor="#FFFFCC">
</body>
</html>
I have used the dojo.js file from the external site itself that is by
**<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>**
But still i am getting errors .
Please see the screen shot related to errors
http://imageshack.us/f/545/dojoh.jpg/
Also i have downloaded , the DOJO Latest relaese , and kept this in C:\dojo-release-1.6.1
Could anybody kindly please tell me , as what should be the source path to dojo js , i tried the below way , but doesn't know why this js file hasn't been recognized
Thank you for your time .
You are on the right track, there's just a small issue with your HTML. The following snippet is not valid:
<script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
</script>
You can't have a <script> tag within another <script> tag. Remove the outer tags, so you're left with just this:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>
This is what caused the "unexpected end of XML source" error. Also, since the error prevents dojo from being loaded, you get the "dojo is not defined" right afterwards.
Secondly, you cannot require dojo modules with wildcards ('*'). You have to explicitly require the ones you want to use. So the following is not valid:
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
Lastly, you probably want to run your Dojo application through a web server, not just as a local file. It may work for now, but you're bound to run into some weird issues after a while.
Hope this helps.
In the HTML code you have here Dojo won't load, as script tag loading dojo is inside another script tag. Get rid off the outside script tag.
You should only require modules that you need. Here you do not seem to need any of the extra dojo modules.
Here is an example of having dijit.form.Button http://dojotoolkit.org/reference-guide/dijit/form/Button.html It will give you better idea of how you can load modules.
To load dojo.js file from your computer, if your HTML file is in projects dir then you may add your dojo-release-1.6.1 dir inside projects dir and may want to rename it as libs. Then in your HTML file you should load dojo.js file as
<script type="text/javascript" src="libs/dojo/dojo.js"></script>
In addition to the other answers, please note that your sample code reflects Dojo 0.4 APIs from about 5 years ago. The code has been refactored significantly since then. Most widgets live in the dijit package