[Ruby on Rails] Hinzufügen und Löschen von Tags und Anzeigen von (Erfolgs- / Fehler-) Meldungen mit Ajax.

Umgebung

Ruby 2.5.7 Rails 5.2.4

Bibliothek

jQuery 1.12.4

Annahme

Dieses Mal werde ich anhand der Tag-Tabelle erklären.

Bitte bestätigen Sie zunächst im Voraus, dass Sie Tags hinzufügen und entfernen können, ohne Ajax zu verwenden.

Ich werde nicht auf die japanische Lokalisierung von Fehlermeldungen und Assoziationen eingehen. Wenn Sie sie benötigen, tun Sie dies bitte selbst.

Turbolinks ist deaktiviert. (Wir haben den Vorgang nicht bestätigt, wenn er aktiviert ist.)

Verfahren

Wie der Titel schon sagt, werden wir in den folgenden Schritten Ajax verwenden, um Tags hinzuzufügen / zu löschen und Fehlermeldungen anzuzeigen.

1. Validierungseinstellungen in tag.rb
2. Vorbereitung von Teilvorlagen (views / layouts / _error_messages.html.erb, views / layouts / _flash_messages.html.erb, views / tags / _tag.html.erb)
3. Erstellen Sie einen Tag-Listenbildschirm und ein neues Formular (views / tags / index.html.erb).
4. Bereiten Sie js.erb für jede Aktion vor (views / tags / create.js.erb, views / tags / destroy.js.erb)
5. Vorbereitung von tags_controller.rb (: index ,: create ,: destroy)

Wenn Sie als Bild auf die Schaltfläche "Senden" klicken, wird die Erstellungsaktion des Controllers ausgeführt. Die Methode, die create.js.erb aufruft, wird in der Aktion create ausgeführt In create.js.erb geschriebenes JavaScript (jQuery) wird ausgelöst Die DOM-Manipulation überschreibt das Fehlermeldungenelement und das Taglistenelement (jQuery .html () Methode) Gleiches gilt für die Zerstörungsaktion beim Löschen.

Als Ablauf des ausgefüllten Formulars

1. Geben Sie einen Wert in das Formular auf dem Indexbildschirm ein. 1-1. Speichern Sie ein neues Tag, falls es nicht vorhanden ist (Erfolgsmeldung). 1-2. Wenn das Tag vorhanden ist, speichern Sie den Fehler (Validierungsfehlermeldung). 1-3. Wenn leer, Speichern fehlgeschlagen (Validierungsfehlermeldung)

2. Löschen Sie einzelne Tags 1-1. Erfolgsmeldung anzeigen

Da alle Ajax sind, wird nicht die gesamte Seite aktualisiert.

1. Validierungseinstellungen in tag.rb

tag.rb

class Tag < ApplicationRecord

  ...

  #Verbietet Leerzeichen und gewährt Eindeutigkeit (doppeltes NG).
  validates :name, presence: true, uniqueness: true

end

2. Vorbereitung von Teilvorlagen (layouts / _error_messages.html.erb, layouts / _flash_messages.html.erb, _tag.html.erb)

Die drei hier erstellten Teilvorlagen werden entsprechend der Aktion durch DOM-Operationen überschrieben. Wenn Sie in jQuery schreiben, ist dies redundant, da Sie DOM-Operationen zeilenweise ausführen. Verwenden Sie daher Teilvorlagen, damit die später beschriebene jQuery mit <% = render ...%> 1 Zeile ausgeführt werden kann Es ist geworden.

Teilvorlage für Validierungsfehlermeldung Wenn Sie bereits eine haben, können Sie diese verwenden.

erb:layouts/_error_messages.html.erb

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

Wenn beim Überschreiben durch die DOM-Manipulation von jQuery ein Validierungsfehler auftritt, wird eine Fehlermeldung angezeigt. Ersetzen Sie die lokale Variable model durch @ tag (Tag.new) in index.html.erb, was später beschrieben wird.

Als nächstes eine Teilvorlage für Erfolgsmeldungen (Flash-Nachrichten) Wenn Sie dies bereits haben, verwenden Sie es bitte.

erb:layouts/_flash_messages.html.erb

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

Es soll mit jedem aus dem Array kommen, aber dies dient nicht dazu, mehrere Flash-Nachrichten zu erhalten, aber jeder Schlüssel (flash [key]) kann mit diesem einen Satz erneut angezeigt werden Ich werde. Diesmal werden zwei Arten von Schlüsseln verwendet: "[: Erfolg]" und "[: Warnung]". (Diese beiden Typen sind übrigens auch im Bootstrap verfügbar, daher habe ich mich diesmal entschieden.) Wenn Sie diese beiden verwenden, können Sie die Teilvorlage wie folgt umschreiben.

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

Die in Flash gespeicherten Schlüssel sind Arrays, daher müssen sie "Schlüssel [0]" sein. Ändern Sie die anzuzeigende Flash-Nachricht gemäß dem Schlüsselmuster in der case-Anweisung. Der Grund für die Verwendung von "keys [0]" in der Klasse des p-Elements besteht darin, das Design von css abhängig vom Schlüssel zu ändern (Erfolg oder Warnung in diesem Fall).

Dies macht es jedoch überflüssig, da die Anzahl der Zeilen jedes Mal erhöht werden muss, wenn die Anzahl der Schlüsseltypen (Schlüsselnamen können beliebig angegeben werden) zunimmt.

Daher wird dieses Mal durch die Verwendung jeder Anweisung der Fehler beseitigt. Indem Sie es zu einer Teilvorlage machen, können Sie es auch in anderen Ansichten sowie in der Validierungsfehlermeldung wiederverwenden.

Teilvorlage zur Anzeige der nächsten Tag-Liste

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>

Wenn Sie keine Teilvorlage verwenden, müssen Sie 4 Zeilen mit jQuery schreiben, was später beschrieben wird. Ich möchte DOM-Vorgänge mit jQuery so einfach wie möglich verwalten, also habe ich es zu einer Teilvorlage gemacht. Die lokale Variable "tag" wird automatisch als einzelne lokale Variable "tag" in der Teilvorlage ersetzt, indem die Instanzvariable "@ tags" (Tag.all) in index.html.erb angegeben wird. (Ich werde in index.html.erb ausführlich erklären.) (<% = tag.menu_tag_ids.count%>) zeigt die Anzahl der Menüs an, für die das Tag neben dem Tag-Namen verwendet wird. (Menütabelle (weggelassen) 1: Multi-Menü-Tag-Tabelle (Zwischentabelle) (weggelassen) Multi: 1-Tag-Tabelle (diesmal)) Für <% = link_to'X ', tag_path (tag), method :: delete, remote: true%> wird durch Drücken von X die Zerstörungsaktion ausgelöst. Durch Setzen von "remote: true" wird angegeben, dass es sich um eine Ajax-Kommunikation handelt.

<div class="contents tags-index">
  <div class="tags-index--messages"><!--Anzeigebereich für Nachrichten--></div>
  <h2>Tag-Liste</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] = "Ich habe es gespeichert." }
      else
        format.js
      end
    end
  end

  def destroy
    @tags = Tag.all
    @tag = Tag.new
    Tag.find(params[:id]).destroy
    flash.now[:warning] = "Es wurde gelöscht."
  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] = "Ich habe es gespeichert." }
    else
      format.js
    end
  end
end