Grails Twitter Bootstrap Modal load content in Server-side fashion

Question

I'm using Grails 2.2.1 and the Twitter Bootstrap plugin.

If I understand correctly, the point of GSP is to render certain things on the server side via grails tags/taglibs.

How would I call an action myAction with controller myController to be rendered inside the modal only, using a server-side approach?

If there is not a server-side way of doing this, what would be the best alternative?

I think there's an error with my plugins or something, because I try to use this simple example: jsfiddle.net/mmfansler/cp67J And it doesn't even work yet has 0 problems on jsfiddle. — Riveascore
posting your code would be helpful since I can't imagine your problem. — jjczopek
I had no problem using the .load jquery function. But after installing the js/prototype plugin for Grails, the .load function no longer works for Twitter Bootstrap Modals. I completely removed the prototype plugin, I then uninstalled and reinstalled Bootstrap and jquery. But it's still not working. — Riveascore

ikumen ikumen · Accepted Answer · 2013-06-26T22:50:40

If you want your modal to render data from the server without having to refresh the current page, then you'll need some type of "ajax" to retrieve the data and populate the modal.

A quick example (i'm assuming you have jquery, and bootstrap css+js):

//button to launch your modal
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

//your modal
<div id="myModal" class="modal hide fade" ...
 ...
 <div id="modal-body">..
</div>

One way to load data into the modal is tying ajax call to the modal "show" event. This is a very basic example, but whenever the modal shows, a call to myController/myAction/someid to load data into modal-body div

$(document).ready(function() {
  $('#myModal').on('show', function () {
    $.ajax({
      type: "GET",
      url: "${createLink(controller: 'myController', action: 'myAction', id: 'someid')}" 
    }).done(function(data) {
        $('#modal-body').html(data);
    });

  });//end on()
});//end ready()

Some things to consider:

you'll probably want to do some type of content negotiation to pass back json data vs raw html
a less localized method of passing url: to ajax call

Hopefully that'll get you started with some ideas

Grails Twitter Bootstrap Modal load content in Server-side fashion

1 Answers