I have a Grails application with a form in it. Once the user has entered the data and submitted it, and it's been validated etc.. I need a message to popup in a little window to give the user some feedback - it needs to popup, rather than be displayed on the page. Can anyone advise me on the best way to do this?
+3
A:
I have implemented the same mechanism for my application, and I am using the jQuery plugin 'smartmodal' (used by the Nimble plugin originally). See here
You simply have to redirect the request in the controller validation code to a GSP page containing the following code:
<script type="text/javascript" src="${resource(file: 'jquery-1.3.2.js')}"></script>
<script type="text/javascript" src="${resource(file:'jquery.smartmodal.js')}"></script>
<LINK rel="stylesheet" href="./css/smartmodal.css">
...
<body>
...
<g:javascript>
$(function() {
$("#msg").hide();
$("#msg").modal({hide_on_overlay_click:false});
$("#msg").modal_show();});
</g:javascript>
<div id="msg">
My feedback message is here
</div>
<g:link controller="..." action="...">Close</g:link>
I hope it helps,
Fabien
EDIT:
An extract of the smartmodal.css
file that will render the 'modal effect' is:
#modal_content {
display: none;
position: fixed;
left: 50%;
padding: 0px;
top: 10%;
background: #FFF;
border: 0px solid #d2d2d2;
width: 400px;
margin-left: -200px;
text-align: left;
}
#modal_overlay {
background-color: #000;
}
However if you want the complete file, it is available inside the great Nimble grails plugin
fabien7474
2010-01-09 22:38:48
Hi, thanks for this - I'm struggling a bit with it though, when it redirects it opens this in the main window rather than a little window. Any idea where I am going wrong?
ellander
2010-01-10 21:41:16
If the main window appears instead of the modal window, it means that the 'modal_show()' function is not called or that the CSS file smartmodal.css is not included. I would check that both JS and CSS files are included into your html page. I have updated the code for including the CSS file
fabien7474
2010-01-10 22:51:28
ok great, I could only find a modal.css in the zip from the link you suggested, but that does not seem to work - is the smartmodal.css different to the modal.css one? thankyou so much for your help
ellander
2010-01-10 23:32:39
I think that you better have to install Nimble (http://intient.com/opensource/nimble) into a new grails application and just go over the plugin code.
fabien7474
2010-01-11 00:09:48
See my updated answer for the CSS file content
fabien7474
2010-01-11 00:20:57