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.

8 Responses to “Modalbox in Grails”

  1. Alexander Koehn Says:

    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:

    Thanks for that. Will install it soon.

  3. Aaron Eischeid Says:

    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:

    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:

    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:

    […] 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:

    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:

    […] (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 […]