I'm having some trouble with implementing an ordered list in my rails application. I've been using the cocoon gem for a some nested forms and everything's working functionality wise, however, i cant seem to render an ordered list to make the nested form more readable.
to start my code looks like this _form.html.erb
....
<div class="clearfix">
<div class="col-lg-3 col-md-6">
<ol>
<%= f.label :Movement %>
<%= f.fields_for :movements do |movement| %>
<li><%= render 'movement_fields', f: movement %></li>
<% end %>
<div class="links">
<%= link_to_add_association 'Add movement', f, :movements, class: "pull-right d-inline-block btn btn-primary add-button" %>
</ol>
</br>
</br>
</div>
</div>
.....
_movement_fields.html.erb
<div class="nested-fields">
<li><%= f.text_field :name %></li>
<%= link_to_remove_association "Remove", f, class: "pull-left d-inline-block form-button btn btn-warning" %>
</div>
exercise.js
$(document).ready(function() {
$('#exercise_workout_date').datepicker({ dateFormat: 'yy-mm-dd' });
new Morris.Line({
// ID of the element in which to draw the chart.!
element: 'chart',
// Chart data records -- each entry in this array corresponds to a point on!
// the chart.!
data: $('#chart').data('workouts'),
// The name of the data record attribute that contains x-values. xkey: 'workout_date',!
// A list of names of data record attributes that contain y-values. ykeys: ['duration_in_min'],!
// Labels for the ykeys -- will be displayed when you hover over the // chart.!
xkey: 'workout_date',
ykeys: ['duration_in_min'],
labels: ['Duration (min)'],
xLabels: "day",
xLabelAngle: 60,
xLabelFormat: function (x) {
date_string = x.getFullYear() + "/" + parseInt(x.getMonth() + 1) + "/" + x.getDate();
return date_string;
},
yLabelFormat: function(y) { return y + ' min'; }
});
});
$('#list').html('<li>foo</li>');
application.js
//= require jquery
//= require jquery-ui/datepicker
//= require jquery_ujs
//= require jquery.raty.min
//= require chosen-jquery
//= require bootstrap-sprockets
//= require raphael.min
//= require morris
//= require social-share-button
//= require html.sortable
//= require cocoon
// require turbolinks
//= require_tree .
application.html
<!DOCTYPE html>
<html>
<head lang=”en”>
<title>FitnessLabs (A & K LABS)</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= favicon_link_tag 'logo.ico' %>
<link href="https://fonts.googleapis.com/css?family=Doppio+One|Pacifico" rel="stylesheet">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body>
<%= render "layouts/navigation2"%>
<div class="container-fluid">
<%= render 'layouts/messages'%>
<%= yield %>
</div>
<%= render "layouts/footer" %>
</body>
<script src="//load.sumome.com/" data-sumo-site-id="c5bf8251f90d125ef3264df7e976b4ab5a4a5a380ab1deaec05444284b2169d0" async="async"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
</html>
Currently this code renders a 1. for the first list item, however, when i click 'add movement' it doesn't render the 2. 3. 4. etc. for each successive part of the form. I've tried moving the < ol> and < li>'s around but this is the closest i've come.
I want the user to be shown 1, 2, 3 etc. for each new nested form partial thats rendered, so it makes it clearer which coincides with which. How would i go about doing this? Am i on the right path?
Thanks,
