При попытке динамического рендеринга новых форм вся страница перезагружается - PullRequest
Новая
       7

При попытке динамического рендеринга новых форм вся страница перезагружается

0 голосов
/ 05 апреля 2020

Я работаю над проектом ruby на рельсах, в котором пользователи могут добавлять ингредиенты в рецепты. Прямо сейчас на новой странице рецептов пользователь может добавить только один ингредиент, я хотел бы, чтобы он мог добавлять много ингредиентов при создании или редактировании рецепта. Я пытался это сделать, и, насколько я могу судить, все в порядке, но ссылка «добавить ингредиент» просто перезагружает всю страницу.

_form. html .erb 

<link rel="stylesheet" type="text/css" href="app/assets/stylesheets/form.css">
<div id = "form">
  <%= form_for(@recipe) do |form| %>
    <% if @recipe.errors.any? %>
      <div id = "error_explanation">
        <h2>
          <%= pluralize(@recipe.errors.count, "error") %>
          prohibited this recipe from being saved:
        </h2>
        <ul>
          <%@recipe.errors.full_messages.each do |msg| %>
            <li><%= msg %></li>
          <% end %>
        </ul>
      </div>
    <% end %>

    <p>
      <%= form.label :title  %><br>
      <%= form.text_field :title %>
    </p>

    <p>
      <%= form.label :author  %><br>
      <%= form.text_field :author %>
    </p>

    <p>
      <%= form.label :note %><br>
      <%= form.text_area :note %>
    </p>
    <h2 id = "add">Add an Ingredient: </h2>
    <%= form.fields_for :ingredients do |builder| %>
      <%= render 'ingredient_fields', form: builder %>
    <% end %>

    <%= link_to_add_fields "Add Ingredient", form, :ingredients %>
    <p>
      <%= form.submit %>
    </p>

  <% end %>
</div>

_ingredient_field. html .erb 

<link rel="stylesheet" type="text/css" href="app/assets/stylesheets/ingredient_form.css">

<p class = "input_field">
  <%= form.label :name, "name" %><br>
  <%= form.text_field :name %>
</p>
<p class = "input_field">
  <%= form.label :amount, "amount" %><br>
  <%= form.number_field :amount %>
</p>
<p class = "input_field">
  <%= form.label :uom, "UOM" %><br>
  <%= form.text_field :uom %>
</p>
</br>

recipe.rb 

class Recipe < ApplicationRecord
  attr_accessor :name, :ingredients_attributes
  has_many :ingredients, :dependent => :delete_all
  accepts_nested_attributes_for :ingredients, reject_if: :all_blank
  validates :title, presence: true, length: {minimum: 4}
  validates :author, presence: true
end

application_helper.erb 

module ApplicationHelper
  def link_to_add_fields(name, form, association)
    new_object = form.object.send(association).klass.new
    id = new_object.object_id
    fields = form.fields_for(association, new_object, child_index: id) do |builder|
      render(association.to_s.singularize + '_fields', form: builder)
    end
    link_to(name, '#', class: 'add_fields', data:
        { id: id, fields: fields.gsub("\n", '') })
  end
end

рецепт. js. кофе - это то, что я наиболее подозрительно Я не очень понимаю jQuery и coffeescript. У меня есть этот файл внутри javascript / packs и я использую require ("packs / recipes") в приложении. html .erb. 

jQuery ->
  $('form').on 'click', '.add_fields', (event) ->
  time = new Date().getTime()
  regexp = new RegExp($(this).data('id'), 'g')
  $(this).before($(this).data('fields').replace(regexp, time))
  event.preventDefault()

спасибо

1 Ответ

1 голос
/ 06 апреля 2020

Если вы хотите упростить процесс, вам нужно использовать Rails вложенные формы . Но дело в том, что вам также нужно то, что Rails Guides назвало «Добавление полей на лету» . Как видите, Rails не поддерживает эту потребность напрямую. Но это может быть достигнуто очень легко с javascript. Я не хочу объяснять все процессы здесь, потому что здесь есть отличный ответ: { ссылка }. Кроме того, вы можете использовать cocoon gem для достижения этой функции тоже.

...