Twitter Bootstrap 模态框调用控制器操作

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>

- Jerika

---

你是否遇到了任何 JavaScript 错误？ - ikumen

Answer 1

你的代码完美，仅需稍微修改即可让我使用。

你正在使用#表示id而非class。

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

- ABC

---

它可以工作。但我需要在控制器内获取文本框输入。当我打印params.inputField时，它仍然为空。 - Jerika

哇，太棒了。另外，我需要在显示弹出窗口之前先调用控制器中的操作。提前致谢。 - Jerika

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>

- ABC

---

非常感谢。但我还有一个最后的问题。在控制器操作中，我有一个返回值，我需要将该返回值显示在弹出窗口中。提前致谢。 - Jerika

如果您在控制器中使用了 return 关键字，请将其替换为 render，然后您将获得值（我认为如此）。还有一件事，如果您解决了问题，请投票支持该答案。 - ABC