Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Grails: Adding JavaScript to bottom of page

DZone's Guide to

Grails: Adding JavaScript to bottom of page

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

In Grails using the templating (Sitemesh) if you were to include per-page JavaScript resources then it shows up much earlier in the layout content as part of the <g:layoutBody>

Here is an example illustrating the problem:

SamplePage.gsp

<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="layoutPage"/>
<head>MyThinkPond.com Custom Page</head>
...
</head>
<body>
Some this page content
<script type="text/javascript" src="${request.contextPath}js/samplePage.js"></script>
</body>
</html>

and the layout page (layoutPage.gsp)

<!DOCTYPE html>
<html>
<head>
<title><g:layoutTitle default="MyThinkPond.com"/></title>
...
</head>
<body>
<div>
Some template (header) content
<g:layoutBody/>
</div>
<!-- Common JS Files -->
<script type="text/javascript" src="${request.contextPath}js/common.js"></script>
<!-- Begin: Custom Page JavaScript Should Go Here -->
<!-- End: Custom Page JavaScript Should Go Here -->
</body>
</html>

results in the following page in browser

<!DOCTYPE html>
<html>
<head>
<titleMyThinkPond.com Custom Page</title>
...
</head>
<body>
 
<div>
Some template (header) content
Some this page content
<script type="text/javascript" src="${request.contextPath}js/samplePage.js"></script>
</div>
 
<!-- Common JS Files -->
<script type="text/javascript" src="${request.contextPath}js/common.js"></script>
<!-- Begin: Custom Page JavaScript Should Go Here -->
<!-- End: Custom Page JavaScript Should Go Here -->
</body>
</html>

You can see that the JavaScript is included as part of the body and not at the bottom.

Here’s how you resolve this issue:

In your custom page, define a content block like this:

SamplePage.gsp

<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="layoutPage"/>
<head>MyThinkPond.com Custom Page</head>
...
</head>
<body>
Some this page content
<content tag="javascript">
<script type="text/javascript" src="${request.contextPath}js/samplePage.js"></script>
</content>
</body>
</html>

In your template layout page add the content block to the bottom as needed like this:
layoutPage.gsp

<!DOCTYPE html>
<html>
<head>
<title><g:layoutTitle default="MyThinkPond.com"/></title>
...
</head>
<body>
<div>
Some template (header) content
<g:layoutBody/>
</div>
<!-- Common JS Files -->
<script type="text/javascript" src="${request.contextPath}js/common.js"></script>
<!-- Begin: Custom Page JavaScript Should Go Here -->
<g:pageProperty name="page.javascript"/>
<!-- End: Custom Page JavaScript Should Go Here -->
</body>
</html>

This will extract the JavaScript portion from samplePage and insert at the bottom of the layoutPage.

Here is the result of this magic in a page in the browser:

<!DOCTYPE html>
<html>
<head>
<titleMyThinkPond.com Custom Page</title>
...
</head>
<body>
 
<div>
Some template (header) content
Some this page content
</div>
 
<!-- Common JS Files -->
<script type="text/javascript" src="${request.contextPath}js/common.js"></script>
<!-- Begin: Custom Page JavaScript Should Go Here -->
<script type="text/javascript" src="${request.contextPath}js/samplePage.js"></script>
<!-- End: Custom Page JavaScript Should Go Here -->
</body>
</html>

You can see that the page specific JavaScript content got added towards the bottom as you intended it to be.

If this article has helped you, please add this article to your favorite social links so that others may also find this article.

Cheers & Happy Coding!



What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}