/bin/recykl

Modalbox in Grails

There is a nice and handy javascript library for creating kind of a modal “window”, similar to the famous lightbox. Here are few lines of code to make it running in a Grails application

Installation

First of all, you have to download the library. The easiest way is to install a plugin modalbox

grails install-plugin modalbox

There was a slight problem in version 0.2. So, check your plugins/modalbox-0.2/grails-app/taglib/ModalboxTagLib.groovy. The version was not correct and the script tags were not correctly ended. Here is my tag library.

class ModalboxTagLib {
 
    static namespace = "modalbox"
 
    def createLink = { attrs,body ->
        // By default trigger onclick, but allow onmouseover etc
        def event = attrs.event ? attrs.event : 'onclick';
 
        // linkname only supported for backwards-compatibility. Default it to empty-string
        def linkname = attrs.linkname ? attrs.linkname : ""
 
        out << """
            <a href='${g.createLink(attrs)}' title='${attrs['title']}' ${event}='Modalbox.show(this.href, {title: this.title, width: ${attrs['width']}}); return false;'>${linkname}${body.call()}</a>
        """
    }
 
    def modalIncludes = {
        def jsFolder    = createLinkTo(dir:'plugins',file:'modalbox-0.2/js/modalbox')
        def cssFolder   = createLinkTo(dir:'plugins',file:'modalbox-0.2/css')
 
        out << """
            <script type='text/javascript' src='${jsFolder}/prototype.js' ></script>
    		<script type='text/javascript' src='${jsFolder}/scriptaculous.js?load=effects'></script>
    		<script type='text/javascript' src='${jsFolder}/modalbox.js' ></script>
    		<link rel='stylesheet' href='${cssFolder}/modalbox.css' />
        """
    }
}

“Parent” view

In the view that will call the Modalbox, use tag modalInclude like this one.

<modalbox:createLink controller="book" action="showDetails" params="[bookId:book.id]" title="Book details" width="500">book</modalbox:createLink>

Once clicked, it calls book/showDetails

“Modalbox” view

The view of book/showDetails is quite simple. You can create any static page and it will be displayed. If you want something more “spicy”, use AJAX.

Book details
 
<g:formRemote name="myForm" url="[controller:'book',action:'findSimilar']" update="[success:'similar']" onComplete="Modalbox.resizeToContent()">
	<input type="hidden" name="bookId" value="${book.id}" />
	<input id='search' name='search' />
	<input type="submit" value="Find similar" />
</g:formRemote >
 
<div id="similar">
</div>
 
<a href="#" title="Close window" onclick="Modalbox.hide(); return false;">Close</a>

Notice the resizeToContent() method. It assures, that the content that will come via AJAX will fit. Last, but not least; for comfortable close, there is the last line.

Enjoy it.

Published on August 12th, 2008

Posted by Roman Mackovcak

8 Responses to “Modalbox in Grails”

1. Alexander Koehn Says:
   August 18th, 2008 at 19:36

   Hey guys,
   yesterday I updated my modalbox-plugin to version 0.3.
   In this version I fixed the version (includes) and the cript-tags are now ending correctly.

   Cheers,
   Alexander Köhn

2. Roman Mackovcak Says:
   August 18th, 2008 at 20:41

   Thanks for that. Will install it soon.

3. Aaron Eischeid Says:
   August 18th, 2008 at 21:20

   Thanks for the modalbox update.

   using this tutorial and the one on grials.org I have not been able to get modalbox to work with a at least part of my issue is that I can’t figure out how to pass extra info beyond an id. for example if I wanted to pass a model like I would with the g:render tag could I just do model=”[‘author’:author, ‘publisher’:publisher ]” inside of the modalbox tag?

4. Roman Mackovcak Says:
   August 18th, 2008 at 23:16

   I did not try it, but I would use the same parameters as createLink. See http://grails.org/doc/1.0.x/

5. Alexander Koehn Says:
   August 19th, 2008 at 6:47

   He Aaron,
   you only have to use the same parameters like in createLink (http://grails.org/doc/1.0.x/ref/Tags/createLink.html). For example:
   Book Lorem ipsum

   For more info: http://www.grails.org/ModalBox+Plugin

   Cheers from Germany,
   Alexander Köhn

6. Recent Faves Tagged With "namespace" : MyNetFaves Says:
   March 31st, 2009 at 15:05

   […] Maxwell26 | 2 days ago ASP.NET MVC Preview Release 5 First saved by lgirona | 2 days ago Modalbox in Grails First saved by bayle | 9 days ago Input to an Automation Engine – Namespace as a Starting […]

7. Sara Says:
   November 7th, 2009 at 3:48

   Roman,

   I have form named X with many records. The user selects a couple of records on this form and clicks a link that opens the modal box. I need to pass the id of the records that were selected to the modal box. I have a form with a comment field and save button on the modal box. When the user enters a comment on the modal box and clicks Save, I want to submit the id of the records that were selected and the comment to the controller which will save this information to the database and re-render form X.

   How do I pass the id of the records that were selected from form X to the modal box?

   I would appreciate any help you can give me.

   Thanks,
   Sara

8. bookid Says:
   March 30th, 2010 at 15:12

   […] (will not be published) (required) Website ©2000 – 2010 Brick Books. All Rights Reserved. …/bin/recykl Blog Archive Modalbox in Grailsbook … update=[success:’similar’] onComplete=Modalbox.resizeToContent()> Heavy Petal What is […]