[Ruby on Rails] Ajoutez et supprimez des balises et affichez les messages (succès / erreur) en utilisant ajax.

environnement

Ruby 2.5.7 Rails 5.2.4

Bibliothèque

jQuery 1.12.4

supposition

Cette fois, je vais vous expliquer en utilisant la table Tag.

Tout d'abord, veuillez confirmer à l'avance que vous pouvez ajouter et supprimer des balises sans utiliser ajax.

Je ne parlerai pas de la localisation japonaise des messages d'erreur et des associations, donc si vous en avez besoin, faites-le vous-même.

turbolinks est désactivé. (Nous n'avons pas confirmé l'opération lorsqu'elle est activée.)

procédure

Comme le titre l'indique, nous utiliserons ajax pour ajouter / supprimer des balises et afficher des messages d'erreur dans les étapes suivantes.

1. Paramètres de validation dans tag.rb
2. Préparation de modèles partiels (views / layouts / _error_messages.html.erb, views / layouts / _flash_messages.html.erb, views / tags / _tag.html.erb)
3. Créer un écran de liste de balises et un nouveau formulaire (vues / balises / index.html.erb)
4. Préparez js.erb pour chaque action (vues / tags / create.js.erb, vues / tags / destroy.js.erb)
5. Préparation de tags_controller.rb (: index ,: create ,: destroy)

En tant qu'image, lorsque vous appuyez sur le bouton d'envoi, l'action de création du contrôleur est exécutée. La méthode qui appelle create.js.erb est exécutée dans l'action de création JavaScript (jQuery) écrit dans create.js.erb se déclenche La manipulation DOM écrase l'élément de message d'erreur et l'élément de liste de balises (méthode jQuery .html ()) La même chose s'applique à l'action de destruction lors de la suppression.

Comme le flux du formulaire rempli

1. Entrez une valeur dans le formulaire sur l'écran d'index. 1-1. Enregistrer une nouvelle balise si elle n’existe pas (message de réussite) 1-2. Si la balise existe, enregistrez l'échec (message d'erreur de validation) 1-3. Si ce champ est vide, l’enregistrement a échoué (message d’erreur de validation)

2. Supprimer des balises individuelles 1-1. Afficher le message de réussite

Comme tous sont ajax, la page entière ne sera pas mise à jour.

1. Paramètres de validation dans tag.rb

tag.rb

class Tag < ApplicationRecord

  ...

  #Interdit les blancs et accorde l'unicité (dupliquer NG).
  validates :name, presence: true, uniqueness: true

end

2. Préparation de modèles partiels (layouts / _error_messages.html.erb, layouts / _flash_messages.html.erb, _tag.html.erb)

Les trois modèles partiels créés ici sont écrasés par les opérations DOM en fonction de l'action. Si vous écrivez dans jQuery, il sera redondant car vous ferez des opérations DOM ligne par ligne, utilisez donc des modèles partiels pour que jQuery décrit plus tard puisse être fait avec <% = render ...%> 1 ligne. Il est devenu.

Modèle partiel de message d'erreur de validation Si vous en avez déjà un, vous pouvez l'utiliser.

erb:layouts/_error_messages.html.erb

<% if model.errors.any? %>
  <div id="validation-errors">
    <p><%= model.errors.count %>Il y a des erreurs.</p>
    <ul class="error-messages">
      <% model.errors.full_messages.each do |message| %>
        <li class="error-message"><%= message %></li>
      <% end %>
    </ul>
  </div>
<% end %>

S'il y a une erreur de validation lors de l'écrasement par la manipulation DOM de jQuery, un message d'erreur sera affiché. Remplacez la variable locale «model» par «@ tag» (Tag.new) dans index.html.erb, qui sera décrite plus tard.

Ensuite, un modèle partiel pour les messages de réussite (messages flash) Si vous l'avez déjà, veuillez l'utiliser.

erb:layouts/_flash_messages.html.erb

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

Il est supposé obtenir du tableau avec chacun, mais ce n'est pas pour obtenir plusieurs messages flash, mais n'importe quelle touche (flash [key]) peut être réaffiche avec cette phrase Je vais. Il existe deux types de clés utilisées cette fois: [: success] et [: warning]. (Au fait, ces deux types sont également disponibles en bootstrap, j'ai donc choisi cette fois.) Si vous utilisez ces deux éléments, vous pouvez réécrire le modèle partiel comme suit.

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

Les clés stockées dans la mémoire flash sont des tableaux, elles doivent donc être clés [0]. Modifiez le message flash à afficher en fonction du modèle de touches dans l'instruction de cas. La raison d'utiliser keys [0] dans la classe de l'élément p est de changer la conception du css en fonction de la clé (succès ou avertissement dans ce cas).

Cependant, cela le rend redondant car il est nécessaire d'augmenter le nombre de lignes à chaque fois que le nombre de types de clés (les noms de clés peuvent être donnés arbitrairement) augmente.

Par conséquent, cette fois, en utilisant l'instruction each, le problème est éliminé. De plus, en en faisant un modèle partiel, il peut être réutilisé dans d'autres vues ainsi que dans le message d'erreur de validation.

Modèle partiel pour afficher la liste des balises ensuite

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>

Si vous n'utilisez pas de modèle partiel, vous devez écrire 4 lignes avec jQuery, ce qui sera décrit plus tard, et je veux gérer les opérations DOM avec jQuery aussi simplement que possible, donc j'en ai fait un modèle partiel. La variable locale «tag» est automatiquement remplacée en tant que variable locale individuelle «tag» dans le modèle partiel en spécifiant la variable d'instance «@ tags» (Tag.all) dans index.html.erb. (J'expliquerai en détail dans index.html.erb.) (<% = tag.menu_tag_ids.count%>) indique le nombre de menus pour lesquels la balise est utilisée à côté du nom de la balise. (Tableau de menu (omis) 1: Tableau d'étiquettes de menu multiple (tableau intermédiaire) (omis) Tableau d'étiquettes multiples: 1 (cette fois)) Pour <% = link_to'X ', tag_path (tag), method :: delete, remote: true%>, appuyer sur X déclenchera l'action de destruction. En définissant remote: true, il est spécifié qu'il s'agit d'une communication ajax. <détails>

<div class="contents tags-index">
  <div class="tags-index--messages"><!--Zone d'affichage des messages--></div>
  <h2>Liste de balises</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] = "Je l'ai sauvé." }
      else
        format.js
      end
    end
  end

  def destroy
    @tags = Tag.all
    @tag = Tag.new
    Tag.find(params[:id]).destroy
    flash.now[:warning] = "Il a été supprimé."
  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] = "Je l'ai sauvé." }
    else
      format.js
    end
  end
end