g:javascript documentation has dead link referring to resource plugin tag r:script
The g:javascript documentation found here contains this text:
If you use this tag to render inline JavaScript code, it is recommended that you use the Resources plugin’s <r:script> tag to produce inline script that is included at the end of the body, or in the head if necessary - rather than inline. For more control use the Resources plugin’s <r:script> tag directly.
The link provided generates a 404 which suggests trying this alternative URL, which leads to some documentation about Resources Plugin version 1.2.14, which I believe to be old and possibly outdated given its "old Grails" styling.
I'm wondering if this is some indication that the g:javascript documentation needs some more profound updates, since the Sitemesh chapter elsewhere in the GSP documentation explains a completely different approach, using g:pageProperty in the layout and <content> in the page to be decorated as a way to get Javascript in a given page to appear after all the Javascript asset pipeline "includes".
The Resources plugin is quite old, last update was january 2015, and it is written for Grails 2.3.11.
The documentation should recommend using the Asset Pipeline plugin instead
FYI: The link has been removed from the documentation
I agree this should guide users towards the asset pipeline tags instead.
Updated links:
https://docs.grails.org/snapshot/ref/Tags%20-%20GSP/javascript.html https://github.com/apache/grails-core/blob/HEAD/grails-doc/src/en/ref/Tags%20-%20GSP/javascript.adoc
https://docs.grails.org/snapshot/guide/theWebLayer.html#layouts https://github.com/apache/grails-core/blob/HEAD/grails-doc/src/en/guide/theWebLayer/gsp/layouts.adoc
I don't see a good example on the sitemesh layouts section for adding JS at the end of the body, we should add something like the following and can link to in from https://docs.grails.org/snapshot/ref/Tags%20-%20GSP/javascript.html replacing the <r:script> paragraph.
views/layouts/main.gsp
<!DOCTYPE html>
<html lang="en">
<head>
<title><g:layoutTitle default="${message(code: 'application.name')}" /></title>
<asset:stylesheet src="custom.css" type="text/css"/>
<g:layoutHead/>
</head>
<body>
<g:layoutBody/>
<asset:javascript src="custom.js"/>
<g:pageProperty name="page.endOfBody" />
</body>
</html>
views/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="layout" content="main">
<title>Homepage</title>
</head>
<body>
<div>
<p>homepage body content</p>
</div>
<content tag="endOfBody">
<script>
alert('hello')
</script>
</content>
</body>
</html>
Not sure this is the place to offer this, but here is a slightly different way of exploiting the Asset Pipeline that I regularly use.
For example, when I want to include some separate JavaScript libraries and code at the end of my views, for example including some chart drawing stuff in GSPs where it makes sense, I do something like this
layouts/main.gsp
<!doctype html>
<html lang="es" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title><g:layoutTitle default="MyApp"/></title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<asset:link rel="icon" href="favicon.ico" type="image/x-ico"/>
<asset:stylesheet src="application.css"/>
<g:layoutHead/>
</head>
<body>
<!-- the usual common navigation boilerplate -->
<g:layoutBody/>
<div id="spinner" class="spinner" style="display:none;">
<g:message code="spinner.alt" default="Loading…"/>
</div>
<asset:javascript src="application.js"/>
<g:ifPageProperty name="page.additionalJS">
<g:pageProperty name="page.additionalJS"/>
</g:ifPageProperty>
</body>
</html>
home/index.gsp
<!doctype html>
<html>
<head>
<meta name="layout" content="main"/>
<title>My Application</title>
</head>
<body>
<div id="content" class="container-fluid" role="main">
<!-- the working part of index.gsp and its navigation buttons -->
</div>
<content tag="additionalJS">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script>
/* my JavaScript code specific to the chart that makes sense for the home page index.gsp */
</script>
</content>
</body>
</html>
This lets me reuse the same main.gsp for different pages with different scripting requirements.
I have a simple PR https://github.com/apache/grails-core/pull/15106 removing the Resources plugin and recommending the Asset Pipeline in the documentation.
I won't close this issue - we should probably improve the documentation further...