如何根据类别保留日期格式？

Question

如何根据类别保留日期格式？

Ant*_*com 10 javascript ruby ajax jquery ruby-on-rails

统计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();
    }
})
});

Run Code Online (Sandbox Code Playgroud)

在_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 %>

Run Code Online (Sandbox Code Playgroud)

为了进一步说明问题,当用户编辑_form时,_result_fields将 date_select重置为instancecategory([Month][Day][Year]),即使它是作为averagedcategory([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" %>

Run Code Online (Sandbox Code Playgroud)

我认为问题在于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

Run Code Online (Sandbox Code Playgroud)

按要求

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jam*_*son 1

我注意到的问题：

（次要）您绑定到单选按钮的单击事件，而不是更改事件。请注意，这对于使用键盘填写表格的人来说不起作用。
每当单选按钮更改时，您就会显示/隐藏页面上的所有日期字段。
重用属性的值id。这些在页面上应该是唯一的。我认为这不是你的问题，但它可能会导致奇怪的错误。切换到class。

这是我的推荐。

将表单上的每个“stat”包装在一个 div 中，并使用一个类来指示它是平均值还是实例。IE <div class="stat averaged">。
修改您的 .erb 以在 div 上输出正确的类名（因此在页面首次加载时它是正确的）。
修改你的 javascript 以更改父 div 的类名 ( $(this).closest('.stat').removeClass('averaged').addClass('instance');)
设置 CSS 规则来隐藏平均统计数据的日期字段 ( .stat.averaged .day { display: none; })

归档时间：	10 年，3 月前
查看次数：	219 次
最近记录：	10 年，3 月前