Проблема с реализацией <ol> <li> с частичным рельсов и гемом кокона

Question

Проблема с реализацией <ol> <li> с частичным рельсов и гемом кокона

У меня возникли проблемы с реализацией упорядоченного списка в моем приложении rails. Я использовал камень-кокон для некоторых вложенных форм, и все работающие функциональные возможности мудры, однако я не могу отобразить упорядоченный список, чтобы сделать вложенную форму более удобочитаемой.

для начала мой код выглядит следующим образом _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>

В настоящее время этот код отображает 1. для первого элемента списка, однако, когда я нажимаю "добавить движение", он не отображает 2. 3. 4. и т. Д. Для каждой последующей части формы. Я пытался переместить

вокруг, но это самое близкое, к которому я пришел.
Я хочу, чтобы пользователю отображались 1, 2, 3 и т. Д. Для каждой новой вложенной частичной формы, которая отображается, поэтому она становится понятнее, с которой совпадает. Как я буду делать это? Я на правильном пути?
Спасибо,

1

html ruby-on-rails ruby forms cocoon-gem

Источник

user7152855 19 фев '17 в 01:50

2 ответа

Другие вопросы по тегам html ruby-on-rails ruby forms cocoon-gem

user4289112 22 мар '17 в 21:33 2017-03-22 21:33 · Answer 1 · 2017-03-22 21:33

Выяснилось, что сборщик дат плохо работает из-за ручного тестирования методом грубой силы, пока я не получил рабочую версию.

Виновник - один из этих парней...

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

Я бы посоветовал медленно добавлять их по порядку, в порядке наибольшего доверия... пока они снова не сломают JavaScript. Обновление номеров заказа должно сработать, если вы попробуете его после того, как вытащите все элементы, перечисленные выше, а также средство выбора даты (обязательно удалите скрипт datepicker, который вы добавили в свои представления) - читайте ниже, чтобы узнать, как устранить неполадки и исправить их.,

Rails - конвейер активов Link - Javascript устранение неисправностей...

Сначала мы должны решить, является ли это проблемой загрузки - Откройте консоль веб-браузера и проверьте elements для ваших имен файлов js... увидел, что кокон был загружен в разделе "элементы"
Открыл файл /layouts/application.html.erb и удостоверился, что был только один javascript_include_tag.
Также, что javascript_include_tag был в теге и что заголовок тега правильно закрыт
Ищите другие несущественные или дополнительные служебные файлы загрузки... Sumo генерировал 4 ошибки в консоли Chrome, поэтому я прокомментировал это
Проверил папку /app/assets/javascript для файла application.js, а также на отсутствие файлов.coffee (rails autos их) ... по какой-то причине у вас есть app/assets/javascript/exercise.coffee появляется в каталоге
Проверьте внутри файла application.js...
Проверьте порядок загрузки файлов /app/assets/javascript/application.js... у вас неправильный... //= require_tree .... обязательно должно быть внизу, иначе у вас будут проблемы, включая все файлы.
Кроме того, у вас было два файла, которые не имели необходимых, //= перед ними. Требуется загрузить их
Убедитесь, что в представлениях не загружаются дополнительные скрипты, я перехожу к своей рабочей директории и grep -r 'script' /app & проверьте любое место, которое появляется... Я нахожу скрипты в ваших файлах просмотра вместо файлов ресурсов для javascript... Если актив ресурса загружается, мы знаем, что это либо конфликт, либо плохо написанный код
Вставьте часть тестового кода в консоль, чтобы, когда $.document или турболинки закончили загрузку, чтобы увидеть, плохой ли он код... они сообщат на консоль строку ("Page - Loaded") в моем случае,
Если он не загружается, это конфликт с другими файлами Java, если он загружается, это просто ваш код должен быть исправлен
Я вытягиваю все записи из application.js, за исключением файла test.js (посмотрите, как записать, чтобы записать js в консоль)
На этом этапе он должен работать, если все до того, как он прошел... если нет, у вас могут быть поврежденные файлы... вы должны зайти в application.html.erb и использовать javascript_include_tag, чтобы включить CDN-версию Jquery (Google google)
Предполагая, что test.js работает...... во-первых, в вашем app/assets/javascript/application.jsвнизу файла вверх //= . и сохраните его...... теперь вы должны заново добавить файлы js в app/assets/javascript по одному, каждый раз тестируя, обновляя веб-страницу......, возможно, перезагружая сервер после копирования файла и выполнения ресурсов rake или rails, как показано ниже... rails assets:clean & rails assets:precompile

user4289112 09 мар '17 в 20:13 2017-03-09 20:13 · Answer 2 · 2017-03-09 20:13

Оригинал:

Так что проблема в том, что HTML до 5 не рендерится, когда ваш jquery запускает добавление поля.

Решение здесь открыто, вы используете любое количество технологий для решения этой проблемы, так как на самом деле это не связано с коконом или рельсами.

Я предлагаю, так как у вас уже есть кокон, просто укажите один из двух вариантов ниже в пользовательских файлах обратного вызова кокона (app/assets/javascript/), вы можете использовать обратный вызов после вставки для...

Вариант А

Вы используете JQuery, чтобы заставить <OL> список для рендеринга снова, позволяя HTML5 сделать всю остальную работу за вас. Показанный в этом посте... как "обновить" UL после добавления нового LI с помощью jQuery?

Вариант Б

Запустить счетчик полей и ввести это число в поле <LI> item... показывается в Stackru: использование jQuery для динамического обновления упорядоченного списка

Обновление:

Я взял довольно длинный удар на recipes_controller.rb, модель и взгляды. Мне пришлось отключить kicksearch - так как стрелять не стоило, чтобы заставить контроллер работать полностью. Неполный список вещей...

Я создал таблицу соединений (user_recipes.rb) лучше справляться с рецептами и пользователями.
Я делаю фильтр before_action на вашем контроллере для @user. Это заменяет @recipe.user & помогает с Rails Way (предоставляя вам гибкость в будущем для devise & pundit/cancancan/ всего, что вы в конечном итоге используете для ограничения доступа к записям и страницам).
Некоторые из ваших операторов if для редактирования / удаления не отображались, потому что у вас не было .id в конце current_user, который мы исправили после перехода к @user метод
Я сделал помощник для is_owner (recipes_helper.rb) так как было 5 мест, где вы его тестировали. Я тоже удалил админа? проверить, как это проблематично, где это было и просто заставить контроллер работать. Мне пришлось include RecipeHelper в верхней части контроллера, чтобы он там работал.
Я вытащил подтверждение для user_id из рецептов, похоже, что вы переименовали forgein_key там в chef_id в любом случае... что я бы не сделал, потому что это означает, что помощник я сделал для is_owner работает только для recipe_controller, а не для всего приложения, и делает его более похожим на DSL по сравнению с возможностью простого просмотра.
Я сделал партиал для граватар (views/recipes/_gravatar_section.html.erb) и сдал @user там как местный вар

PS: Я сейчас нахожусь в точке, где рецепты запускаются достаточно, чтобы протестировать jquery против... будет обновляться больше, или вы можете смотреть обновления через раздвоенный репозиторий github,

Javascript Asset материал...

Я сделал рельсы rails assets:clean & rails assets:precompile который я думал, я бы упомянул, только если я еще не сделал.
Порядок вашего /app/assets/javascript/application.js неправильный... //= require_tree . обязательно должно быть внизу, иначе у вас будут проблемы, включая все файлы.
Кроме того, у вас было два файла, которые не имели необходимых, //= перед ними.
По какой-то причине у вас есть app/assets/javascript/exercise.coffee появляется в каталоге и иногда мешает загрузке exercise.js вещи.
Я нахожу сценарии в ваших файлах просмотра вместо файлов ресурсов для javascript (не конец света, но с ними становится намного сложнее работать и легче иметь типы проблем, с которыми вы сталкиваетесь).
Sumo генерировал 4 ошибки в консоли Chrome, поэтому я прокомментировал это