Rails Ajax 在保留参数时刷新部分

Posted 2023-05-09

【中文标题】Rails Ajax 在保留参数时刷新部分

【英文标题】：Rails Ajax Refresh Partial while persisting params

【发布时间】：2016-08-14 09:24:53

【问题描述】：

我有一个带有称为“调用”的控制器/视图的 Rails 应用程序。这是 index 的基本控制器操作：

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

以下是我的看法：

index.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
  );

index.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。

这在控制器和视图中运行良好，但这是我的问题。我的 index.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 语法错误，或者我没有正确关闭函数。

【参考方案1】：

如果我理解正确，您希望通过 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 中可用 您可以将其传递给您尝试渲染的其他部分。

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

如果您有兴趣请测试一下并回复我:)

【讨论】：

感谢您的建议。我剪切/粘贴了这个，我在 _assigned_calls.html.erb 的第 5 行得到undefined local variable or method region'` 这是有问题的行：` `有什么想法吗？

我可以通过将第 5 行更改为 使用 params[:region] 而不是局部变量 region。不知道为什么它没有正确连接。

当我在 option_from_collection_for_select 中使用参数时，它可以正常工作，但是 javascript 从索引中给出“calls?utf8=✓&region[area]=4:6387 Uncaught SyntaxError: Unexpected token)”。 html.erb.

这是我根据您提供的内容使用的代码。

@Nikola Đuza 这非常有用！