Dynamic Javascript Plugin

Generate javascript from controllers in response to AJAX requests, similar to Rails RJS Templates.

Blog entry: http://blog.peelmeagrape.net/2007/10/9/dynamic-javascript-plugin-for-grails

The plugin: grails-dynamic-javascript-0.1.zip

Simple Demo App: dynamic_javascript_demo_0.1.zip

Description

What I have now looks like:

renderJavascript {
  replace 'user_list'
  effect 'highlight', "user_list"
}

appendJavascript

appendJavascript "alert('hi')"

callFunction

callFunction "foo", 1, true, [a,b]

foo(1, true, [a,b]);

effect

effect 'appear', 'element_id', [delay:3]

new Effect.Appear('element_id',{'delay':3});

update and replace

These methods use the grails render method, supplying it with an out option. If you don't supply an template option, the element id will be used by default. The rendered template is javascript encoded and used in a prototype update or replace call.

update 'document_1', [text:'Hello']
replace 'document_list'

Element.update("document_1","Hello");
Element.replace('document_list',  <render _document_list.gsp> );

queue

Queue up some actions at the end of the scriptaculous effects queue.

queue
{
     callFunction "c"
}

new Effect.Event({ afterFinish:function() {
c();
}, queue: "end" });

Demo App

I've made a simple demo application based on a scaffolded 'Book' controller. I've changed the grails-generated controllers and views to use AJAX calls for creating and deleting books using the plugin. dynamic_javascript_demo_0.1.zip

Security Delimiters

The plugin adds security comment delimiters (see this pdf on javascript hijacking linked to from Prototype). Because of this, it needs Prototype 1.6.0rc0 or later. (To use a different version of prototype, go and comment/delete the line DynamicJavascriptGrailsPlugin.groovy:36

javascript = "/*-secure-*n"+javascript+"/"

Things that I may implement if I need them:

• 'GJS' templates - stick the javascript generating code into a separate view file
• Helpers for testing dynamic javascript
• Render an entire view and extract certain elements by id, only updating those ones.
• Access to more of the prototype library - e.g. inserting content, selectors and iterations:

page.select('#items li').each do |value|
    value.hide
  end
# => $$('#items li').each(function(value) { value.hide(); });