尝试显示控制器索引操作时，Rails 4 AJAX 请求不起作用

Question

我正在构建一个小型应用程序，带有一个后端供用户添加/编辑/删除办公地点，在面向公众的网站上，我有一个模式，我想在其中显示办公地点，在后端加载所有内容进入索引视图，没问题，但是当我尝试将位置加载到面向公众的模式中时，没有任何显示。

当我尝试在检查窗口 (chrome) 中解决此问题时，单击链接以启动模式时没有任何反应。

我们将不胜感激这里的任何帮助，因为 AJAX 对我来说还是有点陌生​​。

我的 AJAX 请求（位于 app/views/layout/application.html.erb 文件：

<script>
  $(document).ready(function() {
    $("#publicLocation").on("click", function() {
      $.ajax({
        url: '/locations',
        dataType: 'script',
        method: 'GET'
      })
    })
  });
</script>

我的位置索引操作：

class LocationsController < ApplicationController
  before_action :set_location, only: [:show, :edit, :update, :destroy]
  before_action :authenticate_user!, except: [:index, :show]
  # GET /locations
  # GET /locations.json
  def index
    @locations = Location.all
    @location = Location.new
  end
end

我的模态窗口：

<div class="modal fade" id="publicLocation" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container">

          <div class="row">
            <table class="table" id="container_locations">
              <thead>
                <tr>
                  <th><center>city</center></th>
                  <th><center>tel number</center></th>
                  <th colspan="3"></th>
                </tr>
              </thead>

              <tbody>
                <% if @locations.present? %>
                <div id="containerLocations">
                  <%= render @locations %>
                </div>
                <% else %>
                <td colspan="11"><center><h5>no locations added. please add your first location now.</h5></center></td>
                <% end %>
              </tbody>
            </table>

          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

每个条目填充的表格：

<tbody>
  <tr id="location_<%= location.id %>">
    <td class="hidden-sm-down"><center><%= location.unit_number %></center></td>
    <td class="hidden-sm-down"><center><%= location.street_number %></center></td>
    <td class="hidden-sm-down"><center><%= location.street_name %></center></td>
    <td class="hidden-sm-down"><center><%= location.quad %></center></td>
    <td><center><%= location.city %></center></td>
    <td class="hidden-sm-down"><center><%= location.province %></center></td>
    <td class="hidden-sm-down"><center><%= location.postal_code %></center></td>
    <td><center><%= location.tel_number %></center></td>
    <td><center><%= link_to 'Show', location %></center></td>
    <td><center><%= link_to 'Edit', edit_location_path(location) %></center></td>
    <td><center><%= link_to 'Destroy', location, method: :delete, data: { confirm: 'Are you sure?' } %></center></td>
  </tr>
</tbody>

最后是我的导航链接打开模式：

地点

这是我单击链接打开模式时的服务器输出：

Started GET "/locations?_=1492293579724" for ::1 at 2017-04-15 15:59:40 -0600
Processing by LocationsController#index as JS
  Parameters: {"_"=>"1492293579724"}
  Rendering locations/index.html.erb within layouts/application
  Location Load (0.4ms)  SELECT "locations".* FROM "locations"
  Rendered locations/_location_edit.html.erb (0.5ms)
  Rendered collection of locations/_location.html.erb [1 times] (13.1ms)
  Rendered locations/_locations_form.html.erb (3.5ms)
  Rendered locations/index.html.erb within layouts/application (46.1ms)
  Rendered nav/_signed_out.html.erb (2.2ms)
  Rendered users/shared/_links.html.erb (0.7ms)
  Rendered users/sessions/_user_login.html.erb (16.6ms)
  Rendered locations/_location_edit.html.erb (0.1ms)
  Rendered collection of locations/_location.html.erb [1 times] (14.4ms)
  Rendered locations/_public_locations.html.erb (28.4ms)
Completed 200 OK in 232ms (Views: 218.4ms | ActiveRecord: 0.4ms)

Answer 1

我认为您需要完成您的 AJAX 请求。您正在向/locations 路由发出GET 请求，我认为它会呈现部分？您需要捕获 AJAX 请求的响应，并告诉浏览器将其放置在页面的什么位置。

您将其作为 ERB 文件中的脚本标记，但在资产文件夹中的 JavaScript 树中可能会更好。

典型的 AJAX 请求如下所示（使用 jQuery）：

    $("#publicLocation").on("click", function() {
      $.ajax({
        url: '/locations',
        method: 'GET'
      }).done(function(response){
         // Tell the app where to put the response here
         // the response contains your partial, which you can append to an empty 
         // div in your html.
      }).fail(function(error){
        console.log(error)
      })
    })