Twitter bootstrap modal call controller action

Question

У меня есть всплывающее окно, использующее twitter bootstrap modal. Я хочу вызвать действие контроллера перед отображением всплывающего окна и отобразить значение переменной из действия контроллера во всплывающее окно. Ajax не вызывает действие контроллера. Есть ли другой способ сделать это?

Мой 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> 

Answer 1

Ваш код является совершенным, и это работает для меня после того, как незначительные изменения в коде.

Вы используете #, который представляет идентификатор, а не класс.

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

заменить # на.

например

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

Попробуйте и наслаждайтесь .............

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); 
     }); 

Answer 2

Ваш вопрос в комментарии:

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

Ans: Измените свой код немного, как объяснено.

<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>