Question

我有一个使用twitter bootstrap模式的弹出窗口。我想在显示弹出窗口之前调用控制器操作，并将控制器操作中的变量值显示到弹出窗口中。 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

您的代码非常完美，只需对代码稍作修改即可。

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

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

将＃替换为。

例如

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

试试这个并享受.............

修改........................................... ..................................

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

并且：按照说明稍微更改您的代码。

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

Twitter bootstrap模态调用控制器动作

2 个答案: