Rails 6 Ajax 创建分类时页面一直刷新

Question

我是 RoR 的新手，我在 Rails 6 中遇到了这个问题，我试图用 ajax 将类别添加到类别列表中，这样当我提交表单时，页面不应刷新。但是一直在刷新。

我按照 this tutorial 将列表拆分为 _category.html.erb 部分并创建了一个附加到列表的 create.js.erb 文件，但我没有得到相同的结果。

这是我的 index.html.erb:

<body>
  <main>
    <section class="hero is-link is-fullheight pt-3">
      <div class="hero-body">
        <div class="container is-align-self-flex-start">
          <h1 class="title has-text-centered">categories</h1>
          
          <!-- container for the list of categories -->
          <div class="container" id='category'>
            <%= render @category %>
          </div>
          
          <h2 class="is-size-4">add a category</h2>
          <%= render 'form', category: @category %>
        </div>
      </div>
    </section>
  </main>
</body>

这是我的部分类别列表：

<!-- Loop over categories and add delete btn-->
<% @categories.each do |category| %>
    <div class="columns is-mobile card mb-4">
        <div class="column is-align-self-center ">
            <p class="is-size-5"><%= category.name %></p>
        </div>
        <div class="column is-narrow">
            <button class="button is-danger"><%= link_to 'delete', category, method: :delete, data: { confirm: 'Er du sikker?' } %></button>
        </div>
    </div>
<% end %> <!-- end of loop -->

这是我用于输入和提交 btn 的部分表单：

<%= form_with(model: category) do |form| %>
  <% if category.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(category.errors.count, "error") %> prohibited this category from being saved:</h2>
      <ul>
        <% category.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field has-addons">
    <%= form.text_field :name , ({:class => "input", })%>
    <%= form.submit "add", ({:class => "button is-primary", })%>
  </div>

<% end %>

这是我在我的类别控制器中创建的方法，我怀疑它是罪魁祸首，因为当我删除 format.html 和 format.json 我得到 “CategoriesController#create 中的 ActionController::UnknownFormat”

def create
    @categories = Category.all
    @category = Category.new(category_params)
    respond_to do |format|
      if @category.save
        format.js
        format.html { redirect_to action: "index", notice: "Category was successfully created." }
        format.json { render :show, status: :created, location: @category }
      else
        format.html { render :"index", status: :unprocessable_entity }
        format.json { render json: @category.errors, status: :unprocessable_entity }
      end
    end
  end

这是将新类别附加到列表的 js 文件：

var body = document.getElementByID("category");
body.innerHTML = "<%= j render @categories %>" + body.innerHTML;

我试过了

This tutorial 也有 jquery，但也会在提交时重新加载。
我已经三重检查我在任何地方都没有“local:true”。
在一些没有运气的地方更改了尝试的@category而不是@categories
我用脚手架生成了项目

有什么我遗漏的吗？

非常感谢任何指导。

Answer 1

您没有为表单使用 data-remote 属性。此属性表示表单将通过 Ajax.

提交结果

Rails 6 Ajax 创建分类时页面一直刷新

Rails 6 Ajax page keeps refreshing when creating category

html

javascript

ajax

ruby-on-rails

ruby-on-rails-6