title: Filtering table with dropdown menu - extra unwanted code displayed on the page
body: <p>Overflowers,</p>
  
  <p>I was trying to build a table which would be filtered by dropdown menu selection. The whole proccess works in this way:</p>
  
  <p><strong>Index.html.erb</strong></p>
  
  <pre><code>render "selection"
  </code></pre>
  
  <p>This partial gives us a dropdown menu with selections.</p>
  
  <p><strong>_selection.html.erb</strong></p>
  
  <pre><code>  &lt;%= select_tag :area_selection,
                  options_from_collection_for_select(Maps.all, :id, :location),
                  :remote =&gt; 'true',
                  :onchange =&gt; 'location_request(this.value);' %&gt;
  </code></pre>
  
  <p>Selection from dropdown menu is being sent to a JS (which is located on index.html.erb)</p>
  
  <p><strong>location_request javascript</strong></p>
  
  <pre><code>  function location_request(area_selection){
    jQuery.ajax({
      url: "/location_filter",
      type: "GET",
      data: { "requested_area" : area_selection },
      dataType: "script",
      success: function(data){
        // You are the winner :)
      },
      error: function(data){
        console.log(data);
      }
    })
  }
  </code></pre>
  
  <p>From here, a variable is being sent to a controller</p>
  
  <p><strong>controller</strong></p>
  
  <pre><code>def location_filter
      @filtered_locations = Post.where("location" =&gt; params[:requested_area])
      respond_to do |format|
        format.js
      end
     end
  </code></pre>
  
  <p>In this stage, the location filter method returns a new "table" with filtered elements to a location_filter.js.erb</p>
  
  <p><strong>location_filter.js.erb</strong> </p>
  
  <p><code>$('#info').html("&lt;%= escape_javascript(render partial: 'filtered_table')%&gt;");</code></p>
  
  <p>Here, a table is being imported to a #info div on a website via table partial</p>
  
  <p><strong>_filtered_table.html.erb</strong></p>
  
  <pre><code>&lt;table class="table table-striped table-hover"&gt;
  
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Location&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;
        &lt;%= @filtered_locations.each do |filtered| %&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;%= filtered.location %&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;% end %&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <p>And this is the final format of the table which works perfectly fine as for a beginner.
  The issue I face is that I get an extra table in text format which is being added on the same #info div</p>
  
  <p>So it's the main issue - there is unwanted data displayed on the page in yellow. It needs to be removed somehow.</p>
  
  <p><a href="https://i.stack.imgur.com/NlqWi.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NlqWi.jpg" alt="enter image description here"></a></p>
  
  <p>Question:
  As far as I understand, the extra outcome is being made in controller (?) and then added to a front view.
  What causes this duplicate of a table and how to avoid having it? :) Lame questionz</p>