Home About Archives   Contact
« Grails: internationalization in the service
String similarity detection »

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.

RSS Feed Published on August 12th, 2008 Posted by Roman Mackovcak

5 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

Leave a Reply