MyThinkPond

On Java, Python, Groovy, Grails, Spring, Node.js, Linux, Arduino, ARM, Embedded Devices & Web

  • Recent Posts

    February 2014
    M T W T F S S
    « Nov   Jun »
     12
    3456789
    10111213141516
    17181920212223
    2425262728  
  • Subscribe Options

  • Awards

    JavaCodeGeeks
  • Most Valuable Blogger @ DZone
  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 173 other followers

  • Follow MyThinkPond on WordPress.com
  • Blog Stats

    • 364,698 hits
  • General Options

Grails – Adding JavaScript to bottom of page

Posted by Venkatt Guhesan on February 2, 2014

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!

Advertisements

One Response to “Grails – Adding JavaScript to bottom of page”

  1. Hey There. I found your blog using msn. This is a very well written article.
    I’ll be sure to bookmark it and return to read more of your useful info.
    Thanks for the post. I will definitely comeback.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: