Rails Ajax 刷新部分，同时持久化参数

Rails Ajax Refresh Partial while persisting params

本文关键字：持久化 参数 Ajax 刷新部 Rails      更新时间：2023-09-26

我有一个Rails应用程序，带有一个名为"calls"的控制器/视图。 以下是索引的基本控制器操作：

calls_controller.rb 

def index
    if params[:region].present?
      @assigned = Call.where(region_id: params[:region][:area]).assigned_calls.until_end_of_day
      @unassigned = Call.where(region_id: params[:region][:area]).unassigned_calls.until_end_of_day
   else
     @assigned = Call.assigned_calls.until_end_of_day
     @unassigned = Call.unassigned_calls.until_end_of_day
   end
  end

以下是我的观点：

索引.js.erb

$('#active').html("<%= escape_javascript render :partial => 'calls/assigned_calls', :locals => {:assigned_calls => @assigned} %>");
$('#inactive').html("<%= escape_javascript render :partial => 'calls/unassigned_calls', :locals => {:unassigned_calls => @unassigned} %>"); 
$(".select").select2({
        placeholder: "Select One",
        allowClear: true
  });

索引.html.erb

<div id="active">
  <%= render "assigned_calls" %>
</div>
<div id="inactive">
  <%= render "unassigned_calls" %>
</div>

<script>
$(document).ready(function() {
    setInterval(function () {
            $.ajax('calls/<%= params[:region][:area] %>');
    } , 5000);
});
</script>

_assigned_calls.html.erb（查看代码省略）

<%= form_tag calls_path, :method => 'get' do %>
  <p>
<%= select_tag "region[area]", options_from_collection_for_select(Region.order(:area), :id, :area, selected: params[:region].try(:[], :area)), prompt: "Choose Region" %>
<%= submit_tag "Select", :name => nil, :class => 'btn' %>

所以正在发生的事情是在页面加载时，如果我没有传递 ：region 的参数，它会设置调用而不按区域限定范围。 如果存在region_id则它限定region_id为"1"或从submit_tag传递的区域 ID 的任何调用范围。

这在控制器和视图中工作正常，但是这是我的问题。 我的索引.html.erb 我需要在不干扰传递的参数的情况下刷新部分。 所以在 setInterval 上，我需要弄清楚如何在保留 URL 中传递的参数的同时重新加载部分。

我试图使用 setInterval 方法解决这个问题，但我不确定我在这里 100% 做什么。

有人可以给我一些关于如何在保留参数的同时每 5 秒刷新一次部分的建议，以便我的实例变量通过刷新持续存在？

如果您需要更多上下文和/或代码，请告诉我。

更新尝试根据用户的回答重新设计javascript，这就是我所拥有的。

<script>
  $(document).ready(function() {
    setInterval(function () {
      $.ajax({
        url: 'calls_path',
        type: "GET",
        data: { "region": '<%= @region.html_safe %>' }
      }), 5000);
    });
  });
</script>

该页面将加载，但是当它尝试在chrome检查器中触发时，我得到： 

calls?utf8=✓&region[area]=3:2901 Uncaught SyntaxError: Unexpected token )

也许这是一个JS语法错误，或者我没有正确关闭函数。

如果我

理解正确，您希望通过对控制器的 AJAX 调用以某种方式将参数流水线化，返回到刷新部分的js.erb文件？

我的建议是将传递的参数设置为控制器中的实例变量，如下所示：

calls_controller.rb

def index
  if params[:region].present?
    @region = params[:region]
    @assigned = Call.where(region_id: params[:region][:area]).assigned_calls.until_end_of_day
    @unassigned = Call.where(region_id: params[:region][:area]).unassigned_calls.until_end_of_day
  else
    @assigned = Call.assigned_calls.until_end_of_day
    @unassigned = Call.unassigned_calls.until_end_of_day
  end
end

现在，您的@region实例变量将在您的index.js.erb中可用您可以在其中将其传递给您尝试渲染的其他部分。

索引.js.erb

$('#active').html("<%= escape_javascript render :partial => 'calls/assigned_calls', :locals => { :assigned_calls => @assigned, :region => @region } %>");
$('#inactive').html("<%= escape_javascript render :partial => 'calls/unassigned_calls', :locals => { :unassigned_calls => @unassigned, :region => @region } %>");

_assigned_calls.html.erb

<%= form_tag calls_path, :method => 'get' do %>
  <%= select_tag "region[area]", options_from_collection_for_select(Region.order(:area), :id, :area, selected: region.try(:[], :area)), prompt: "Choose Region" %>
  <%= submit_tag "Select", :name => nil, :class => 'btn' %>
<% end %>

另外，我认为在您的index.html.erb脚本标签中更好地练习就是这样做：

<script>
   $(document).ready(function() {
     setInterval(function () {
       $.ajax({
         url: 'calls_path',
         type: "GET",
         data: { "region": '<%= @region.html_safe %>' }
       });
     }, 5000);
   });
</script>

如果您有兴趣，请对此进行测试，并:)回复我

相关文章：