Rails 5：使用 AJAX 在另一个部分中渲染部分

Question

我在尝试实现 AJAX 时有点卡住了，其中呈现了“link_to”视图，在该视图中我有另一个 AJAX 调用。

我有菜单侧边栏，里面有这样的东西：

<li class="<%= is_active_action('positions') %>"><%= link_to "Positions", positions_path, remote: true %></li>

在 application.html.erb 我有这个：

<!-- Main view  -->
<div id="yield">
   <%= yield %>
</div>

实际上不确定这是否是正确的做法，但到​​目前为止它确实有效。

然后在 views/../positions/index.js.coffee 我有这个

$("#yield").empty()
  .append("<%= escape_javascript(render 'inventory/positions/index') %>")

这是重新渲染 /positions/_index.html.erb 部分。在那里我有<div id="media_list"> 和<div id='positions_table'>

在 assets/javascripts 我有 positions.coffee

$ ->
$(document).on 'change', '#media_list', (evt) ->
    $.ajax 'update_positions',
      type: 'GET'
      dataType: 'script'
      data: {
        media_id: $("#media_list option:selected").val()
      }
      error: (jqXHR, textStatus, errorThrown) ->
        console.log("AJAX Error: #{textStatus}")
      success: (data, textStatus, jqXHR) ->
        console.log("Dynamic media select OK!")

这基本上是监听下拉变化，然后将media_id 传递给控制器​​，然后这个 /views/../positions/update_positions.js.coffee 呈现第二部分（/views/ ../positions/_positions.html.erb):

$("#positions_table").empty()
  .append("<%= escape_javascript(render 'inventory/positions/positions', locals: {positions: @positions}) %>")

目前在更改下拉列表时，我无法进行第二部分 (_positions.html.erb) 渲染。 有什么想法可能有问题吗？感谢您的帮助。

更新

我在我的路线中设置了这个： get '/update_positions', to: 'inventory/positions#update_positions' 然后在控制器中我有这个：

def update_positions
  @positions = Positions::Positions.where('media_id = ?', params[:media_id])

当:media_id 被传递时，我在控制台Started GET "/update_positions?media_id=1" 中得到了这个结果，视觉上的结果与预期的一样。但是当我连续执行几个类似的请求时，就会发生奇怪的事情。看起来请求正在成倍增加，并且似乎有很多历史请求一次又一次地重复。我的假设是因为这个/update_positions?media_id=1 请帮忙，我做错了什么？

更新 2

首先，我调整了到实际控制器的路线： get '/inventory/positions/update_positions', to: 'inventory/positions#update_positions' 当我从/users/1/edit 之类的路线跳转时，以前的路线无法正常工作。

在我的 /views/inventory/positions/update_positions.js.coffee 我有这个：

$("#positions_table").empty()
  .append('<%=j render 'inventory/positions/positions'%>');

多个查询如下所示：

Started GET "/inventory/positions/update_positions?media_id=1" for 78.84.173.112 at 2016-12-20 05:29:39 +0000
  Parameters: {"media_id"=>"1"}  
  #several queries follow
Started GET "/inventory/positions/update_positions?media_id=1" for 78.84.173.112 at 2016-12-20 05:29:39 +0000
  Parameters: {"media_id"=>"1"}
  #several queries follow

当我打开特定视图时，会发生这种情况，从下拉列表中选择“值：1”并呈现特定的部分。然后我转到不同部分的另一个 AJAX 视图，然后返回并再次选择“值：1”。如果我多次这样做，那么查询会发生越来越多的复制。当我进行整页刷新时它会停止 - 然后一切都从正常位置开始，但是当我多次重复选择时，查询再次增长。

Answer 1

在application.html.erb中：

<!-- Main view  -->
<div id="yield">
  <div id="positions_index"></div>
  <%= yield %>
</div>

在位置/index.js.coffee：

$("#positions_index").html "<%= escape_javascript(render 'inventory/positions/index') %>"
$("#positions_index").on "change", "#media_list", (e) ->      
  $.get '/update_positions',
    media_id: $("#media_list option:selected").val()
  , null    

确保您在路线中定义了 update_positions。