Grails g:javascript tag/AJAX Calls

This works in development but is broken in live, still seeking a solution.

The bulk of the code that I write uses the Grails framework, though I am increasingly working with Micronaut recently. My main project at work uses Grails 2.4.4, and that is the project in which I found this issue. (I don’t consider it a bug, but it required that I investigate/understand and so I’m sharing my solution.)

A pattern that I commonly use when I want to present a modal dialog is to capture a button press and then use jQuery to make an AJAX call to retieve the content for the dialog. The controller then renders the template with a model and returns it as HTML. This works very well.

As functionality has been added the busier pages now have multiple dialog boxes available, resulting in a set of (empty) divs at the bottom of the page and a set of $("#modalName").dialog(...) calls when the page loads. This doesn’t cause any problems. The content of these modal dialogs often requires that they have different dimensions anyway.

Each page only really needs one modal dialog, it’s the content that is different depending on the user action. On one page, when I needed to add yet another dialog, I decided to refactor to a single reusable instance.

As the dialog was to have different content I could no longer set the dialog title in the page. Instead I changed the controller to return a JSON response that contained not only the HTML but also a title string. The code in the page then sets the modal dimensions, title and content. On initial inspection this seemed to work.

What I actually found was that the javascript file referenced by the modal content was not loading. (A side note here. I keep my javascript separate from my GSPs where possible. It allows code reuse (good), but you can’t refer to variables presented by the model (bad). I link to them using the built in <g:javascript src="..."/> tag.)

In this “single model” way of working I am using GroovyPageRenderer in the controller to render the modal template to HTML for inclusion in the JSON response. The page renders just fine, but the link to the javascript file, created by the g:javascript tag is missing the context path. Consquently, of course, it never loads.

17 September 2020. No, this solution breaks loading of the js file if the page is loaded normally in development, though in production they seem to be fine.

13 July 2020. I ran into this problem again today and now offer this solution:

<g:javascript contextPath="${applicationContext.servletContext.contextPath}" src="customers/_modalEditAddress.js"/>

The solution that I found was to use a normal script tag and including the resource in the src attribute:

<script src="${resource(dir: "/")}/js/customers/_modalEditAddress.js"></script>

As I type this I wonder what other solutions are available. I had a quick look at the attributes that are available in the g:javascript tag and there might be options there. Also I wonder if anything can be passed to GroovyPageRenderer.