Question

我正在Ruby on Rails应用程序上创建一个带有切换按钮的表。我为表和切换使用bootstrap。

引导程序切换在主页面中起作用，而在局部视图中不起作用。不知何故，JS没有在局部视图中加载，尽管布局看起来很好。当我使用部分中的document.ready jQuery做一个简单的警报时，它可以工作。

但不确定如何在此页面中启动引导程序切换。

我试图从部分html文件中删除JS文件链接，但之后它只显示普通的复选框元素。我也尝试在触发部分的按钮中将turbolinks设置为false。但它仍然没有加载JS文件。

主页面视图

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

     <table
        id="usersaccess_table"
        data-pagination="true"
        class="table ">

       <thead>
          <tr>
            <th data-field="user_id">User</th>
            <th data-field="col_1" >Column 1</th>
            <th data-field="col_2">Column 2</th>
            <th data-field="col_3" >Column 3</th>
            <th data-field="col_4" >Column 4</th>       
          </tr>
      </thead>

<% @users.each do |u| %>
<tr><td><%= u[:username]%> </td>
 <td><input type="checkbox" <%=u[:col_1]==1? "checked":""%> data-toggle="toggle"></td>
<td><input type="checkbox" <%=u[:col_2]==1? "checked":""%> data-toggle="toggle"></td>
<td><input type="checkbox" <%=u[:col_3]==1? "checked":""%> data-toggle="toggle"></td>
<td><input type="checkbox" <%=u[:col_4]==1? "checked":""%> data-toggle="toggle"></td>
</tr>
<% end %>
</table>

部分网页浏览

使用主视图页面中的另一个html元素显示特定用户名输入时显示的部分内容。

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

      <table
        id="user_table"
        data-pagination="true"
        class="table">

       <thead>
          <tr>
            <th data-field="col_1" >Column 1</th>
            <th data-field="col_2">Column 2</th>
            <th data-field="col_3" >Column 3</th>
            <th data-field="col_4" >Column 4</th>       
          </tr>
      </thead>

<% @users.each do |u| %>
  <td><input type="checkbox" <%=u[:col_1]==1? "checked":""%> data-toggle="toggle"></td>
<td><input type="checkbox" <%=u[:col_2]==1? "checked":""%> data-toggle="toggle"></td>
<td><input type="checkbox" <%=u[:col_3]==1? "checked":""%> data-toggle="toggle"></td>
<td><input type="checkbox" <%=u[:col_4]==1? "checked":""%> data-toggle="toggle"></td>
</tr>
<% end %>
</table>

触发显示部分

的按钮

<div>
    <button type="button" class="btn btn-primary add_access"><i class="fa fa-plus"></i> Add User Permissions </button>
   <div id="input_user" style="display:none">
  <%= form_tag({controller: "request", action: "getuser_by_id"}, method: "POST", multipart: true, id: "search_users_form", "data-turbolinks": false, remote: true) %>
    <input type="text" name="user_id" id="user_id" >   
    <button type= "submit"> Submit </button>
  </form>
  </div>

Answer 1

找到一个解决方法，在bootstrap toggle脚本中找到这行代码

$(function() { $('input[type=checkbox][data-toggle^=toggle]').bootstrapToggle() })

所以我单独添加了这个代码来加载部分中的bootstrap-toggle复选框。

JS文件未在局部视图中加载 - RoR

1 个答案: