title: Rails render partial depending on value of collection select
body: <p>I am working on a classifieds based website, and I want to make the form adjust to the type of classified being entered by javascript.</p>
  
  <p>For example I have many types ie. Cars &amp;&amp; Mobile Phones</p>
  
  <p>I have three dropdowns that use coffee script to filter based on the previous input (code will be included below).</p>
  
  <p>I want the form to load a partial depending on the selected value in the last box.</p>
  
  <p>Have a look at the example below.</p>
  
  <p>The first dropdown is for category, then sub-category, then sub-sub-category.</p>
  
  <p>I want when the last box "Games" is selected for it to load the partial "_games.html.erb"</p>
  
  <p><img src="https://i.imgur.com/QHRvGSS.png" alt="an example"></p>
  
  <p>The Coffee Script I have for hiding and filtering the dropdowns is as follows</p>
  
  <pre><code>  jQuery -&gt;
    $('#classified_tag_list').autocomplete
      source: $('#classified_tag_list').data('autocomplete-source')
  
  
    $('#classified_sub_category_id').hide()
    $('#classified_sub_sub_category_id').hide()
    sub_category = $('#classified_sub_category_id').html()
  
    $('#classified_category_id').change -&gt;
      category = $('#classified_category_id :selected').text()
      options = $(sub_category).filter("optgroup[label='#{category}']").html()
      if (options)
        $('#classified_sub_category_id').html(options)
        $('#classified_sub_category_id').show()
        $('#classified_sub_sub_category_id').empty()
  
      else
        if(not category == 'Please select a category')
          $('#classified_sub_category_id').parent().hide()
          $('#classified_sub_sub_category_id').parent().hide()
        $('#classified_sub_category_id').empty()
        $('#classified_sub_category_id').empty()
        $('#classified_sub_sub_category_id').empty()
        $('#classified_sub_sub_category_id').empty()
  
  
  
  
    suburbs = $('#classified_sub_sub_category_id').html()
    $('#classified_sub_category_id').change -&gt;
      city = $('#classified_sub_category_id :selected').text()
      options = $(suburbs).filter("optgroup[label='#{city}']").html()
      if (options)
        $('#classified_sub_sub_category_id').html(options)
        $('#classified_sub_sub_category_id').show()
      else
        $('#classified_sub_sub_category_id').empty()
        $('#classified_sub_sub_category_id').hide()
  </code></pre>
  
  <p>So how do I use javascript to load the partial depending on the value of the last dropdown?</p>
  
  <p>[EDIT]</p>
  
  <p>I looked at <a href="https://stackoverflow.com/questions/14592642/dynamic-partial-based-on-select-box-rails-2-3-5">Dynamic Partial Based on Select Box - Rails 2.3.5</a></p>
  
  <p>and this is what I have</p>
  
  <pre><code>_form.html.erb
  
      &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
    $('#classified_sub_sub_category_id').change(function() {
      $.ajax({ url: '/classifieds/form_partial/'+ this.value });
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>routes.rb
  
    resources :classifieds do
      match "/form_partial/:id" =&gt; "classifieds#form_partial" 
    end
  </code></pre>
  
  <hr>
  
  <pre><code>classifieds_controller.rb
  
  def form_partial
    @category = Category.find(params[:id])
  end
  </code></pre>
  
  <hr>
  
  <pre><code>form_partial.js.erb
  
   &lt;% if @category == 1 %&gt;
     $('#classified_sub_sub_category_id').after('&lt;div id="product_partial"&gt;&lt;%= escape_javascript render('/forms/cars') %&gt;&lt;/div&gt;');
   &lt;% else %&gt;
     $('#classified_sub_sub_category_id').after('&lt;div id="product_partial"&gt;&lt;%= escape_javascript render('/forms/cars') %&gt;&lt;/div&gt;');
  &lt;% end %&gt;
  </code></pre>
  
  <hr>
  
  <p>But that gives the error</p>
  
  <pre><code>undefined method `render' for #&lt;#&lt;Class:0xa0805fc&gt;:0xb574788&gt;
    (in /home/james/hustle/app/assets/javascripts/form_partial.js.erb)
  </code></pre>