Rails Ajax Refresh Partial while persisting params

Question

I have a Rails app with a controller/view called "calls". Here is the basic controller action for 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

Here are my views:

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 (view code omitted)

<%= 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' %>

So what's happening is on page load if I do not have the params of :region passed it sets the calls without being scoped by region. If region_id is present then it scopes calls where region_id is "1" or whatever the Region ID is that is passed from the submit_tag.

This works fine in the controller and view, however here's my problem. My index.html.erb I need to refresh the partials WITHOUT disturbing the params passed. So on setInterval I need to figure out how to reload the partials while persisting the params passed in the URL.

I tried to figure this out using a setInterval method but I'm not sure what I'm doing here 100%.

Can someone give me some advice on how to refresh the partials every 5 seconds while persisting the params so my instance variables persist through refresh?

If you need more context and/or code please let me know.

Update Trying to rework the javascript based off an answer from a user and here's what I have.

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

The page will load but when it tried to trigger in the chrome inspector I get:

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

Maybe this is a JS syntax error or I'm not closing the function properly.

Answer 1

If I understood properly, you want to have your parameters somehow pipelined through AJAX call to your controller, back to your js.erb file where it refreshes the partials?

My advice is to set passed parameters as instance variables in your controller like this:

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

Now your @region instance variable will be available in your index.js.erb where you can pass it to other partials you are trying to render.

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

Also, I think that better practice in your index.html.erb script tag is to do it like this:

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

Please test this out if you're interested and get back to me :)