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.
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
Thanks for that. Will install it soon.
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?
I did not try it, but I would use the same parameters as createLink. See http://grails.org/doc/1.0.x/
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
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