创建类别时Rails 6 Ajax页面不断刷新
Posted
技术标签:
【中文标题】创建类别时Rails 6 Ajax页面不断刷新【英文标题】：Rails 6 Ajax page keeps refreshing when creating category 【发布时间】：2021-11-13 16:32:25 【问题描述】：我是 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 时，我得到 "ActionController::UnknownFormat in CategoriesController#create"
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 我用脚手架生成了项目我有什么遗漏的吗？
非常感谢任何指导。
【问题讨论】：
【参考方案1】：您的表单没有使用data-remote 属性。该属性表示表单将通过 Ajax 提交结果。
【讨论】：
谢谢。我通过在我的表单中指定local: false 解决了我的问题，并将<%= j render @categories %> 更改为<%= j render @category %> 并解决了所有问题。我猜 Rails 会自动假定 local:true以上是关于创建类别时Rails 6 Ajax页面不断刷新的主要内容，如果未能解决你的问题，请参考以下文章