I have a grails resource module set up:
modules {
myModule {
resources url:'js/application.js'
resources url:'js/helper.js'
}
}
And I can load this onto my GSP page using <r:require ... />.
Problem:
I want some JS code to fire when this script has loaded. Is there anyway to do this?
Even if I could do it via JS (script.onLoad) that would be ok, I'm just not sure how to generate a link to the module using grails.
You can include your module in your GSP page as:
<r:require modules="myModule" />
and you can fire any java script function in you js files on page load.
in case your module will not get loaded on the GSP, try adding disposition, i.e.
modules {
myModule {
resources url:'js/application.js', disposition: 'head'
resources url:'js/helper.js', disposition: 'head'
}
}
I think better way to include your resources on the view pages, is through layout, I used to do it like, adding all the resources on the layout page, ex. layout->main.gsp
add all the required resources on this page as:
<r:require
modules="myModule" />
<g:layoutHead />
<r:layoutResources />
then on all the GSP pages in the application you can apply this layout, i.e.
<g:applyLayout name="main"/>
and to call any java script code(on the included js files) on script load, I think you should associate it with the onload event on the gsp page.
Related
In resources plugin it was possible to define a tagname which had references to both css and js files. For example:
jScrollPane {
resource url:[file:'jscrollpane.min.js']
resource url:[file:'mousewheel.js']
resource url:[file:'jscrollpane.css']
}
This allowed to import all files using just <r:require module="jScrollPane" />
This library always requires the same js and css files. It is not DRY to define on every page import to js and css manifests separately. Is it possible to define a manifest with both css and js? If not, is there any other way this can be achieved?
thanks, droggo
I discussed this more here: https://github.com/bertramdev/asset-pipeline/issues/132
Basically we have created simple taglib:
def lib = { attrs ->
out << asset.javascript(src:"${attrs.src}.js")
out << asset.stylesheet(src:"${attrs.src}.css")
}
which can include both assets with one tag.
I need to pass variables from Config.groovy to JavaScript on several pages that uses same resource bundle.
I have JS lib that needs config option 'appId'. The problem is that JS and CSS files of this lib are declared as resources bundles in ApplicationResources.groovy and I can't control on which page they are used.
There is tag . Body of this tag will be included to page body as inline JavaScript. Great.
But it requires manually repeat this section with same content on each page. That's why it does not suit me.
E.g. I need something like this in ApplicationResources.groovy:
modules = {
myJSPlugin {
dependsOn 'jquery'
resource url:'/js/core.js', disposition: 'head'
// this is inline JS here
resource type: 'inlineJs', body: {-> "var appId = 22;"}
}
}
```
How can I achieve this?
Thanks
If you provide
<r:script>var appId = 22;</r:script>
either in the body or disposed in head, inside main layout, shouldn't it be available to the child pages whichever uses the layout?
#Resource r:script
in my grails app, I'm using the awesome resource plugin which wires all the dependencies. When I'm doing the ajax calls I always use <r:layoutResources disposition="defer"/> in order to render all scripts <r:script>... and other dependencies property.
The problem is if I use <r:require module="myModule"/> and the module specify a JS file which was not loaded before (when the page was not loaded). After the AJAX call the JS file is not loaded, what is more or less expected because all JS file should be loaded when the page is rendered.
My question is how to solve it properly? Should I put my r:require to the gsp which is rendered during the first request? Or are there any plans to make the r:require deal with "external" JS files when AJAX?
Thanks,
Mateo
Create a layout ajaxInternal.gsp and put in something like:
<r:require module="gaScript" />
<r:layoutResources />
<g:layoutBody />
<r:layoutResources disposition="defer" />
And in your ajax action of controller render this:
render(template:"aTemplateIfRequired", model:[yourModel],layout:'ajaxInternalContentBox')
So all your js will work properly and all your modules also.
I want to include application.js to all pages base on main.gsp template, but in some reasons application.js included only in few pages.
Theres my config:
ApplicationResources.groovy:
modules = {
application {
resource url: 'css/common.css'
resource url: 'js/application.js'
resource url: 'js/bootbox.min.js'
}
}
Main template(main.gsp):
...
<r:require modules="application, bootstrap, bootstrap-responsive-css, bootstrap-js"/>
...
There's two .gsp files which inherited from main template:
<meta name="layout" content="main"/>
But in one page application.js is exist as (/.../static/bundle-bundle_application_defer.js"), but not exist in other.
Difference between files only in custom layout markup, not in , and so on.
But files belong to different controllers, may be that where problem is?
So what should i check to understand where the problem is?
I think that all the javascript files are bundled together in one file, you can check it in Firebug
I'm using the Resources plugin in Grails 2.0.1. The issue I'm having is getting a JavaScript resource specified using r:external to be placed after all of the other script previously declared using either r:require or r:external, all in the deferred disposition. Currently the resource specified using r:external it is being output in the location where the r:external tag is placed.
I have a layout file that contains an r:require tag to fetch some core resources:
<html>
<head>
...
<r:require module="core" />
</head>
....
</html>
Then a GSP that includes another r:require tag followed by an r:external tag:
<head>
...
<r:require module="forms" />
<r:external dir="js" file="page-specific-resource.js" /> %{-- specifying disposition="defer" has no effect --}%
....
</head>
...
My expectation is each of the JavaScript resources I'm trying to include would be output in the deferred disposition with the core resources first, the forms resources next, and the page-specific resource last. The actual results are that the core and forms resources are output as expected in the deferred disposition, but the page-specific resource is output in head, where the r:external tag is placed (Specifying disposition="defer" seems to have no effect).
Is my expectation incorrect or is this a legitimate issue? Is there another way to specify page-specific resources (I'm trying avoid declaring these types of resources in the resource DSL) and have the positioned after all previously declared resources?
As answered by Marc Palmer on the Grails User mailing list (http://grails.1312388.n4.nabble.com/Placement-Of-JS-Resource-Via-lt-r-external-gt-td4506074.html#none):
I'm afraid your expectation is incorrect.
r:external is just for rendering links where you invoke it.
You need to declare your dependencies, or put your r:external at the
end of the page.
Declaring modules for "functional areas" of your app is profitable. It
means you can also bundle them together if need be, or have fine
grained control and the page no longer needs to be aware of that.