Databases
StackOverflow2013
Postsdbo
POUpdate select tag dynamically with ajax in rails
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUpdate select tag dynamically with ajax in rails
    text
    copied!<p>I have two dropdowns in a view, and I'm attempting to update the second dropdown options based on the selected value from the first dropdown.</p> <p>I am aware of the Railscasts on this topic, but I do not want to use the grouped collections; The reasons for this are primarily that the user can select from one dropdown, or the other, and the results are filtered accordingly, the second dropdown <strong>only</strong> filters its options when a value from the first dropdown is selected.</p> <p>My question is, how can I re-populate the select_tag options from a js.erb file?</p> <p><strong>form</strong></p> <pre><code> &lt;%= form_tag("filter", :id =&gt; "filter_form", :method =&gt; "post") do %&gt; &lt;label for="company_id" class="company"&gt;Company&lt;/label&gt;&lt;%= select_tag(:company_id, options_from_collection_for_select(Company.all.order(:name), :id, :name), :prompt =&gt; "All Companies") %&gt; &lt;label for="product_id" class="product"&gt;Product&lt;/label&gt;&lt;%= select_tag(:product_id, options_from_collection_for_select(Product.all.order(:name), :id, :name), :prompt =&gt; "All Products") %&gt; &lt;% end %&gt; </code></pre> <p><strong>js.coffee</strong></p> <pre><code> $('#company_id').change( -&gt; sendFilterForm() ) sendFilterForm = -&gt; $.get($('#filter_form').attr('action'), $('#filter_form').serialize(), 'script') </code></pre> <p><strong>controller</strong></p> <pre><code>@filterProducts = true @products = Product.where(company_id: params[:company_id]).order(:name) </code></pre> <p><strong>js.erb</strong></p> <pre><code>&lt;% if @filterProducts %&gt; $('#product_id').html(&lt;%= options_from_collection_for_select(@products, :id, :name) %&gt;); &lt;% end %&gt; </code></pre> <p>So the last part is obviously quite wrong, but that is the concept of what I am trying to do. What is the proper way to accomplish this? I am open to rework this, if needed, any help is appreciated.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload