I've been battling various resource inclusion issues in my migration from Grails 1.3.7 from Grails 2.0, probably not understanding a few things to begin with.
Firstly, what does
<g:javascript library="application" />
do? (this was in the default main.gsp provided in Grails 1.3.7).
Secondly, for including jquery across my application, can I just do
<r:require module='jquery' />
<r:layoutResources />
in the top of my main sitemesh page that does the
<g:layoutHead />
...
<g:layoutBody />
and "be done with it", using the
<r:layoutResources />
a second time after the
<g:layoutBody />
Thanks
Yes I struggled a little with this at first too.
So firstly the <g:javascript library="application" /> refers to a module defined in a config/*.Resources.groovy file (default is config/ApplicationResources.groovy), inside that you have named modules, eg:
modules = {
application {
resource url: 'js/jquery/jquery-ui-1.8.15.custom.min.js', disposition: 'head'
}
}
Secondly by example a Grails2 main.gsp (cutdown a lot here):
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><g:layoutTitle default="Grails"/></title>
<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">
<link rel="stylesheet" href="${resource(dir: 'css/redmond', file: 'jquery-ui-1.8.15.custom.css')}" type="text/css">
<g:layoutHead/>
<g:javascript library="jquery"/>
<r:require module="application"/>
<r:layoutResources/>
</head>
<body>
<g:layoutBody/>
<r:layoutResources/>
</body>
</html>
Hope that sets you in the right direction
Related
I followed these instructions for my app:
https://github.com/yeoman/generator-angular#readme
My Index (before build)
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/app.css -->
<link href="app.less" type="text/css" rel="stylesheet/less">
<!-- endbuild -->
My dist Index (in text-editor)
<html ng-app="myApp"> <head> <meta charset="utf-8"> <title>Datavalidering</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link rel="stylesheet" href="styles/vendor.2ac5f564.css"> <link rel="stylesheet" href="styles/app.d41d8cd9.css"> </head> <body>
Dist index (browser)
<head>
<style type="text/css">#charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="styles/vendor.2ac5f564.css"> <link rel="stylesheet" href="styles/app.d41d8cd9.css">
<style type="text/css">body { display: none !important }</style></head>
<body>
The problem may be in gruntfile.js
http://plnkr.co/edit/r2hdhWY7olIw0pBHJ4VF?p=preview
Thank you in advance for your answers!
This happens because of (less.js):
// Simulate synchronous stylesheet loading by blocking page rendering
if (!options.async)
{
css = 'body { display: none !important }';
head = document.head || document.getElementsByTagName('head')[0];
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
}
so, all you need to do is add this before less.js
<script>
less = {
async: true
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>
I'm not using Angular, but had a similar problem where this <style type="text/css">body { display: none !important }</style> suddenly appears at the end of head tag, effectively renders the whole page to not displaying anything.
I found out that the culprit was less.js. Simply commenting the line fixes it.
I have found a solution and the culprit.
It comes from the "Jetpack".
This image shows the location of the code in WordPress Directory:
I have some GSP variables set in the "main" layout file of my Grails application (included below). The values of these variables don't appear to be accessible in the GSP pages that are rendered by the sitemesh. Also, they are not visible in any templates that are rendered by the tag. I have tried setting the scope="request" (see code) below, but that doesn't appear to make any difference. I'm clearly not understanding the scoping rules for GSP variables.
Can anyone clarify how GSP variables are scoped and make a recommendation on how I can communicate them from the layout all the way down to templates (if I can at all).
<!DOCTYPE html>
<%-- <html lang="${org.springframework.web.servlet.support.RequestContextUtils.getLocale(request).toString().replace('_', '-')}"> --%>
<html lang="${session.'org.springframework.web.servlet.i18n.SessionLocaleResolver.LOCALE'}">
<head>
<title><g:layoutTitle default="${meta(name:'app.name')}" /></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<asset:javascript src="bootstrap.js" />
<theme:load />
<asset:javascript src="application.js" />
<asset:stylesheet src="application.css" />
<asset:link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<g:layoutHead />
<%-- Defineform body layout column dimensions. These values are used by Bootstrap based forms to
layout using configured column widths and offsets. --%>
<g:set var="labelWidth" value="${grailsApplication.config.ark.layout.labelWidth ?: 'col-sm-3'}" scope="request" />
<g:set var="controlWidth" value="${grailsApplication.config.ark.layout.controlWidth ?: 'col-sm-4'}" scope="request" />
<g:set var="controlOffset" value="${grailsApplication.config.ark.layout.controlWidth ?: 'col-sm-offset-3'}" scope="request" />
<%-- For Javascript see end of body --%>
</head>
<body>
<g:render plugin="arkUi" template="/layouts/menu/navbar"/>
<g:render plugin="arkUi" template="/layouts/content"/>
<g:render plugin="arkUi" template="/layouts/footer"/>
<!-- Include deferred Javascript files and other resources -->
<asset:deferredScripts/>
</body>
</html>
The issue here is that Grails first parses the target GSP page to (among other things) determine which layout to use, then parses the layout GSP and combines them. So the layout can see variables you set in the page but not vice-versa.
in my data_feed controller and bar action, there's only one line in bar.html.erb:
[1,2,3,4]
My expected output by requesting http://localhost:3000/data_feed/bar is just one line I wrote above.
However, rails help me add some html heads into that page, as below:
<!DOCTYPE html>
<html>
<head>
<title>Guustock</title>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/charts.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/data_feed.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/show.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/charts.js?body=1" type="text/javascript"></script>
<script src="/assets/data_feed.js?body=1" type="text/javascript"></script>
<script src="/assets/show.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="lhHWCW82xtqQ8fmgBZemDggL2DGJe+4chXM8MY1LKvs=" name="csrf-token" />
</head>
<body>
[1,2,3,4]
How can I avoid rails doing this?
Thanks!
Env:
linux mint 11.0
ruby 1.9.3 with rvm
rails 3.2.1
EDIT:
Actually I want to provide the json format data in this page as an ajax data source. So these heads will not helpful but break the data.
You're probably rendering within the layout (a view template, which lives in app/views/layouts/), which is the default. If you want to render an action without the layout, use something like
render :bar, :layout => false
in the appropriate action.
See also: http://guides.rubyonrails.org/layouts_and_rendering.html
EDIT:
Please see the documentation linked above. For JSON rendering, you might use this directly from the controller:
render :json => #product
or in your case
render :json => [1,2,3,4]
You could also use JSON view templates (for which you'll need to render again). Using a bar.html.erb template for json is not only tricky as you noticed, it will also produce the wrong content type headers.
In my JSF2 project I want to include following two style sheet to my Facelet page based on a condition which is to be obtained from a managed bean.
<link rel="stylesheet" href="css/menu_style_1.css" type="text/css" />
<link rel="stylesheet" href="css/menu_style_2.css" type="text/css" />
How can I achieve this?
try
<h:outputStylesheet name="css/menu_style_1.css" target="head" rendered="#{myBean.myValue eq 'myCondition1'}"/>
and
<h:outputStylesheet name="css/menu_style_2.css" target="head" rendered="#{myBean.myValue eq 'myCondition2'}"/>
OR... you can do it in one line...
<h:outputStylesheet name="css/#{myBean.myValue == 'true' ? 'menu_style_1.css' : 'menu_style_2.css'}" target="head" />
I guess if you want to stick to the link tag you can try something like that
<link rel="stylesheet" href="css/#{myBean.myValue == 'true' ? 'menu_style_1.css' : 'menu_style_2.css'}" type="text/css" />
I am not able to use grails security UI(0.1.2) with Grails 2.0.
I have googled the possible causes for following error and also have tried suggested fixes but they don't seem to be working.
I have already tried, overriding the UIs, I also have tried Grails 2.0-m2 version.
| Error 2012-01-02 17:17:12,659 ["http-bio-8080"-exec-5] ERROR [/webdemo].[default] - Servlet.service() for servlet [default] in context with path [/webdemo] threw exception
Message: It looks like you are missing some calls to the r:layoutResources tag. After rendering your page the following have not been rendered: [head]
Line | Method
->> 886 | runTask in java.util.concurrent.ThreadPoolExecutor$Worker
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
| 908 | run in ''
^ 619 | run . . in java.lang.Thread
Following is my main.gsp (some code/comments are removed for brevity)
<head>
<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">
<g:layoutHead/>
<r:layoutResources />
</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>
<g:javascript library="application"/>
<r:layoutResources />
</body>
Add <r:layoutResources /> tag inside <head> and right before </body>.
This is needed by the Grails Resources Plugin and further documentation for the tag can be found here http://grails-plugins.github.com/grails-resources/ref/Tags/layoutResources.html
Try to remove any g:javascript calls (i.e. the <g:javascript library="application"/>) and load it via the resources infrastructure instead.
I am having the exact same problem here (with Grails 2.0.1) and this seems to resolve it.
If that solution does work for you too, you might want to consider filing a bug report - as this is at least a very confusing error message.
I was having getting the same message It looks like you are missing some calls to the r:layoutResources tag. with following code
<g:javascript library='application' />
<g:layoutHead/>
<r:layoutResources />
Fixed when moved <g:javascript/> call between layoutHead and layoutResources
<g:layoutHead/>
<g:javascript library='application' />
<r:layoutResources />