我是一个网络开发方面的初学者,在做了很多研究之后,我仍然无法完成这项工作.非常感谢您的帮助.我正在使用最新的rails版本和bootstrap来使事情变得更漂亮.

我有一个页面,上面有一张桌子,上面有一家餐厅的订单.如果你点击一行,我希望它在一个模式窗口中使用 bootstrap 显示订单细节.我已经通过onclick+javascript函数打开了model,但是它看起来有点混乱,我仍然不知道如何用订单信息加载model的content div.以下是我的代码:

HTML:

<h1>Orders</h1>
<table class="table table-striped"
  <thead>
    <tr>
      <th>ID</th>
      <th>Customer</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <% @restaurant.orders.each do |order| %>
    <tr onclick="orderModal(<%= order.id  %>);">
      <td><%= order.id %></td>
      <td><%= order.customer_id %></td>
      <td><%= order.status %></td>
    </tr>
    <% end %>
  </tbody>
</table>

<div id="orderModal" class="modal hide fade" role="dialog" 
     aria-labelledby="orderModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
    <h3>Order</h3>
  </div>
  <div id="orderDetails"class="modal-body"></div>
  
  <div id="orderItems" class="modal-body"></div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>

js:

function orderModal(order_id){
    $('#orderModal').modal({
        keyboard: true,
        backdrop: "static"
    });
};

推荐答案

你可以做的一件事就是go 掉所有的onclick属性,用bootstrap以正确的方式完成.你不需要手动打开它们;您可以在模式打开之前指定触发器,甚至订阅事件,以便执行操作并在其中填充数据.

我只是想展示一个静态的例子,你可以在现实世界中适应它.

在每个<tr>的屏幕上,为id(即data-id)添加一个具有相应id值的数据属性,并指定一个data-target,这是您指定的 Select 器,以便在单击时, bootstrap 将 Select 该元素作为模式对话框并显示它.然后你需要添加另一个属性data-toggle=modal来触发模态.

  <tr data-toggle="modal" data-id="1" data-target="#orderModal">
            <td>1</td>
            <td>24234234</td>
            <td>A</td>
  </tr>
  <tr data-toggle="modal" data-id="2" data-target="#orderModal">
            <td>2</td>
            <td>24234234</td>
            <td>A</td>
        </tr>
  <tr data-toggle="modal" data-id="3" data-target="#orderModal">
            <td>3</td>
            <td>24234234</td>
            <td>A</td>
  </tr>

现在在javascript中,只需设置一次模式,然后事件监听它的事件,这样你就可以完成工作了.

$(function(){
    $('#orderModal').modal({
        keyboard: true,
        backdrop: "static",
        show:false,

    }).on('show', function(){ //subscribe to show method
          var getIdFromRow = $(event.target).closest('tr').data('id'); //get the id from tr
        //make your ajax call populate items or what even you need
        $(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow  + '</b>'))
    });
});

100

Do not use inline click attributes any more. Use event bindings instead with vanilla js or using jquery.

其他方法如下:

100101

Ruby-on-rails相关问答推荐

在ransackable_scopes中的作用域上创建activeadmin过滤器

如何在不触发每次编译的情况下运行`bin/rails测试`?

合成轨道布局

Grape api (rails) - 未初始化常量 Endpoints::TodoAPI (NameError)

Sidekiq with Rails - 控制台与 rake 任务中的不同 Sidekiq 实例

Rails 创建自定义函数/方法以及存储位置

如何为 I18n 设置 raise_on_missing_translations

URL 中的 Rails slugs - 使用 Active Record Model Post 的 Title 属性而不是 ID

Rails 3 的data-method='delete'如何优雅地降级?

如何在 Windows 中更新 ruby

Rails,获取模型中的资源路径

form_tag 是否与 Simple_form 一起使用?

升级到 ruby​​ 1.9.2 后奇怪的无法要求配置/ bootstrap

Django 还是 Ruby-On-Rails?

使用 rvm 更新 ruby​​ 版本后收到警告消息Path set to RVM

我可以在 twitter-bootstrap popover 数据内容中使用 html 标签吗?

停止 Rails 为视图和助手生成规范测试?

在 Rails 中,在特定时区创建特定时间(不是现在)的最佳方式是什么?

rake 任务中的 def 块

Rails - 邮件,将正文作为纯文本获取