Ruby on Rails Partial won't refresh with AJAX but says it is rendering the partial in the console

Question

I am trying to get a table to refresh on my Rails 5 application. It is being hosted on a Linux CentOS 7 system and accessed via my Firefox browser on Windows 7. I have tried much research and tried the Rails-AJAX gem to no avail (this gem also broke my links for some reason so I disabled it for now). In my console it claims to be rendering the partial after I make a change to the database, but this change is not reflected until I manually refresh the page in the browser.

The partial I'm trying to refresh is an entire table filled with data from the database and it has an image of an on/off light depending on if the status in the database says 'on' or 'off'. This image is what I look for if the table is actually being refreshed. Unfortunately, this image only changes when I manually refresh. Note: Svc/svc is the name of the model/table from the database that I'm using.

This is the console message I get when clicking my 'start' button:

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)

Code from 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 %>

Yes, I know the refresh button is printed multiple times, but I did not know how to link one button to the database.

HTML for table partial:

<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>

Code for boundbooks controller update and startServer methods:

  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

JavaScript code for AJAX in update.js.erb in the boundbooks views folder:

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

these are the relevant routes in 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'

How would I get this to actually refresh the table properly?

Answer 1

Your error seems simple

you are trying to change the html of the div with id 'boundbookstable'

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

but in your html, the div has the id of 'boundbooktable'

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

just be sure that they are exactly the same on both, change the html or the js, but be sure they are both equal on both files.