Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Put JavaScript at the Bottom with Grails Asset-Pipeline

With the Grails Resource plugin you can use a gsp layout like this:

<!DOCTYPE html>
<html>
<head>
    <g:layoutHead/>
    <r:layoutResources /> 
</head>
<body>
   <g:layoutBody/>


   <g:javascript library="jquery" plugin="jquery" /> 

   <r:layoutResources />

</body>

Using the r:layoutResources tag you can specify that resources should be included at the bottom of the page after the JQuery, which is at the bottom of the layout gsp.

Is there a way to do the same with the asset-pipeline plugin? How can I put resources at the bottom of the document event after the JQuery include?

like image 833
confile Avatar asked Dec 15 '22 17:12

confile


2 Answers

In your layout file, put this:

<html>
<body>
....
<!-- Your layout scripts -->
<asset:javascript src="app.js"/>

<!-- Custom placeholder for page scripts -->
<g:ifPageProperty name="page.footScripts">
    <g:pageProperty name="page.footScripts" />
</g:ifPageProperty>

</body>
</html>

And in your page (i.e. index.gsp ), put this

<html>
<body>
...
...
</body>
</html>

<content tag="footScripts">
    <asset:javascript src="jqueryui/jquery-ui.min"/>
</content>

This way, you can extend your layouts with content defined in your individual pages.

Grails 3 documentation ( though the same in Grails 2 )

See chapter 8.2.6 Sitemesh Content Blocks

like image 132
Cagatay Kalan Avatar answered Dec 25 '22 03:12

Cagatay Kalan


If you want to add multiple scripts on your child scripts, you can do it like

Bottom of your parent.gsp

<g:each in="${pageScript}">
    <asset:javascript src="${it.value}.js"/>
</g:each>

Your child.gsp

<g:set var="pageScript" value="['script1, script2']"/>
like image 27
Christian Esperar Avatar answered Dec 25 '22 02:12

Christian Esperar