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 << """
            ${linkname}${body.call()}
        """
    }
    
    def modalIncludes = {
        def jsFolder    = createLinkTo(dir:'plugins',file:'modalbox-0.2/js/modalbox')
        def cssFolder   = createLinkTo(dir:'plugins',file:'modalbox-0.2/css')
        
        out << """
            
    		
    		
    		
        """
    }
}

“Parent” view

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

book

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


	
	
	


Close

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 comments

  1. 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. 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?

  3. 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

  4. Pingback: bookid

Comments are closed.