javascript - Ruby on Rails Partial 不会使用 AJAX 刷新，但表示它正在控制台中呈现部分

Question

我正试图在我的 Rails 5 应用程序上刷新一个表。它被托管在 Linux CentOS 7 系统上，并通过我在 Windows 7 上的 Firefox 浏览器访问。我已经尝试了很多研究并尝试了 Rails-AJAX gem 无济于事(这个 gem 也由于某种原因破坏了我的链接所以我禁用了它现在)。在我的控制台中，它声称在我对数据库进行更改后呈现部分内容，但直到我在浏览器中手动刷新页面后，此更改才会反射(reflect)出来。

我要刷新的部分是一个充满数据库数据的整个表格，它有一个开/关灯的图像，具体取决于数据库中的状态是“开”还是“关”。如果表格实际上正在刷新，则此图像是我要查找的图像。不幸的是，这张图片只有在我手动刷新时才会改变。注意:Svc/svc 是我正在使用的数据库中模型/表的名称。

这是我在单击“开始”按钮时收到的控制台消息:

Started GET "/boundbooks/1" for *IP ADDRESS* at 2018-06-29 17:51:10 -0400
Cannot render console from *IP ADDRESS*! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by BoundbooksController#startServer as JS
  Parameters: {"id"=>"1"}
  Svc Load (0.8ms)  SELECT  "svc".* FROM "svc" WHERE "svc"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  ↳ app/controllers/boundbooks_controller.rb:26
   (0.2ms)  begin transaction
  ↳ app/controllers/boundbooks_controller.rb:30
  Svc Update (4.2ms)  UPDATE "svc" SET "STATUS" = ? WHERE "svc"."id" = ?  [["STATUS", "on"], ["id", 1]]
  ↳ app/controllers/boundbooks_controller.rb:30
   (23.8ms)  commit transaction
  ↳ app/controllers/boundbooks_controller.rb:30
  Svc Load (0.5ms)  SELECT "svc".* FROM "svc"
  ↳ app/views/boundbooks/_boundbooks_table.html.erb:8
  Rendered boundbooks/_boundbooks_table.html.erb (17.8ms)
Completed 200 OK in 83ms (Views: 36.3ms | ActiveRecord: 29.5ms)

来自 views/boundbooks/index.html.erb 的代码:

<div id="bb-table">
  <%= render partial: 'boundbooks_table', locals: { boundbooks: @boundbooks } %>
</div>
<br><br>

<% @boundbooks.each do |svc| %>
  <%= link_to 'Refresh', boundbookUpdate_path(:bb_id => svc.id), id: 'refresh-button', class: 'btn', remote: true %>
<% end %>

是的，我知道刷新按钮被打印了多次，但我不知道如何将一个按钮链接到数据库。

表格部分的 HTML:

<table id="boundbooktable" border="1">
  <thead><th>Status</th><th>Name</th><th>IP Address</th><th>Port</th><th>Action</th></thead>
    <tbody>
      <%# btnCounter gives each button a different ID by incrementing at the end of the loop %>
      <% btnCounter = 1 %>
      <%# statusOn = true %>
      <%# creates a for-loop that utilizes the svc database table %>
      <% @boundbooks.each do |svc| %>
        <% status = svc.STATUS %>
        <tr>
          <td class="status-cell">
            <% if status == "on" %>
              <%= image_tag ("statusOn.png") %>
            <% else %>
              <%= image_tag ("statusOff.png") %>
            <% end %>
          </td>
          <td><%= svc.NAME %></td>
          <td><%= svc.IP %></td>
          <td><%= svc.PORT %></td>
          <td>
              <% if status == "off" %>
                <%= link_to "Start", boundbookStart_path(svc.id), id: 'start-button' + btnCounter.to_s, class: 'btn-start',
                            data: { confirm: "Start " + svc.NAME + "?" }, remote: true %>
              <% else %>
                <%= link_to "Start", boundbookStart_path(svc.id), id: 'start-button' + btnCounter.to_s, class: 'btn-start',
                            data: { confirm: svc.NAME + " is already on." }, remote: true %>
              <% end %>

              <% if status == "on" %>
                <%= link_to "Stop", boundbookStop_path(svc.id), id: 'stop-button' + btnCounter.to_s, class: 'btn-stop', remote: true,
                            data: { confirm: "ALERT: Stop " + svc.NAME + "?" }, onclick: 'myFunction()' %>
              <% else %>
                <%= link_to "Stop", boundbookStop_path(svc.id), id: 'stop-button-already-off' +btnCounter.to_s, class: 'btn-stop',
                            remote: true, data: { confirm: svc.NAME + " is already off." } %>
              <% end %>

              <%= link_to "Log", boundbooks_path, id: 'log-button' + btnCounter.to_s, class: 'btn btn-log', remote: true %>
          </td>
        </tr>
        <% btnCounter += 1 %>
      <% end %> <%# end for-loop going through database %>
    </tbody>
  </table>

边界簿 Controller 更新和 startServer 方法的代码:

  def update
    @boundbooks = Svc.all

    @selected = Svc.where(:boundbook_id => params[:bb_id])
    respond_to do |format|
      format.js
    end
  end

  def startServer
    server = Svc.find(params[:id])

    if server.STATUS == "off"
      @boundbooks = Svc.all
      server.update_attribute(:STATUS, "on")
      refresh_dom_with_partial('div#bb-table', 'boundbooks_table')
      render partial: 'boundbooks_table', locals: { boundbooks: @boundbooks }
    else
      puts ">>>> >>>> >>>> Server already on"
    end
  end

boundbooks View 文件夹中 update.js.erb 中用于 AJAX 的 JavaScript 代码:

$.ajax({ url: "boundbooks_controller/update",
         success: function() {
           $("#boundbookstable").html("<%= escape_javascript(render partial: 'boundbooks_table', locals: { boundbooks: @selected } ) %>");
         }});

这些是 routes.rb 中的相关路线:

  get '/welcome' => 'welcome#index'

  get '/boundbooks/:id/', controller: 'boundbooks', action: 'startServer', as: 'boundbookStart'

  get '/boundbooks/:id/edit', controller: 'boundbooks', action: 'stopServer', as: 'boundbookStop'

  get '/boundbooks/:bb_id/update' => 'boundbooks#update', as: 'boundbookUpdate'

  get '/boundbooks_controller/update' => 'boundbooks#update'

我怎样才能让它真正正确地刷新表格？

Answer 1

你的错误看起来很简单

您正在尝试更改 ID 为“boundbookstable”的 div 的 html

$("#boundbookstable").html(...

但在您的 html 中，div 的 ID 为“boundbooktable”

<table id="boundbooktable" border="1">

只需确保它们在两个文件上完全相同，更改 html 或 js，但确保它们在两个文件上都相等。