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 |
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
August 18th, 2008 at 20:41
Thanks for that. Will install it soon.
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?
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/
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
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 […]
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
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 […]