Grails Resources Plugin and AJAX loaded javascript

Asked 5/1, 2012 at 0:55 Answered 3/5, 2013 at 8:32

Solved javascript ajax grails grails-plugin

I added the resources plug-in in a grails 1.3.7 application and everything works fine except javascript that is loaded asynchronously.

So if I have a template that contains a

<r:script>
    // javascript here
</r:script>

and load it via ajax the js code does not execute, and I get this error:

It looks like you are missing some calls to the r:layoutResources tag

which makes sense because the page has already been rendered and there is no r:layoutResources to handle the newly added r:script js code.

The only workaround I've found is to add render r.layoutResources(disposition:"defer") after the actual render(template:...) in the controller actions that render content asynchronously.

Is there any other more clear solution?

Chromite answered 5/1, 2012 at 0:55 Comment(0)

A better approach would be to have a dedicated layout for your AJAX responses:

<g:layoutBody/>
<r:layoutResources disposition="defer"/>

If you're using Grails 2.0, you can specify the layout in the render method (render template: "...", layout: "ajax"). Otherwise, use layout by convention.

Masquer answered 6/1, 2012 at 11:10 Comment(4)

Very useful information! I had already looked for something like this in the docs, but the render tag has no "layout" attribute there as of 2.0.3. – Foulk 22/5, 2012 at 14:26

I think this is the best approach. – Chromite 12/6, 2013 at 15:1

Nice solution, still throwing the error but in the HTML source is printing the required modules. Now the problem is to eval that script tags because they still doesn't work. Even passing the script tags to eval function. – Lynx 20/8, 2014 at 12:39

I solved it. take a look to this answer if your added javascript doesn't work. – Lynx 20/8, 2014 at 14:11

A better option I think is to not use r:script in your template fragment. Just use normal script tag. You are not getting any benefit from Resources inside these fragments if you don't need the layoutResources stuff.

Sometimes the classic way is the best.

Snicker answered 6/1, 2012 at 11:31 Comment(2)

If I use the classic script tag, in the initial page load the js code won't execute because it depends on libraries (jQuery etc) that are loaded at the bottom of the page (and I don't want to load them in the head). – Chromite 6/1, 2012 at 11:38

jQuery should normally be in head disposition and execute first anyway. All your solutions here are going to be pretty hacky because you are effectively returning dynamic script fragments, which is not what resources is designed for. It seems this approach is causing you some problems, but if you wish to continue with it I would suggest you don't use Resources tags in the main GSP that is first served. – Snicker 6/1, 2012 at 11:50

I always go with Peter Ledbrook response, but instead of using a layout, I use a template and I automate what to render in the main layout. My main.gsp looks like the following:

<!DOCTYPE html>
<g:if test="${request.xhr}">
    <g:render template="/layouts/content" />
</g:if>
<g:else>
    <html>
   ...  <!-- Main layout stuff: application resources, logo, main menu, etc -->
   <div id="content">  <!-- Somewhere in the body -->
          <g:render template="/layouts/content" />
       </div>
    </html>
</g:else>

Then, the _content.gsp template looks like:

<g:layoutBody />
<r:layoutResources disposition="defer"/>
<!-- Ajaxify your relative links with the framework of your choice -->

That way, I can automatically ajaxify all relative links and forms and no action is required in the controller (no different responses), since the ajax response always goes inside the content div.

Pulmonic answered 3/5, 2013 at 8:32 Comment(1)

BTW I usually go with my own ajaxify function to ajaxify all relative links... Just in case someone is interested: github.com/deigote/ajaxify – Pulmonic 3/5, 2013 at 8:42

Recommended topics

Hot tags