Twitter bootstrap modal call controller action

3
votes

I have a popup window using twitter bootstrap modal. I want to call an controller action before the display of the popup and display the value of the variable from the controller action into the popup. The ajax is not calling the controller action. Is there other way to do it?

My gsp: 

<g:javascript>
        $(document).ready(function() {
          $('#myModal').on('show', function () {
            $.ajax({
              type: "GET",
              url: "${createLink(controller: 'mGMatrices', action: 'popup')}" 
            }).done(function(data) {
                $('#modal-body').html(data);
            });

          });//end on()
        });//end ready()
      </g:javascript>

       <g:textField name="inputField" />
      <!-- Button to trigger modal -->
      <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>


      <!-- Modal -->
      <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h3 id="myModalLabel">Modal header</h3>
        </div>
        <div class="modal-body">
             <p>some content</p>
             <input type="text" name="bookId" id="bookId" value=""/>
        </div>
      </div>
2
ajaxgrailstwitter-bootstrap
Are you getting any javascript errors? - ikumen

2 Answers

3
votes

Your code is perfect and it works for me after a minor change in the code.

You are using # that represents the id not the class.

$('#modal-body').html(data);

replace # with .

e.g 

$('.modal-body').html(data);

Try this and enjoy.............

EDIT.............................................................................

        $.ajax({
          type: "GET",
          url: "${createLink(controller: 'mGMatrices', action: 'popup')}",
          data: "inputField="+$("[name='inputField']").val()+"&fieldName="+$("[name='fieldNAme']").val()
        }).done(function(data) {
            $('#modal-body').html(data);
        });
1
votes

Your question in comment: 

I need to call first the action in the controller before displaying the popup.

Ans: Change your code slightly as explained.

<g:javascript>
    function callMe(){
      $.ajax({
      type: "GET",
      url: "${createLink(controller: 'mGMatrices', action: 'popup')}",
      data: "aa="+$("[name='inputField']").val()
        }).success(function(data) {
            $('.modal-body').html(data);
            $('#myModal').modal('show');
        });
    }
</g:javascript>

<g:textField name="inputField"/>
<!-- Button to trigger modal -->
<a href="javascript:void(0)" class="btn" onclick="callMe()">Launch demo modal</a>



<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

        <h3 id="myModalLabel">Modal header</h3>
    </div>

    <div class="modal-body">
        <p>some content</p>
        <input type="text" name="bookId" id="bookId" value=""/>
    </div>
</div>