CODEWITHSUNDEEP
grailstwitter-bootstrapmodal-dialog
Christian Stade-Schuldt
Christian Stade-Schuldt

Reputation: 4861

Rendering Grails content in Twitter Bootstrap modal

I am trying to render the outcome of an action into a modal (twitter bootstrap). Unfortunately I do not get this to work.

Before I was generating a link within an each iterator:

<g:link action="perform" id="${exerciseInstance.id}">
   <h2>${fieldValue(bean: exerciseInstance, field: "title")}: (${exerciseInstance.questions.size()} Questions)</h2>
 </g:link>

Instead of rendering a complete new site I rather want the quiz to be presented in a modal. Therefore I tried a simple twitter bootstrap modal example:

<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">${fieldValue(bean: exerciseInstance, field: "title")}</a>
<div id="myModal" class="modal hide fade" style="display: none; ">
  <div class="modal-header">
    <h3>Test</h3>
  </div>
  <div class="modal-body">
    --> This is where the content should go <--
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
  </div>
</div>

What is the best way to achieve this?

Upvotes: 1

Views: 2761

Answers (1)

Gregg
Gregg

Reputation: 35864

Asking for the "best way" on SO is a dangerous game. There probably isn't a best. Just different approaches. I'll give you one that I use utilizing jQuery's $.load() function.

$("#myModal .modal-body").load(url);

It really is that simple. Obviously, adjust your load() function if you need to pass in parameters, provide a callback function, etc. Your controller's action would just render a template containing the HTML you want in your modal-body. This isn't really even Grails specific. This approach would work with any server side tech.

Upvotes: 2

Related Questions