Rails 4 - 具有模态和制表符问题的动态内容

时间:2016-04-27 18:53:31

标签: jquery ruby-on-rails twitter-bootstrap ruby-on-rails-4 erb

编辑以获得更多说明:一旦我点击提交,控制器动作就会发生,但模态不会消失并刷新页面。这在我添加标签之前有效,但现在却没有。

我有一个rails应用程序,用于更新各个表之间的关联。到目前为止,我已经能够打开一个模式,其中包含一个表单,该表单包含用户更新记录之间链接的清单。

<div class= "form-group" style="overflow-y auto; height: 200px;">
  <p><strong>Associated Things </strong></p>
  <% for thing in Thing.All %>
    <div>
      <%= check_box_tag "bigthings[thing_ids][]", thing.id, @bigthings.things.include?(thing) %>
      <%= thing.name %>
    </div>
  <%end%>
</div>
<div class= "modal-footer">
   <%= button_tag(type:"submit", class:"btn btn-default") do %> Submit<%end%>
   <% link_to "Cancel", class: "btn btn-default", data: {dismiss: "modal"}%>
</div>

现在,这个表单代码(不完整但是正确)在我点击提交按钮后最初关闭,因为在此表单路由到的update_links.js.erb中

  $("#update-modal").on("submit", function(){
      $("#update-modal").modal("hide");
     window.location.reload();
});

在the bigthing#show上,我有一个表,一旦提交被模式

动态更新
<table>
     <thead>
        <tr>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <% @bigthing.things.each do |thing| %>
          <tr>
            <td><%= @thing.name %></td>
            <td><%= thing.price %></td>
          <tr>
        <% end %>
      </tbody>
    </table>

现在,我在此部分添加了标签,以根据大事的所有者显示内容。一个选项卡显示与大事相关的所有事情,但第二个选项卡显示与大事物所有者相关的所有事情。

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
            <li class="active"><a href="#tab1" 
            data-toggle="tab">Mine</a></li>
            <li><a href="#tab2" data-toggle="tab">All</a></li>
        </ul>
 <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="tab1">
<table>
         <thead>
            <tr>
              <th>Name</th>
              <th>Price</th>
            </tr>
          </thead>
          <tbody>
            <% @bigthing.owner.things.each do |thing| %>
              <tr>
                <td><%= @thing.name %></td>
                <td><%= thing.price %></td>
              <tr>
            <% end %>
          </tbody>
        </table>

        </div>
        <div class="tab-pane" id="tab2">
<table>
         <thead>
            <tr>
              <th>Name</th>
              <th>Price</th>
            </tr>
          </thead>
          <tbody>
            <% @bigthing.things.each do |thing| %>
              <tr>
                <td><%= @thing.name %></td>
                <td><%= thing.price %></td>
              <tr>
            <% end %>
          </tbody>
        </table>  
        </div>
    </div>
    <script>
     $(function(){
       $("#tabs").tabs();
    });

</script>

但是现在当我打开表单更新事物时,模态不会在提交时关闭。但是,如果我关闭模态并刷新页面,则会显示更新的关联。任何人都会看到我失踪的东西。

1 个答案:

答案 0 :(得分:0)

安装此宝石

gem 'jquery-turbolinks'

由Turbolinks引起的嵌入式修复绑定事件问题的jQuery插件

这可能是你的问题。