Rails 6 Ajax page keeps refreshing when creating category-CodePudding

I'm new to RoR and i have this problem in Rails 6 where i am trying to add a category to a categories list with ajax so that when i submit my form, the page shouldn't refresh. But it keeps refreshing.

I followed this tutorial and split the list of into a _category.html.erb partial and created a create.js.erb file that appends to the list but i don't get the same results.

here is my 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>

this is my category list partial:

<!-- 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 -->

this is my form partial for the input and submit 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 %>

this is my create method in my categories controller that i suspect is the culprit because when i remove the format.html and format.json i get "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

this is the js file to append the new category to the list:

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

I have tried

This tutorial with jquery also but that also reloads on submit.
I have triple checked that i don't have "local:true" anywhere.
Changed tried @category instead of @categories in some places with no luck
I generated the project with a scaffold

Is there something that i'm missing?

Any guidance is greatly appreciated.

CodePudding user response：

You are not using data-remote attribute for your form. This attribute means the form will submit the results via Ajax.