title: How use a ruby code inside the javascript
body: <p>I am implementing a live search with a drop down containing multiple fields to filter through.It starts with only one search field, a drop down to select what to be searched for and a button to add more filters, when the user click the button, it generate a new field like this:<a href="https://i.stack.imgur.com/ehy9I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ehy9I.png" alt="enter image description here"></a></p>
  
  <p>This image sample was done hard coded with the html inside the JavaScript. The problem is that I will use it in a lot of views so I need it to be dynamic as the code I previously done with Ruby to generate the first search field. I tried doing this way, but no success was achieved.</p>
  
  <p><strong>live_search.js.erb</strong></p>
  
  <pre><code>$(function () {
  
      function search() {
          $.get(window.location.href, { object_columns: $("select#object_columns").val(), search: $("#search").val() }, null, "script");
      };
  
      $("select#object_columns").change(search);
      $("input#search").keyup(search);
  
      $('button').on('click',function(){
        column = "&lt;%= j render 'shared/search_engine' %&gt;";
        $('#search-form').after(column);
      });
  });
  </code></pre>
  
  <p><strong>search_engine.html.erb</strong></p>
  
  <pre><code>&lt;div id="search-form"&gt;
    &lt;%= form_tag do %&gt;
    &lt;% valid_column_names = target.column_names.reject{|r| r == "created_at" || r == "updated_at" || r == "slug"} %&gt;
    &lt;%= select_tag :object_columns, options_for_select(valid_column_names) %&gt;
    &lt;%= text_field_tag :search, '', autocomplete: :off %&gt;
    &lt;% end %&gt;
    &lt;%= button_tag "+" %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I even tried to call the "search-form" in the JavaScript to replicate the code when the button was clicked but I read that it is not possible.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I made some changes as @ppascualv suggested, but I still can't render and add another "search_engine" when I click the button. I am getting an error saying <em>undefined method 'render'</em>.</p>
  
  <p><strong>live_search.js.erb</strong></p>
  
  <pre><code>$(function () {
  
      function search() {
          $.get(window.location.href, { object_columns: $("select#object_columns").val(), search: $("#search").val() }, null, "script");
      };
  
      $("select#object_columns").change(search);
      $("input#search").keyup(search);
  
      $('button').on('click',function(){
        $('button').append("&lt;%= escape_javascript(render @search_engine) %&gt;");
      });
  });
  </code></pre>
  
  <p><strong>search_engine.html.erb</strong></p>
  
  <pre><code>&lt;div id="search-form"&gt;
    &lt;%= form_tag({controller: "house_activities", action: "index"}, method: "get", remote: true) do %&gt;
    &lt;%  valid_column_names = HouseActivity.column_names.reject{|r| r == "created_at" || r == "updated_at" || r == "slug"} %&gt;
    &lt;%= select_tag :object_columns, options_for_select(valid_column_names) %&gt;
    &lt;%= text_field_tag :search, '', autocomplete: :off %&gt;
    &lt;% end %&gt;
    &lt;%= button_tag "+" %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>house_activities_controller.rb</strong></p>
  
  <pre><code>class HouseActivitiesController &lt; ApplicationController
    before_action :set_house_activity, only: [:show, :edit, :update, :destroy]
  
    def index
      @house_activities = HouseActivity.page(params[:page]).per(5).search_for(params[:object_columns], params[:search])
      respond_to do |format|
        format.js
        format.html
      end
    end
  end
  </code></pre>