Setting up a simple grails app with Dojo, i used the
grails install-plugin dojo
to setup the dojo js files. In my main.gsp i have this
<html>
<head>
<title><g:layoutTitle default="Grails" /></title>
<link rel="stylesheet" href="${resource(dir:'css',file:'main.css')}" />
<link rel="shortcut icon" href="${resource(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
<g:layoutHead />
<g:javascript library="application"/>
<g:javascript library="dojo"/>
<dojo:header modules="['dojo.data.ItemFileReadStore','dijit.form.ComboBox']"/>
<g:javascript>
//dojo.addOnLoad(function(){alert("dojo loaded.");});
</g:javascript>
</head>
On my index.gsp page, i setup the following elements
<div>
<div jsId="search" dojoType="dojo.data.ItemFileReadStore"
url="<g:createLink controller="runner" action="findrunner"/>"></div>
<input dojoType="dojo.data.FilteringSelect"
id="chooser"
name="feed"
store="search"
searchAttr="url"
autocomplete="true"
pageSize="5"/>
</div>
Start the app but keep getting this error from firebug
GET http://localhost:8080/xxx/js/dojo/1.4.3/dojo/data/ItemFileReadStore.js
404 Not Found
5ms
dojo.js (line 16)
ParamsHeadersPostPutResponseCacheHTML
..</head><body><h1>HTTP Status 404 - /xxx/js/dojo/1.4.3/dojo/data/ItemFileReadStore.js</h1>
<HR size="1" noshade="noshade"><p><b>type</b> Status report</p><p><b>message</b>
<u>/xxx/js/dojo/1.4.3/dojo/data/ItemFileReadStore.js</u></p><p><b>description</b>
<u>The requested resource (/xxx/js/dojo/1.4.3/dojo/data/ItemFileReadStore.js) is not available.</u>
</p><HR size="1" noshade="noshade"><h3>Apache Tomcat/6.0-snapshot</h3></body></html>
Any ideas?
Seems the 'dojo plugin' didn't seems to install all the required dojo files. I manually installed dojo 1.5 and extract the zip to /webapps/js/dojo/1.5.0 and enabled the version in my main.gsp like this
<script src="js/dojo/1.5.0/dojo/dojo.js"></script>
The new plugin version makes things a lot easier now. There is even a script to launch your custom builds in a breeze... and it's updated to dojo 1.6. Give it a try ;-)
Related
To working my static file (CSS, JS) I have to write absolute path like /AppName/templates/style/main.css. Is there any solution, that I could write relative path like style/main.css?
If your actual concern is the dynamicness of the webapp context (the "AppName" part), then just retrieve it dynamically by HttpServletRequest#getContextPath().
<head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/templates/style/main.css" />
<script src="${pageContext.request.contextPath}/templates/js/main.js"></script>
<script>var base = "${pageContext.request.contextPath}";</script>
</head>
<body>
link
</body>
If you want to set a base path for all relative links so that you don't need to repeat ${pageContext.request.contextPath} in every relative link, use the <base> tag. Here's an example with help of JSTL functions.
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%# taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
...
<head>
<c:set var="url">${pageContext.request.requestURL}</c:set>
<base href="${fn:substring(url, 0, fn:length(url) - fn:length(pageContext.request.requestURI))}${pageContext.request.contextPath}/" />
<link rel="stylesheet" href="templates/style/main.css" />
<script src="templates/js/main.js"></script>
<script>var base = document.getElementsByTagName("base")[0].href;</script>
</head>
<body>
link
</body>
This way every relative link (i.e. not starting with / or a scheme) will become relative to the <base>.
This is by the way not specifically related to Tomcat in any way. It's just related to HTTP/HTML basics. You would have the same problem in every other webserver.
See also:
Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
Is it recommended to use the <base> html tag?
Just use <c:url>-tag with an application context relative path.
When the value parameter starts with an /, then the tag will treat it as an application relative url, and will add the application-name to the url.
Example:
jsp:
<c:url value="/templates/style/main.css" var="mainCssUrl" />`
<link rel="stylesheet" href="${mainCssUrl}" />
...
<c:url value="/home" var="homeUrl" />`
home link
will become this html, with an domain relative url:
<link rel="stylesheet" href="/AppName/templates/style/main.css" />
...
home link
You start tomcat from some directory - which is the $cwd for tomcat. You can specify any path relative to this $cwd.
suppose you have
home
- tomcat
|_bin
- cssStore
|_file.css
And suppose you start tomcat from ~/tomcat, using the command "bin/startup.sh".
~/tomcat becomes the home directory ($cwd) for tomcat
You can access "../cssStore/file.css" from class files in your servlet now
Hope that helps, - M.S.
Instead using entire link we can make as below (solution concerns jsp files)
With JSTL we can make it like:
To link resource like css, js:
<link rel="stylesheet" href="${pageContext.request.contextPath}/style/sample.css" />
<script src="${pageContext.request.contextPath}/js/sample.js"></script>
To simply make a link:
<a id=".." class=".." href="${pageContext.request.contextPath}/jsp/sample.jsp">....</a>
It's worth to get familiar with tags
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
There is also jsp method to do it like below, but better way like above:
<link rel="stylesheet" href="<%=request.getContextPath()%>/style/sample.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/js/sample.js"></script>
To simply make a link:
<a id=".." class=".." href="<%=request.getContextPath()%>/jsp/sample.jsp">....</a>
This could be done simpler:
<base href="${pageContext.request.contextPath}/"/>
All URL will be formed without unnecessary domain:port but with application context.
This is a derivative of #Ralph suggestion that I've been using. Add the c:url to the top of your JSP.
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:url value="/" var="root" />
Then just reference the root variable in your page:
<link rel="stylesheet" href="${root}templates/style/main.css">
I am using grails for almost a year. Since now when I wanna link a css or js file in a gsp. I did the following:
I created a new file (eg the resources file) under web-app folder and I put there all my files of folders (eg when importing bootstrap I had a parent folder bootstrap under resources and under bootstrap there were css, img and js folders with their files).
Then, to import a css file I did the following (here is documentation for this):
<link rel="stylesheet" href="${resource(dir:
'resources/bootstrap/css', file: 'bootstrap.min.css')}"
type="text/css">
<script src="${resource(dir: 'resources/bootstrap/js', file:
'bootstrap.min.js')}"></script>
This worked great, but when I tried to create a new Project in grails 2.2.4 I had a Resource not found Error (404 to browser and the following to console).
ERROR resource.ResourceMeta - Resource not found: /resources/bootstrap/css/bootstrap.min.css
ERROR resource.ResourceMeta - Resource not found: /resources/bootstrap/js/bootstrap.min.js
ERROR resource.ResourceMeta - Resource not found: /resources/bootstrap/css/bootstrap.min.css
ERROR resource.ResourceMeta - Resource not found: /resources/bootstrap/js/bootstrap.min.js
As I realized these Errors in console were once from the resources function and once from the GET that client(browser) requested.
When looking at resources plugin I see that they suggest using the js and css folders. Is that meaningful to split a tool (eg twitter bootstrap) in these two directories?
ok I believe I have a (semi) working solution:
Suppose we need to include both Twitter Bootstrap 3 and TinyMce
Under webapp directory I create the following directories:
resources/bootstrap/
resources/bootstrap/css/
resources/bootstrap/css/bootstrap.min.css
resources/bootstrap/fonts/
resources/bootstrap/fonts/glyphicons-halflings-regular.eot
resources/bootstrap/fonts/glyphicons-halflings-regular.svg
resources/bootstrap/fonts/glyphicons-halflings-regular.ttf
resources/bootstrap/fonts/glyphicons-halflings-regular.woff
resources/bootstrap/js/
resources/bootstrap/js/bootstrap.min.js
resources/jquery/
resources/jquery/jquery-2.0.3.min.js
resources/tiny_mce/
resources/tiny_mce/langs/ /*many files here*/
resources/tiny_mce/plugins/ /*many files here*/
resources/tiny_mce/themes/ /*many files here*/
resources/tiny_mce/utils/ /*many files here*/
resources/tiny_mce/tiny_mce_popup.js
resources/tiny_mce/tiny_mce_src.js
resources/tiny_mce/tiny_mce.js
Then I declare my resources in ApplicationResources.groovy
modules = {
application {
resource url:'js/application.js'
}
jquery {
resource url:'resources/jquery/jquery-2.0.3.min.js'
}
bootstrap {
dependsOn 'jquery'
resource url:'resources/bootstrap/css/bootstrap.min.css'
resource url:'resources/bootstrap/js/bootstrap.min.js'
}
tinymce {
resource url:'resources/tiny_mce/tiny_mce.js'
}
}
And in Config.groovy
grails.resources.adhoc.patterns = ['/images/*', '/css/*', '/js/*', '/plugins/*'] /*no changes here*/
grails.resources.adhoc.excludes = ['/**/langs/**/*.*', '/**/themes/**/*.*'] /*to permit some Ajax calls from tiny_mce.js to relevant resources*/
grails.resources.debug=true
/*
this is why I call my solution SEMI working.
If set grails.resources.debug to false, TinyMce is NOT working because the above excludes are not active, and I receive 404 errors
*/
Then, in main.gsp
<!DOCTYPE html>
<head>
<g:javascript library="application"/>
<g:javascript library="bootstrap"/>
<g:javascript library="tinymce"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><g:layoutTitle default="Grails"/></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon">
<link rel="apple-touch-icon" href="${resource(dir: 'images', file: 'apple-touch-icon.png')}">
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">
<r:layoutResources />
<g:layoutHead/>
</head>
<body>
<div id="grailsLogo" role="banner"><img src="${resource(dir: 'images', file: 'grails_logo.png')}" alt="Grails"/></div>
<g:layoutBody/>
<div class="footer" role="contentinfo"></div>
<div id="spinner" class="spinner" style="display:none;"><g:message code="spinner.alt" default="Loading…"/></div>
<r:layoutResources />
</body>
</html>
And in index.gsp
<head>
...
<script type="text/javascript">
$(function() {
tinymce.init({selector:'textarea'});
});
</script>
</head>
<body>
...
<h1>Welcome to Grails</h1>
check bootstrap - start
<span class="glyphicon glyphicon-search"></span>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
check bootstrap - stop
<textarea>Your content here.</textarea>
...
</body>
Using the above, I have fully operational JQuery, Bootstrap3 and TinyMCE
But if a I set in Config.groovy
grails.resources.debug=true
I am receiving 404-errors related to the grails.resources.adhoc.excludes resources that TinyMce dynamically fetches after page load.
Any clues? I am really close to find the solution so I will glad to get your input
This test project can be downloaded from here: https://docs.google.com/file/d/0B8epX7R4j7jeaVh5OTFiQlV4V0U/edit?usp=sharing
Another answer to the question is the following:
Clean your project
Change 'BuildConfig.groovy' and use a newer version of resources plugin
Do a refresh dependencies to your project
and everything is working great now
I had the same issue, I don't know exactly what setup you have but I have this at the top of my mail.gsp-page:
<link rel="stylesheet" href="${resource(dir: 'css', file: 'bootstrap.css')}" type="text/css">
(Inside the -tag)
If you need to import .js-files this is what works for me:
<script src="${resource(dir: 'js', file: 'bootstrap.js')}"></script>
This is at the very bottom om the page inside the -tag.
I'm using Grails 2.1.1.
The /css and /js directories are part of the default "adhoc resources" patterns that the resources plugin adds to Config.groovy. If you want a different structure for your static resources, you'll either have to create a resource definition file (eg. BootstrapResources.groovy) or add your directory structure to the adhoc patterns:
// What URL patterns should be processed by the resources plugin
grails.resources.adhoc.patterns = ['/images/*', '/css/*', '/js/*', '/plugins/*', '/resources/*']
This would make everything in the /web-app/resources an adhoc resource and subject to the resource plugin's processing.
I am beginning to think that the most flexible way is to serve static content by using a proxy in front of Tomcat / Grails such as Nginx (for all the 'resources/*' URIs)and letting Grails to handle all the dynamic stuff (for the rest URIs).
After all it should be more efficient to use Nginx for serving static files than letting Tomcat / Grails do this.
But, as an afterthought, it should be pity for Resources Plugin to force you splitting the resources in three directories - and driving Grails cumbersome for simple scenarios like using Ext.js, WYSIWIG editors etc which have myriads of files to be included...
I have and accordion working on a normal html page, but when I try and add it to a Spring MVC page then I get the error: $(...).accordion is not a function.
Here is the header of my WEB-INF\views\index.jspfile:
<!DOCTYPE html>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Jeeni Software Ltd</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="<c:url value="css/style.css"/>" type="text/css">
<link rel="stylesheet" href="<c:url value="css/menu/menu_style.css"/>" type="text/css"/>
<script type="text/javascript" src="<c:url value="js/jquery-1.8.3.js"/>"></script>
<script type="text/javascript" src="<c:url value="js/jquery-ui-1.9.2.js">"></script>
<script type="text/javascript" src="<c:url value="js/jquery.flip.js"/>"></script>
...
<!-- This is the 'accordion' div -->
<div id="accordion" style="height:800px;">
<h3>Title...</h3>
...
Here is the ready function:
$(document).ready(function() {
var object = $("#accordion");
alert("object: " + object.accordion);
$("#accordion").accordion({ collapsible: true, active: 'false', autoHeight: false });
$("#banner").fadeIn(1000);
alert("Done");
});
with this alert("object: " + object.accordion); show object: undefined and it bombs out on the next line.
Here is my servlet-context.xml file
<mvc:resources mapping="/cv/**" location="/cv/" />
<mvc:resources mapping="/wow/**" location="/wow/" />
<mvc:resources mapping="/css/**" location="/css/" />
<mvc:resources mapping="/imgs/**" location="/imgs/" />
<mvc:resources mapping="/js/**" location="/js/" />
<mvc:resources mapping="/inc/**" location="/inc/" />
<mvc:resources mapping="/article-imgs/**" location="/article-imgs/" />
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
<property name="prefix" value="/WEB-INF/views/"/>
<property name="suffix" value=".jsp"/>
</bean>
Firebug shows no problem loading any of the jquery files. I can re-create the proper behavior outside of Spring mvc, so the problem must be something to do with Spring/Java?!? But I can not find out what. The only error Firebug reports is the $(...).accordion is not a function, but everything is setup just like on the jquery ui accordion example.
BTW, I've trawled the internet for the last 3 hours and found similar problems that were fixed by typos. This isn't a typo error. I can not find anything like this regarding jquery UI and Spring MVC.
Solved!
The problem was that I was importing some content via:
<jsp:include page="../includes/index_page_intro_txt.jsp" />
and this JSP file was re-importing jquery. Took this out and everything was fine.
Special thanks to #NimChimpsky for being a sounding board and keeping me going.
There's no way anyone could have solved this with the information above. So just let you all know how I solved it:
I started by removing everything from the file other than the library imports, the ready statement and the accordion div block. Then it worked. So I slowly added everything back until it stopped working and then investigated that cause.
Should have done that in the first place - duh!
<script type="text/javascript" src="<c:url value="js/jquery-ui-1.9.2.js">"></script>
is not correct in some way.
Can you get any jquery functions to work ?
Is it just the jquery-ui functions that are not working?
Did you customize the jquery-ui download and not include accordion ?
Do you get 404 in the browser debugger ?
Are you opening a popup which overwrites the jQuery object with something else ?
Also probably better to use a cdn hosted version of the jQuery lib files. The below gets the latest version and works with accordion.
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js' type='text/javascript'></script>
I'm programming a page that uses the grails-ui plugin "autocomplete" feature. It doesn't work and the error console shows the error "YAHOO is not defined"; searching the web I tried the following:
Install the yui2 ad 3 plugins
Uninstall the grails-ui plugin
reinstall the grails-ui plugin
With no luck.
Any ideas ? I'm using grails 1.2
Here's my gsp:
<%# page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<gui:resources components="autocomplete" />
<title>Sample title</title>
</head>
<body>
<h1>Sample line</h1>
<g:form action="autoespec" id="id1">
<gui:autoComplete
id="spec"
name="spec"
resultName="result"
labelField="name"
idField="id"
controller="inscripcion"
action="autoespec"
/>
<input type="text" name="query">
<input type="submit">
</g:form>
</body>
</html>
Added an input to check that the controller worked (it does).
You have to add a special class to your body.
<body class="yui-skin-sam">
...
It appears that you've got the tag namespaces wrong. Assuming you're using the latest richui plugin from http://www.grails.org/RichUI+Plugin and installed it using grails install-plugin richui you need the following tags:
<resource:autoComplete skin="default"/>
in the page head and for the autocomplete box itself:
<richui:autoComplete ... />
I also notice that the attributes you're using for the riuchui:autocomplete element are not in the documentation so you might want to give it another read: http://www.grails.org/RichUI+Plugin#AutoComplete
HTH
I am building a web application using Grails. I decided to use dojo and I added a dojo fisheye menu for begining in the main.gsp so it would be available on all the application's pages.
It works fine for the (home) index.gsp page, but once I select another one, the fisheye menu disapears. If I go back to home it is there. I revised my settings and everything looks ok to me. I am not using anything fancy, just simple things. I am missing something but not able to figure it out.
here is the code in my main.gsp simplified for clarity:
<html>
<head>
...
<g:layoutHead />
<!-- use dojo library ... this has not effect at all -->
<g:javascript library="dojotk"/>
<!-- Load Dojo -->
<script type="text/javascript" src="js/dojotk/dojo/dojo.js"
djConfig="parseOnLoad:true, isDebug:false"></script>
<!-- need fisheye -->
<g:javascript type="text/javascript">
dojo.require("dojox.widget.FisheyeList");
</g:javascript>
<!-- required css for dojo fisheye -->
<style type="text/css">#import "js/dojotk/dojox/widget/FisheyeList/FisheyeList.css";</style>
</head>
<body >
...
<!-- fisheye bar -->
<div id="fisheyebar"><g:render template="/common/fisheyebar"/></div>
<g:layoutBody />
</body>
And here is the _fisheyebar.gsp
<g:javascript>
function load_app(target){
window.location.href=target
}
</g:javascript>
<center >
<div class="outerbar">
<div dojoType="dojox.widget.FisheyeList"
itemWidth="50" itemHeight="50"
itemMaxWidth="200" itemMaxHeight="200"
orientation="horizontal"
effectUnits="2"
itemPadding="10"
attachEdge="top"
labelEdge="bottom"
>
<div dojoType="dojox.widget.FisheyeListItem"
onClick= "load_app('${createLinkTo(dir:'/something')}');"
iconsrc="images/icon_something.png" caption="Web Browser">
</div>
.....
</div>
</div> <!-- outbar -->
</center>
All the pages including the index.gsp have the following:
<head>
<title>some titel</title>
<meta name="layout" content="main" />
</head>
Please not that the usage of template (_fisheyebar) is not the cause, I put the code directly in the main and had the same effect. So what am I missing?
it is in the relative url to dojo's location. it is relative to the root so that's why the index works and not the other pages.
using absolute URLs fixes the problem.
Did you try to move your dojo declaration and imports to your layout template page instead of putting it in your main.gsp ?