Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to keep date format based on its category?

Tags:

javascript

jquery

ajax

ruby

ruby-on-rails

Stats has_many Results.

When a user goes to edit a stat the result's date format switches to [Month][Day][Year] even if the category was a monthly averaged, which means the date format should have remained [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();
    }
})
});

In the _form the user chooses a category & can add results:

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

To further clarify the issue, when the user goes to edit the _form, the _result_fields date_select resets as an instance category ([Month][Day][Year]) even if it was submitted as an averaged category ([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" %>

I think the problem is with the javascript, but if you need further code or clarification please let me know :]

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

BY REQUEST

<!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>
like image 866
AnthonyGalli.com Avatar asked Jul 02 '15 17:07

AnthonyGalli.com

1 Answers

Issues that I notice:

  • (minor) You're binding to the click event of the radio button, rather than the change event. Be aware that this won't work for someone using a keyboard to fill out the form.
  • Whenever the radio button changes, you're showing/hiding all of the day fields on the page.
  • Reusing values for your id attributes. Those are supposed to be unique on the page. I don't think this is your issue, but it can cause weird bugs. Switch to class.

Here's what I would recommend.

  • Wrap each "stat" on the form in a div with a class that indicates if it's averaged or instance. i.e. <div class="stat averaged">.
  • Modify your .erb to output the right class names on the div (so it's correct when the page first loads).
  • Modify your javascript to change the class name of the parent div ($(this).closest('.stat').removeClass('averaged').addClass('instance');)
  • Setup css rules to hide the day field for averaged stats (.stat.averaged .day { display: none; })
like image 90
James Mason Avatar answered Sep 22 '22 01:09

James Mason
Sign in to Comment

Related questions

Facebook Javascript SDK and CSP
iron-router waitOn Meteor.user()
First item to insert into the mobile database isn't added
jQuery ui sortable inaccurate placeholder placement in nested sortables
Node.js server has no response
SWT Browser focus on next and previous highlight text
Soundcloud API works on Firefox but not on Safari or Chrome
How should project-level bundling be handled for non SPA use?
redirect to a new url after backend script
Emulating Geo Location in Chrome with moving
Recording audio from multiple microphones simultaneously with getUserMedia()
'Unable to delete property' on Safari when trying to delete dataset attribute in strict mode
Why do rendered pixels differ from real pixels?
Handle virtual keyboard on Windows 8 tablet
Pop the last state from history
data-loading-text not working
Inline MathJax not working with PageDown
Clear Angular JS templateCache once (for each deployment)
Sum red row of a table in javascript and then alter the table
Getting refresh tokens from Google with OAuth.io JS SDK (Client side)

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!