-3

I'm using the Dependent-Fields gem. It's basically JavaScript, that reacts on the "js-dependent-fields" class. The following code works as intended: 

<div class="panel-body">
 <div class="form-group">
  <%= f.label :brand %>
  <%= f.select(:brand, Brand.pluck(:company).uniq, {prompt:true}, {class: 'form-control'}) %>
 </div>
 <% Brand.all.each do |b| %>
  <div class="form-group js-dependent-fields" data-option-value="<%= b.company %>" data-select-id="warehouse_brand">
    <%= f.label :category %>
    <%= f.collection_select(:category, Group.where(brand: b.company), :brand, :name1, {prompt:true}, {class: 'form-control'}) %>
  </div>
<% end %>

The thing is the loop creates the right amount of div's (each) with a style="display:none;". But when I want to save the form, Rails gets confused because there are multiple "category" form fields. The result is: nothing gets saved in the "category" record. The HTML output:

<div class="form-group">
  <label for="warehouse_brand">Brand</label>
  <select class="form-control" name="warehouse[brand]" id="warehouse_brand">
    <option selected="selected" value="Adidas">Adidas</option>
    <option value="Nike">Nike</option>
    <option value="Fila">Fila</option>
</div>
<div class="form-group js-dependent-fields" data-option-value="Adidas" data-select-id="warehouse_brand" style="">
  <label for="warehouse_category">Category</label>
  <select class="form-control" name="warehouse[category]" id="warehouse_category">
    <option value="">Please select</option>
    <option value="Adidas">Shoes</option>
    <option value="Adidas">Shirts</option>
  </select>
</div>
<div class="form-group js-dependent-fields" data-option-value="Nike" data-select-id="warehouse_brand" style="display: none;">
  <label for="warehouse_category">Category</label>
  <select class="form-control" name="warehouse[category]" id="warehouse_category">
    <option value="">Please select</option>
  </select>
</div>
<div class="form-group js-dependent-fields" data-option-value="Fila" data-select-id="warehouse_brand" style="display: none;">
  <label for="warehouse_category">Category</label>
  <select class="form-control" name="warehouse[category]" id="warehouse_category">
    <option value="">Please select</option>
  </select>
</div>

I guess that Rails does not know which of the form fields has to be saved because of the loop (which is necessary unfortunately). Do you have a solution for that?

CottonEyeJoe
  • 680
  • 1
  • 7
  • 24

3 Answers3

3

In order to disable fields from submitting with forms. You have to disabled fields. e.g.

$("input").prop('disabled', true);

It will disabled the fields and these fields are not submitted with the form. In order to enable the fields use this 

$("input").prop('disabled', false);

In your case, You should try this.

$( "#submit_form" ).click(function() {
  $('.js-dependent-fields:hidden').prop('disabled', true);
});

Your code will work. Only if you provide the correct selectors in above code. Or may be you empty the content by 

$('.js-dependent-fields:hidden').html('');
Farhan Akram
  • 39
  • 3
  • I think we are near to a solution, but the above code does not work. I put it inside my application.js file and even changed the id from #submit_form to the actual id of the form. – CottonEyeJoe Dec 16 '15 at 08:12
  • I get it to work in part. How can I switch back if the div gets visible again, so the disabled attribute gets deleted? – CottonEyeJoe Dec 16 '15 at 09:11
  • No. It just disabled it. Not deleted it. And also you hide the div element. It just prevents from going into form. If you disabled it by `$("input").prop('disabled', true);` After disabling it you can enable it by `$("input").prop('disabled', false);` – Farhan Akram Dec 16 '15 at 09:45
  • For further, please go through the following link http://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery/1414366#1414366 – Farhan Akram Dec 16 '15 at 09:50
2

Rails has a built in mechanism for handling nested forms.

Lets say you have:

class Company < ActiveRecord::Base
  has_many :brands
  accepts_nested_attributes_for :brands
end

class Brand < ActiveRecord::Base
  belongs_to :company
end

class CompaniesController < ApplicationController
  def new
    @company = Company.new
    @company.brands.new # seeds the form with a new record for brands
  end

  def edit
    @company = Company.find(params[:id])
    @company.brands.new # seeds the form with a new record for brands
  end
end

Since Company accepts_nested_attributes_for :brands we can create a company and brands at the same time by passing params[:company][:brands_attributes]. Fortunately we don't have to do this manually.

<%= form_for(@company) do |f| %>
  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name %>
  </div>
  <fieldset>
    <legend>Brands</legend>
    <%= f.fields_for(:brands) do |brand_fields| %>
      <%= brand_fields.label :foo %>
      <%= brand_fields.text_field :foo %>
    <% end %>
  </fieldset>
<% end %>

This will use an array format for the name attributes:

<input name="company[brands_attributes][0][foo]" #...
max
  • 76,662
  • 13
  • 84
  • 137
  • When it comes to the rest of your form i'm kind of at loss since its a mess of queries going every which way. You should review your models and setup proper relations instead and then do the queries in your controller with joins so that you don't get n+1 query issues. – max Dec 14 '15 at 09:54
  • 1
    I gave an upvote just because of the depth of the answer ^_^ – Richard Peck Dec 14 '15 at 10:33
0

The Dependent-Fields gem only set the non-selected fields as hidden. It add following css style to the fields

 style="display: none;"

Fields are submitted even if display is set to 'none' in modern browsers. I think following code will fix the issue.

$( "#submit_form" ).click(function() {
  $('.js-dependent-fields:hidden').html('');
});

This code will help to send right parameters to actions.

Muhammad Ali
  • 71
  • 5