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

标签 javascript jquery ruby-on-rails ruby ajax

统计 has_many 结果。

当用户编辑统计数据时，结果的日期格式会切换为[Month][Day][Year]，即使该类别是每月平均，这意味着日期格式应该保持 [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 %>

为了进一步澄清问题，当用户去编辑 _form 时，_result_fields date_select 重置为 instance 类别([月][日][年])，即使它是作为平均类别提交的([月][年])。 

<%= 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>

最佳答案

我注意到的问题:

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

这是我要推荐的。

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

关于javascript - 如何根据类别保留日期格式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31190693/

上一篇：javascript - PDF Js 在 meteor 中不起作用

下一篇：javascript - 使用 OAuth.io JS SDK(客户端)从谷歌获取刷新 token

相关文章：

jquery - 创建一个像 p2media.de 这样的网站

jquery - 样式 anchor 和 li 元素 css

html - 在事件管理资源的索引中呈现带有表单操作的自定义表单

ruby-on-rails - Rails 3 中按多列对行进行高效排序

javascript - 为什么 React 说 “Invalid prop ` Children`” 类型是对象而不是函数？

javascript - 如何在 High Chart 中的一系列数据中显示不同的工具提示格式

javascript - 多个 div 崩溃 : close one element if other is open (jQuery)

ruby-on-rails - 回形针 gem 删除嵌套属性的文件

更改 HTML 的 JavaScript 函数不起作用

javascript - 最后一行不等到长时间运行循环结束

©2024 IT工具网  联系我们