ruby-on-rails - Rails 创建方法创建重复项

Question

我的应用程序中有一个待办事项列表功能，每次我尝试输入一个任务时，它似乎都会创建重复的任务。 (您可以在 https://www.thestaysanemom.com/tasks 看到错误，用户名是“test@test.com”，密码是“password”。)

该应用程序使用 ajax 来运行，我只能想象这是导致错误的原因。

创建方法是这样的:

  def create
    @task = Task.new(task_params)
    @task.user_id = current_user.id
    if @task.save
      respond_to do |format|
        format.js
        format.html
      end
    else
      render :new
    end
  end

这是所有发生的 View :

<% if current_user %>

      <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-6 col-lg-12">
                <div class="content-box to-do">
                  <h2 class="font-script text-center">One-Time Tasks</h2>
            <p class="text-center">These tasks are here to stay, until you complete them.</p>
                        <div id="onetime-todo"><%= render partial: 'items', locals: { task: @one_time } %></div>
                        <div id="onetime-done"><%= render partial: 'done', locals: { task: @one_time_done } %></div>
                </div> <!-- content box -->
                </div> <!-- col -->

                <div class="col-xs-12 col-md-6 col-lg-4">
                <div class="content-box to-do">
                  <h2 class="font-script text-center">Daily</h2>
                        <p class="text-center">These automatically uncheck at night so you have a fresh list&nbsp;in&nbsp;the&nbsp;morning.</p>
                  <div id="daily-todo"><%= render partial: 'items', locals: { task: @daily } %></div>
                        <div id="daily-done"><%= render partial: 'done', locals: { task: @daily_done } %></div>
                </div> <!-- content box -->
                </div> <!-- col -->

                <div class="col-xs-12 col-md-6 col-lg-4">
                <div class="content-box to-do">
                  <h2 class="font-script text-center">Weekly</h2>
                        <p class="text-center">These automatically uncheck Sunday night so you get a new list&nbsp;each&nbsp;Monday&nbsp;morning.</p>
                  <div id="weekly-todo"><%= render partial: 'items', locals: { task: @weekly } %></div>
                        <div id="weekly-done"><%= render partial: 'done', locals: { task: @weekly_done } %></div>
                </div> <!-- content box -->
                </div> <!-- col -->

                <div class="col-xs-12  col-md-6 col-lg-4">
                <div class="content-box to-do">
                  <h2 class="font-script text-center">Monthly</h2>
                        <p class="text-center">These automatically uncheck on the last day of the month so you start with a clean&nbsp;list&nbsp;each&nbsp;1st.</p>
                  <div id="monthly-todo"><%= render partial: 'items', locals: { task: @monthly } %></div>
                        <div id="monthly-done"><%= render partial: 'done', locals: { task: @monthly_done } %></div>
                </div> <!-- content box -->
                </div> <!-- col -->
            </div> <!-- row -->
      </div> <!-- container -->
<% end %> <!-- current_user -->

<script>
    $(document).ready(function() {
        $('.content-box').matchHeight();

    });
</script>

这是我的 create.js.erb :

$("#onetime-todo").html("<%= escape_javascript(render partial: 'items', locals: { task: @one_time }) %>")
$("#onetime-done").html("<%= escape_javascript(render partial: 'done', locals: { task: @one_time_done }) %>")

$("#daily-todo").html("<%= escape_javascript(render partial: 'items', locals: { task: @daily }) %>")
$("#daily-done").html("<%= escape_javascript(render partial: 'done', locals: { task: @daily_done }) %>")

$("#weekly-todo").html("<%= escape_javascript(render partial: 'items', locals: { task: @weekly }) %>")
$("#weekly-done").html("<%= escape_javascript(render partial: 'done', locals: { task: @weekly_done }) %>")

$("#monthly-todo").html("<%= escape_javascript(render partial: 'items', locals: { task: @monthly }) %>")
$("#monthly-done").html("<%= escape_javascript(render partial: 'done', locals: { task: @monthly_done }) %>")

$('#textField').val("");

其中呈现 _items.html.erb :

<div class="to-do-list taskWrapper" data-url="<%= sort_tasks_path %>">
  <% task.each do |task| %>
  <div id="<%= dom_id(task) %>">
    <%= link_to task do %>
      <p>
        <%= fa_icon "bars", class: "color-neutral-light", style: "margin-right: 5px;" %>
        <%= link_to check_task_path(task), method: :post, remote: true do %>
          <%= fa_icon "square-o", style: "margin-right: 5px;" %>
        <% end %>
        <span id="task-show-hide">
          <span class="font-serif">
            <%= task.name %>
          </span>
          <span>
            <%= link_to task_path(task), method: :delete, remote: true do %>
              <%= fa_icon "remove", id: (task.id.to_s + "task"), style: "margin-left: 5px" %>
            <% end %>
          </span>
        </span>
      </p>
    <% end %> <!-- dom id wrapper -->
  </div>
  <% end %> <!-- task each -->
</div>

<script>
    $(document).on('ready page:load', function() {
        $('.content-box').matchHeight();
    $(".taskWrapper").sortable({

      update: function(e, ui) {
        var $that = $(e.target);

        Rails.ajax({
          url: $(this).data("url"),
          type: "PATCH",
          data: $that.sortable('serialize'),
        });

        console.log(ui.item.index())
      }
    });
    });
</script>

我认为这并不重要，但为了完成起见，这里是 schema为 tasks .

 create_table "tasks", force: :cascade do |t|
    t.string "name"
    t.string "frequency"
    t.boolean "completed", default: false
    t.integer "user_id"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.integer "position"
    t.index ["user_id"], name: "index_tasks_on_user_id"
  end

任何人都可以看到为什么这会创建重复项？

附加信息:ERB 表格创建

        <%= simple_form_for(@create_task, remote: true) do |f| %>
            <div class="row padded">
                <div class="col-xs-12 col-sm-9">
                    <%= f.text_field :name, id: "textField", placeholder: "What needs to get done?", class: "form-control" %>
                </div>
                <div class="col-xs-12 col-sm-3">
                    <%= f.select :frequency, options_for_select([["One-Time", "OneTime"],["Daily", "Daily"],["Weekly", "Weekly"],["Monthly", "Monthly"]]), {}, {class: "form-control"} %>
                </div>
                <div class="container text-center">
                    <div class="half-buffer"></div>
                    <%= f.button :submit, class: "btn btn-outline-secondary" %>
                    <div class="half-buffer"></div>
                </div>
            </div> <!-- row -->
        <% end %>

附加信息

根据要求，这是我在 application.js.erb 中所需的声明:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require popper
//= require magnific-popup
//= require jquery-ui
//= require froala_editor.min.js
//= require plugins/align.min.js
//= require plugins/char_counter.min.js
//= require plugins/code_beautifier.min.js
//= require plugins/code_view.min.js
//= require plugins/colors.min.js
//= require plugins/font_size.min.js
//= require plugins/fullscreen.min.js
//= require plugins/image.min.js
//= require plugins/image_manager.min.js
//= require plugins/inline_style.min.js
//= require plugins/line_breaker.min.js
//= require plugins/link.min.js
//= require plugins/lists.min.js
//= require plugins/paragraph_format.min.js
//= require plugins/paragraph_style.min.js
//= require plugins/quote.min.js
//= require plugins/special_characters.min.js
//= require plugins/url.min.js

** 添加了 GEMFILE **

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.5.0'

gem 'rails', '~> 5.2.0'
gem 'puma', '~> 3.11'
gem 'puma_worker_killer'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'jbuilder', '~> 2.5'
gem 'mini_magick'
gem 'jquery-rails'
gem 'devise'
gem 'bootsnap'
gem 'bootstrap', '~> 4.1.3'
gem 'jquery-ui-rails'
gem 'sprockets-rails'
gem 'bootstrap-sass'
gem 'bcrypt', '~> 3.1.7'
gem 'friendly_id', '~> 5.2.0'
gem 'stripe'
gem 'figaro'
gem 'magnific-popup-rails', '~> 1.1.0'
gem 'simple_form'
gem 'acts-as-taggable-on', '~> 6.0' #must be this version for Rails5
gem 'aws-sdk' , '~> 3'
gem 'aws-sdk-s3', require: false
gem 'simple_form_extension'
gem 'recaptcha', require: "recaptcha/rails"
gem 'font-awesome-rails'
gem 'trix-rails', require: 'trix'
gem 'rack-tracker'
gem 'high_voltage', '~> 3.1'
gem 'convertkit-ruby', require: 'convertkit'
gem 'dotenv-rails'
gem 'acts_as_list'
gem 'wysiwyg-rails'
gem 'font-awesome-sass'
gem 'will_paginate'

group :production do
  gem 'pg', '~> 0.20.0'
end

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'sqlite3'
end

group :development do
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
  gem 'binding_of_caller'
  gem 'better_errors'
end

group :test do
  gem 'capybara', '>= 2.15', '< 4.0'
  gem 'selenium-webdriver'
  gem 'chromedriver-helper'
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

Answer 1

您的 rails 代码看起来不错，但是当您提交时，您的表单会被重复提交。您应该能够在 Chrome 开发工具中看到这一点，如下所示。



这两个引用都指向 application.js 文件，但行不同。很难判断哪些库正在捕获提交，因为文件是串联的并且不包含调试信息。如果没有看到您正在使用哪些 JS 文件(来自 application.js )，我敢猜测您可能同时包含了 rails-ujs 和 jquery_ujs，这导致了双重提交。

在此处查看相关问题和答案:Form submitted twice, due to :remote=>true

更新:您的编译 JS 文件中肯定存在 rails-ujs 和 jquery_ujs。我认为这是一个看的好地方。如果您使用 Rails 5 并使用 jquery-rails gem 你可以看这里:https://github.com/rails/jquery-rails#installation

If you are running Rails 5.1 and up, and if you have 
included //= require rails-ujs, then jquery_ujs is not needed anymore

您只需要删除 //= require jquery_ujs来自您的线路 app/assets/javascripts/appplication.js文件