[JAVA] Comment implémenter une fonctionnalité intéressante dans Ajax avec Rails

"Comment implémenter une fonction similaire dans Rails" a présenté comment implémenter une fonction similaire, mais cette fois Vous montrera comment implémenter Ajax (communication asynchrone). Le système terminé ressemble à ce qui suit. いいね_Ajax.gif



environnement

supposition

Modifier index.html.erb

Ajoutez remote: true </ b> aux deux link_to (method :: delete et method: post). En décrivant remote: true, le traitement en Ajax peut être exécuté.

html:index.html.erb


<div class="container">
  <h1>Liste des articles</h1>
  <table class="table">
    <% @posts.each do |post| %>
      <tr>
        <td><%= post.title %></td>
        <td>
          <% if post.liked_by?(current_user) %>
            <% like = Like.find_by(user_id: current_user.id, post_id: post.id) %>
            <%= link_to like_path(like), method: :delete, remote: true do %>
              <span class="glyphicon glyphicon-heart" aria-hidden="true" style="color: red;">
              <span><%= post.likes.count %></span>
            <% end %>
          <% else %>
            <%= link_to post_likes_path(post), method: :post, remote: true do %>
              <span class="glyphicon glyphicon-heart" aria-hidden="true" style="color: gray;">
              <span><%= post.likes.count %></span>
            <% end %>
          <% end %>
        </td>
      </tr>
    <% end %>
  </table>
</div>

Modéliser la partie de la fonction similaire

Créez le fichier suivant dans le même répertoire que index.html.erb, copiez et collez la partie fonction similaire.

html:_like.html.erb


<% if post.liked_by?(current_user) %>
  <% like = Like.find_by(user_id: current_user.id, post_id: post.id) %>
  <%= link_to like_path(like), method: :delete, remote: true do %>
    <span class="glyphicon glyphicon-heart" aria-hidden="true" style="color: red;">
    <span><%= post.likes.count %></span>
  <% end %>
<% else %>
  <%= link_to post_likes_path(post), method: :post, remote: true do %>
    <span class="glyphicon glyphicon-heart" aria-hidden="true" style="color: gray;">
    <span><%= post.likes.count %></span>
  <% end %>
<% end %>

Afin d'appeler le modèle partiel (_like.html.erb), écrivez render </ b> là où il y avait une partie fonction similaire. Décrivez également l'ID afin de pouvoir identifier la partie où Ajax est traité.

html:index.html.erb


<div class="container">
  <h1>Liste des articles</h1>
  <table class="table">
    <% @posts.each do |post| %>
      <tr>
        <td><%= post.title %></td>
        <td id="like-<%= post.id %>">  <!--Rendez-le identifiable par identifiant-->

　　　　   <%= render "like", post: post %>  <!--Appeler un modèle partiel avec rendu-->

        </td>
      </tr>
    <% end %>
  </table>
</div>

Contrôleur d'édition

J'avais l'habitude de faire redirect_back à la fin de chaque action, mais quand je fais redirect_back, cela se recharge et Ajax ne fonctionne pas. Par conséquent, supprimez redirect_back.

likes_controller.rb


  def create
    like = Like.new(user_id: current_user.id, post_id: params[:post_id])
    @post = like.post
    like.save
  end

  def destroy
    like = Like.find(params[:id])
    @post = like.post
    like.destroy
  end

Créer un fichier js

Puisque nous envoyons une requête au format js par remote: true, nous chercherons enfin le fichier js avec le nom de l'action (créer ou détruire) à exécuter. Par conséquent, créez un dossier J'aime sous app / views / et créez create.js.erb et destory.js.erb dans ce dossier.

js:create.js.erb


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

js:destory.js.erb


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

Identifie par identifiant et réécrit partiellement le code HTML. C'est tout ce qu'on peut en dire.

Recommended Posts