Rails Ajax Refresh Partial while persisting params
<p>I have a Rails app with a controller/view called "calls".  Here is the basic controller action for index:</p>

<p><strong>calls_controller.rb</strong></p>

<pre><code>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
</code></pre>

<p>Here are my views:</p>

<p><strong>index.js.erb</strong></p>

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

$(".select").select2({
        placeholder: "Select One",
        allowClear: true
  });
</code></pre>

<p><strong>index.html.erb</strong></p>

<pre><code>&lt;div id="active"&gt;
  &lt;%= render "assigned_calls" %&gt;
&lt;/div&gt;

&lt;div id="inactive"&gt;
  &lt;%= render "unassigned_calls" %&gt;
&lt;/div&gt;


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

<p><strong>_assigned_calls.html.erb (view code omitted)</strong></p>

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

<p>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.</p>

<p>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.</p>

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

<p>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?</p>

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

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

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

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

<pre><code>calls?utf8=✓&amp;region[area]=3:2901 Uncaught SyntaxError: Unexpected token )
</code></pre>

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