[Ruby on Rails] Asynchrone Kommunikation der Posting-Funktion, Ajax

Ziel

Entwicklungsumgebung

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

Annahme

• Wenn Sie ▶ ◯◯ auswählen, werden Erklärungen angezeigt. Ich hoffe, Sie können sich darauf beziehen, wenn Sie sich nicht sicher sind.

• Login-Umgebung mit Gerät erstellen
• Posting-Funktion, die nur angemeldete Benutzer ausführen können
• Nachbearbeitungsfunktion (Aktualisieren, Löschen)

fließen

1 Einführung von gem'jquery-rail ' 2 Teilvorlage für das Teil, das Sie für die asynchrone Kommunikation verwenden möchten 3 remote: Beschreibe true 4 Erstellen Sie eine js.erb-Datei 5 Löschen Sie das Controller-Umleitungsziel

Wenn es nicht funktioniert, ActionView :: Template :: Error wird häufig im Terminal angezeigt Ich denke, dass die meisten Leute vergessen, Variablen zu definieren. Wenn Sie danach keinen Fehler im ID-Namen und in der Renderbeschreibung machen, sollte dies funktionieren.

Gem'jquery-rail 'eingeführt

Gemfile

gem 'jquery-rails'

Terminal

$ bundle install

app/assets/javascript/sapplication.js

//= require rails-ujs
//= require activestorage
//= require jquery 　　　　　<--hinzufügen
//= require turbolinks
//= require_tree .

Teilvorlage, Remote: Fügen Sie true hinzu

Dieses Mal führen wir eine asynchrone Kommunikation auf dem neuen Buchungsbildschirm durch.

erb:app/views/posts/new.html.erb

<h1>Posts#new</h1>
<span>Derzeit angemeldeter Benutzer:<%= current_user.name %></span>

<--- form_für zu bilden_Wechseln Sie zu mit, data: {remote: true}Beschreiben--->
<%= form_for(@post, url: posts_path) do |f| %>
<--- --->

	<div>
		<%= f.label :Titel%><br>
		<%= f.text_field :title, autofocus: true %> <--ID hinzufügen
	</div>
	<div>
		<%= f.label :Inhalt%><br>
		<%= f.text_area :body %>
	</div>
	<div><%= f.submit "Post" %></div>
<% end %>
<table>
	<thead>
		<tr>
			<th>Gepostet mit Namen</th>
			<th>Titel</th>
			<th>Text</th>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tbody>  <--ID hinzufügen

<---von hier--->
		<% @posts.each do |post| %>
			<tr>
				<td><%= post.user.name %></td>
				<td><%= post.title %></td>
				<td><%= post.body %></td>
				<td><%= link_to "Einzelheiten", post_path(post) %></td>
				<td><%= link_to "Bearbeiten", edit_post_path(post) %></td>
				<td><%= link_to "Löschen", post_path(post), method: :delete %></td>
			</tr>
		<% end %>
<---Teilvorlage bis hierher--->

	</tbody>
</table>

Die geänderte Beschreibung lautet wie folgt.

erb:app/views/posts/new.html.erb

<h1>Posts#new</h1>
<span>Derzeit angemeldeter Benutzer:<%= current_user.name %></span>
<%= form_with model:[@post], data: {remote: true} do |f| %>
	<div>
		<%= f.label :Titel%><br>
		<%= f.text_field :title, autofocus: true, id: "text" %>
	</div>
	<div>
		<%= f.label :Inhalt%><br>
		<%= f.text_area :body %>
	</div>
	<div><%= f.submit "Post" %></div>
<% end %>
<table>
	<thead>
		<tr>
			<th>Gepostet mit Namen</th>
			<th>Titel</th>
			<th>Text</th>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tbody id="post">
		<%= render 'posts/new', posts: @posts %>
	</tbody>
</table>

<% posts.each do |post| %>
	<tr>
		<td><%= post.user.name %></td>
		<td><%= post.title %></td>
		<td><%= post.body %></td>
		<td><%= link_to "Einzelheiten", post_path(post) %></td>
		<td><%= link_to "Bearbeiten", edit_post_path(post) %></td>
		<td><%= link_to "Löschen", post_path(post), method: :delete, remote: true %></td>
	</tr>
<% end %>

$('#post').html("<%= j(render 'posts/new', posts: @posts) %>");
$("text_area").val("");
$("#text").val("");

$('#post').html("<%= j(render 'posts/new', posts: @posts) %>");

  def create
    @posts = Post.all  <---hinzufügen
    @post = Post.new(post_params)
    @post.user_id = current_user.id
    if @post.save
      redirect_to new_post_path  <---Löschen
    else
      render :new
    end
  end

  def destroy
    @posts = Post.all  <---hinzufügen
    @post = Post.find(params[:id])
    @post.destroy
    redirect_to request.referer  <---Löschen
  end

  def create
    @posts = Post.all
    @post = Post.new(post_params)
    @post.user_id = current_user.id
    if @post.save
    else
      render :new
    end
  end

  def destroy
    @posts = Post.all
    @post = Post.find(params[:id])
    @post.destroy
  end