Question

我的应用程序中有一个待办事项列表功能，每当我尝试输入一个任务时，它似乎正在创建重复的任务。（您可以在https://www.thestaysanemom.com/tasks上以用户名“ test@test.com”和密码“ password”实时查看错误。）

该应用程序使用ajax来运行，我只能想象会导致错误。

create方法是这样的：

  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

这是所有发生的视图：

<% 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的{{1}}。

tasks

谁能看到为什么要创建重复项？

其他信息：创建ERB表单

 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

其他信息

根据要求，这是我的<%= 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>  <% 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

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宝石，则可能会在此处查看：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行

Rails创建方法创建重复项

1 个答案: