Twitter bootstrap模态调用控制器动作

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?

我有一个使用twitter bootstrap模式的弹出窗口。我想在显示弹出窗口之前调用控制器操作,并将控制器操作中的变量值显示到弹出窗口中。 ajax没有调用控制器动作。还有其他办法吗?

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 个解决方案

#1

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.

您正在使用表示ID而不是类的#。

$('#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);
        });

#2

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.

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>

#1