Grails Twitter Bootstrap Modal 以服务器端方式加载内容答案

【问题标题】：Grails Twitter Bootstrap Modal load content in Server-side fashionGrails Twitter Bootstrap Modal 以服务器端方式加载内容
【发布时间】：2013-06-26 21:50:24
【问题描述】：

我正在使用 Grails 2.2.1 和 Twitter Bootstrap 插件。

如果我理解正确的话，GSP 的重点是通过 grails 标签/taglibs 在服务器端呈现某些东西。

如何使用服务器端方法调用带有控制器 myController 的动作 myAction 以仅在模态框内呈现？

如果没有服务器端的方法，那么最好的选择是什么？

【问题讨论】：

我认为我的插件或其他东西有错误，因为我尝试使用这个简单的例子：jsfiddle.net/mmfansler/cp67J 它甚至不起作用，在 jsfiddle 上有 0 个问题。
发布您的代码会很有帮助，因为我无法想象您的问题。
我使用 .load jquery 函数没有问题。但是在为 Grails 安装 js/prototype 插件后，.load 函数不再适用于 Twitter Bootstrap Modals。我完全删除了原型插件，然后我卸载并重新安装了 Bootstrap 和 jquery。但它仍然无法正常工作。

标签： grails twitter-bootstrap server-side

【解决方案1】：

如果您希望您的模式从服务器呈现数据而无需刷新当前页面，那么您将需要某种类型的“ajax”来检索数据并填充模式。

一个简单的例子（我假设你有 jquery 和 bootstrap css+js）：

//button to launch your modal
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

//your modal
<div id="myModal" class="modal hide fade" ...
 ...
 <div id="modal-body">..
</div>

将数据加载到模式中的一种方法是将 ajax 调用绑定到模式“显示”事件。这是一个非常基本的示例，但是每当模态显示时，都会调用 myController/myAction/someid 将数据加载到模态主体 div 中

$(document).ready(function() {
  $('#myModal').on('show', function () {
    $.ajax({
      type: "GET",
      url: "${createLink(controller: 'myController', action: 'myAction', id: 'someid')}" 
    }).done(function(data) {
        $('#modal-body').html(data);
    });

  });//end on()
});//end ready()

需要考虑的一些事项：

您可能需要进行某种类型的内容协商来传回 json 数据与原始 html
一种本地化程度较低的 url 传递方法：到 ajax 调用

希望这会让你开始一些想法

【讨论】：