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.
13 July 2020. I ran into this problem again today and now offer this solution:
The solution that I found was to use a normal script tag and including the resource in the