Как сохранить формат даты на основе его категории?

Статистика has_many Результаты.

Когда пользователь переходит к редактированию стата, формат даты результата переключается на [Month][Day][Year], даже если категория была ежемесячной averaged, что означает, что формат даты должен оставаться [Month][Year].

stat.js

$(document).ready(function() 
{
  $('.date-format-switcher').click(function(event){
    event;
    if ($(this).attr('id') == 'stat_categories_instance') {
      $('.day').show();
     } else if ($(this).attr('id') == 'stat_categories_averaged') {
        $('.day').hide();
    }
})
  $('.add-form-padding').on('cocoon:after-insert', function(e, insertedItem) {
    if($('#stat_categories_instance').is(':checked')) {
      $('.day').show();
    } else {
        $('.day').hide();
    }
})
});

В _form пользователь выбирает категорию и может добавлять результаты:

<% Stat::CATEGORIES.each do |c| %>&nbsp;
  <span class="label label-primary">
  <%= label(c, c) %>:</span>
  <%= f.radio_button(:categories, c, :class => "date-format-switcher") %>
<% end %>

<%= f.fields_for :results do |result| %>
  <%= render 'result_fields', :f => result %>
<% end %>

<%= link_to_add_association f, :results do %>
  <span class="glyphicon glyphicon-plus"></span> Result
<% end %>

Чтобы прояснить проблему, когда пользователь переходит к редактированию _формы, _result_fields date_select сбрасывается как категория instance ([Month][Day][Year]), даже если он был отправлен как averaged ([Month][Year]).

<%= f.text_field :result_value, class: 'form-control', placeholder: 'Enter Result' %>
<%= f.date_select :date_value, :order => [:month, :day, :year], :with_css_classes => true, :class => "date-select" %>

Я думаю, что проблема связана с javascript, но если вам нужен дополнительный код или пояснение, пожалуйста, дайте мне знать:]

stat.rb

class Stat < ActiveRecord::Base
    belongs_to :user
    has_many :results
    accepts_nested_attributes_for :results, :reject_if => :all_blank, :allow_destroy => true #correct
    scope :averaged,  -> { where(categories: 'Averaged') }
    scope :instance,  -> { where(categories: 'Instance') }
    validates :categories, :metric, :results, presence: true

    CATEGORIES = ['Averaged', 'Instance']
end

ПО ЗАПРОСУ

<!DOCTYPE html>
<html>
<head>
  <title>Personal Control Center</title>
  <link rel="stylesheet" media="all" href="/assets/application-160f5c0baab5966f165d1ceda4baf96f.css" />
  <script src="/assets/application-3553266740dedab0ebae9bc455264add.js"></script>
  <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="0L0etiyhQeSadH9jJycPZun8eOh0WzPg2iy1djmdQOUJzyEwX+tVBKktlu5AhHd0Zyw6vlZUMzOosRcYAbvFbA==" />
  <meta name="description" content="Habits | Goals | Values | Stats" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">		<!-- Tells app to be mobile responsive -->
  <meta name="google-site-verification" content="Cd6S_eRTPmKoMPGhVcYjfFTeYsptlUiSQvdDajy1vmI" />
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="/">Personal Control Center</a>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul class="nav navbar-nav navbar-right">
    <li>
        <a href="/habits/new">
        <span class="glyphicon glyphicon-plus"></span> <b>Habit</b>
        </a></li>
    <li>
        <a href="/valuations/new">
        <span class="glyphicon glyphicon-plus"></span> <b>Value</b>
        </a></li>
    <li>
        <a href="/goals/new">
        <span class="glyphicon glyphicon-plus"></span> <b>Goal</b>
</a>    </li>
    <li>
        <a href="/stats/new">
        <span class="glyphicon glyphicon-plus"></span> <b>Stat</b>
</a>    </li>


    <li><a href="/activities">Feed</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Account 
      <b class="caret"></b>
      </a>
      <ul class="dropdown-menu">
        <li><a href="/users">Users</a></li>
        <li><a href="/users/1/edit">Settings</a></li>
        <li><a href="/about">About</a></li>
        <li><a rel="nofollow" data-method="delete" href="/logout">Log out</a></li>
        </li>
      </ul>
    </ul>
  </div>
</div>
</nav>
    <div class="jumbotron">
      <p class="text-center">
      	<div class="jumbtron">
		<div class="container">
		  <h1><b>Edit Stat</b></h1>
			  <p>If there is no struggle,<br>
			  	there is no progress. Positive anything <br>
			  	is better than negative nothing.
			  </p>
		</div>
	</div>
 <!-- this variable should be assigned in your controller action-->
      </p>
    </div>
    <div class="container-fluid">
      <div class="container">
        <div class="col-md-9">
          <script src="/assets/stat-7dc4e947c11e58375e6b13b6d489f73b.js"></script>

<form novalidate="novalidate" class="simple_form edit_stat" id="edit_stat_1" action="/stats/1" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="pu54sleLSOjc4xlsXm1d8jdOATUAxkYTLA+f4AIp6iR/nEc0JMFcCO+68OE5ziXguZ5DYyLJRsBekj2OOg9vrQ==" />
  

<div class="add-form-padding">
<form>
  
      <div class="form-group">
        &nbsp;
          <span class="label label-primary">
          <label for="Averaged_Averaged">Averaged</label>:</span>
          <input class="date-format-switcher" type="radio" value="Averaged" checked="checked" name="stat[categories]" id="stat_categories_averaged" />
&nbsp;
          <span class="label label-primary">
          <label for="Instance_Instance">Instance</label>:</span>
          <input class="date-format-switcher" type="radio" value="Instance" name="stat[categories]" id="stat_categories_instance" />
      </div>

      <div class="form-group">
        <input class="form-control" id="five" placeholder="Enter Action" type="text" value="Ran" name="stat[action]" />

        <input class="form-control" id="five" placeholder="Enter Metric" type="text" value="miles" name="stat[metric]" />
      </div>
      <div class="form-group">
        <input class="form-control" id="tags" placeholder="Enter Tag(s)" value="run" type="text" name="stat[tag_list]" />
      </div>

    <div id="results">
      
      <div class="nested-fields">
<div class="nested">
  <div class="form-group">
      <input class="form-control" placeholder="Enter Result" type="text" value="45" name="stat[results_attributes][0][result_value]" id="stat_results_attributes_0_result_value" />
    <div class="center">
        <select id="stat_results_attributes_0_date_value_2i" name="stat[results_attributes][0][date_value(2i)]" class="month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6" selected="selected">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="stat_results_attributes_0_date_value_3i" name="stat[results_attributes][0][date_value(3i)]" class="day">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="stat_results_attributes_0_date_value_1i" name="stat[results_attributes][0][date_value(1i)]" class="year">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015" selected="selected">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>

      <div class="bad-pad">
        <span class="label label-danger">Bad:</span>
        <input name="stat[results_attributes][0][bad]" type="hidden" value="0" /><input type="checkbox" value="1" name="stat[results_attributes][0][bad]" id="stat_results_attributes_0_bad" />
      </div>
      <div class="bad-pad">
        <span class="label label-danger">
            <input type="hidden" name="stat[results_attributes][0][_destroy]" id="stat_results_attributes_0__destroy" value="false" /><a class="remove_fields existing" href="#">
              <span class="glyphicon glyphicon-trash"></span> Delete
</a>        </span>
    </div>
  </div>
</div>
</div>
</div>

<input type="hidden" value="1" name="stat[results_attributes][0][id]" id="stat_results_attributes_0_id" />
      <div class="nested-fields">
<div class="nested">
  <div class="form-group">
      <input class="form-control" placeholder="Enter Result" type="text" value="27" name="stat[results_attributes][1][result_value]" id="stat_results_attributes_1_result_value" />
    <div class="center">
        <select id="stat_results_attributes_1_date_value_2i" name="stat[results_attributes][1][date_value(2i)]" class="month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5" selected="selected">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="stat_results_attributes_1_date_value_3i" name="stat[results_attributes][1][date_value(3i)]" class="day">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select id="stat_results_attributes_1_date_value_1i" name="stat[results_attributes][1][date_value(1i)]" class="year">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015" selected="selected">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>

      <div class="bad-pad">
        <span class="label label-danger">Bad:</span>
        <input name="stat[results_attributes][1][bad]" type="hidden" value="0" /><input type="checkbox" value="1" name="stat[results_attributes][1][bad]" id="stat_results_attributes_1_bad" />
      </div>
      <div class="bad-pad">
        <span class="label label-danger">
            <input type="hidden" name="stat[results_attributes][1][_destroy]" id="stat_results_attributes_1__destroy" value="false" /><a class="remove_fields existing" href="#">
              <span class="glyphicon glyphicon-trash"></span> Delete
</a>        </span>

ОТВЕТЫ

Ответ 1

Вопросы, которые я замечаю:

  • (minor) Вы привязываетесь к событию клика переключателя, а не к событию изменения. Имейте в виду, что это не сработает для тех, кто использует клавиатуру для заполнения формы.
  • При каждом изменении переключателя вы показываете/скрываете все поля дня на странице.
  • Повторное использование значений для ваших атрибутов id. Предполагается, что они уникальны на странице. Я не думаю, что это ваша проблема, но это может вызвать странные ошибки. Переключитесь на class.

Вот что я бы порекомендовал.

  • Оберните каждый "stat" в форме в div с классом, который указывает, усреднен ли он или экземпляр. т.е. <div class="stat averaged">.
  • Измените свой .erb, чтобы вывести правильные имена классов в div (так что это правильно, когда страница сначала загружается).
  • Измените свой javascript, чтобы изменить имя класса родительского div ($(this).closest('.stat').removeClass('averaged').addClass('instance');)
  • Установить правила css, чтобы скрыть поле дня для усредненных статистических данных (.stat.averaged .day { display: none; })