[Ruby on Rails] Add and delete tags and display (success / error) messages using ajax.

environment

Ruby 2.5.7 Rails 5.2.4

Library

jQuery 1.12.4

Premise

This time, I will explain using the Tag table.

First of all, please confirm in advance that you can add and remove tags without using ajax.

I will not touch on the Japanese localization of error messages and associations, so if you need it, please do it yourself.

turbolinks is disabled. (We have not confirmed the operation when it is enabled.)

procedure

As the title says, we will implement tag addition / deletion / error message display using ajax in the following procedure.

1. Validation settings in tag.rb
2. Preparation of partial templates (views / layouts / _error_messages.html.erb, views / layouts / _flash_messages.html.erb, views / tags / _tag.html.erb)
3. Create tag list screen and new form (views / tags / index.html.erb)
4. Prepare js.erb for each action (views / tags / create.js.erb, views / tags / destroy.js.erb)
5. Preparation of tags_controller.rb (: index,: create,: destroy)

As an image, when you press the submit button, the controller create action is executed The method that calls create.js.erb is executed in the create action JavaScript (jQuery) written in create.js.erb fires DOM manipulation overwrites error message element and tag list element (jQuery .html () method) The same applies to the destroy action when deleting.

As the flow of the completed form

1. Enter the value in the form on the index screen. 1-1. Save a new tag if it does not exist (success message) 1-2. If the tag exists, save failure (validation error message) 1-3. If blank, save failure (validation error message)

2. Delete individual tags 1-1. Display success message

Since everything is ajax, there is no update of the entire page.

1. Validation settings in tag.rb

tag.rb

class Tag < ApplicationRecord

  ...

  #Prohibits blanks and grants uniqueness (duplicate NG).
  validates :name, presence: true, uniqueness: true

end

2. Preparation of partial template (layouts / _error_messages.html.erb, layouts / _flash_messages.html.erb, _tag.html.erb)

The three partial templates created here are overwritten by DOM operations according to the action. If you write in jQuery, it will be redundant because you will be doing DOM operations line by line, so use a partial template so that jQuery described later can be done with <% = render ...%> 1 line It has become.

Partial template for validation error messages If you already have one, you can use it.

erb:layouts/_error_messages.html.erb

<% if model.errors.any? %>
  <div id="validation-errors">
    <p><%= model.errors.count %>There are some errors.</p>
    <ul class="error-messages">
      <% model.errors.full_messages.each do |message| %>
        <li class="error-message"><%= message %></li>
      <% end %>
    </ul>
  </div>
<% end %>

If there is a validation error when overwritten by jQuery's DOM manipulation, an error message will be displayed. Replace the local variable model with @ tag (Tag.new) in index.html.erb, which will be described later.

Next, a partial template for success messages (flash messages) If you already have this, please use it.

erb:layouts/_flash_messages.html.erb

<% flash.each do |key, value| %>
  <p class="alert alert-<%= key %>">
    <%= value %>
  </p>
<% end %>

It is supposed to get from the array with each, but this is not to get multiple flash messages, but any key (flash [key]) can be redisplayed with this one sentence I will. There are two types of keys used this time: [: success] and [: warning]. (By the way, these two types are also available in bootstrap, so I chose this time.) If you use these two, you can rewrite the partial template as follows.

erb:layouts/_flash_messages.html.erb

<% case flash.keys[0] %>
  <% when "success" %>
  <p class="alert alert-<%= flash.keys[0] %>">
    <%= flash[:success] %>
  </p>
  <% when "warning" %>
  <p class="alert alert-<%= flash.keys[0] %>">
    <%= flash[:warning] %>
  </p>
<% end %>

The keys stored in flash are arrays, so they must be keys [0]. Change the flash message to be displayed according to the key pattern in the case statement. The reason for using keys [0] in the class of the p element is to change the design of css depending on the key (success or warning in this case).

However, this is redundant because it is necessary to increase the number of rows each time the number of key types (key names can be arbitrarily given) increases.

Therefore, this time, by using the each statement, the trouble is eliminated. Also, by making it a partial template, it can be reused in other views as well as validation error messages.

Partial template to display the tag list next

erb:tags/_tag.html.erb

<div class="tags-index__tags--tag">
  <%= tag.name %>(<%= tag.menu_tag_ids.count %>)
  <%= link_to 'Ｘ', tag_path(tag), method: :delete, remote: true %>
</div>

If you do not use a partial template, you need to write 4 lines with jQuery, which will be described later, and I want to manage DOM operations with jQuery as simply as possible, so I made it a partial template. The local variable tag is automatically replaced as an individual local variable tag in the partial template by specifying the instance variable @ tags (Tag.all) in index.html.erb. (I will explain in detail in index.html.erb.) (<% = tag.menu_tag_ids.count%>) shows the number of menus that use that tag next to the tag name. (Menu table (omitted) 1: Multi-menu tag table (intermediate table) (omitted) Multi: 1 tag table (this time)) For <% = link_to'X', tag_path (tag), method:: delete, remote: true%>, pressing X will trigger the destroy action. By setting remote: true, it is specified that it is ajax communication.

<div class="contents tags-index">
  <div class="tags-index--messages"><!--Message display area--></div>
  <h2>Tag list</h2>
  <div class="tags-index__list" id="tags-index--tag-list">
    <%= render @tags %>
  </div>
  <div class="tags-index__form">
    <%= form_with model: @tag, url: tags_path(@tag) do |f| %>
      <%= f.text_field :name %>
      <%= f.submit %>
    <% end %>
  </div>
</div>

<%= render partial: 'tag', locals: {tags: @tags} %>

<% tags.each do |tag| %>
  <div class="tags-index__tags--tag">
    <%= tag.name %>(<%= tag.menu_tag_ids.count %>)
    <%= link_to 'Ｘ', tag_path(tag), method: :delete, remote: true %>
  </div>
<% end %>

<% if @tag.errors.any? %>
  $(".tags-index--messages").html("<p><%= j(render partial: 'layouts/error_messages', locals: {model: @tag}) %></p>")
<% else %>
  $(".tags-index--messages").html("<p><%= j(render partial: 'layouts/flash_messages', locals: {model: @tag}) %></p>")
  $("#tags-index--tag-list").html("<%= j(render @tags) %>")
  $("#tag_name").val('')
<% end %>

$(".tags-index--messages").html("<p><%= j(render partial: 'layouts/flash_messages', locals: {model: @tag}) %></p>")
$("#tags-index--tag-list").html("<%= j(render @tags) %>")

class TagsController < ApplicationController

  def index
    @tags = Tag.all
    @tag = Tag.new
  end

  def create
    @tags = Tag.all
    @tag = Tag.new(tag_params)

    respond_to do |format|
      if @tag.save
        format.js { flash.now[:success] = "I saved it." }
      else
        format.js
      end
    end
  end

  def destroy
    @tags = Tag.all
    @tag = Tag.new
    Tag.find(params[:id]).destroy
    flash.now[:warning] = "It has been deleted."
  end

  private
  def tag_params
    params.require(:tag).permit(:name)
  end

end

def create

  ...

  respond_to do |format|
    if @tag.save
      format.js { flash.now[:success] = "I saved it." }
    else
      format.js
    end
  end
end