✨

Rails｜指定した日の記録(投稿数)を非同期で表示する

2023/08/05に公開

Rails

要件

ユーザ詳細ページに、指定した日の記録(投稿数)を非同期で表示させる

開発環境

ruby 3.1.2p20
Rails 6.1.7.4
Cloud9

前提

Userモデル、Bookモデルを作成済み
jQueryを導入済み

Usersコントローラに記述

Usersコントローラに searchアクションを追加します。

users_controller.rb

  def search
    @user = User.find(params[:user_id])
    @books = @user.books
    @book = Book.new
    if params[:created_at] == ""
      @search_book = "日付を選択してください"
    else
      create_at = params[:created_at]
      @search_book = @books.where(['created_at LIKE ? ', "#{create_at}%"]).count
    end
  end

if params[:created_at] == ""
入力欄が空欄なら、「日付を選択してください」と表示します。

create_at = params[:created_at]
入力された日付を「create_at」に代入します。

@search_book = @books.where(['created_at LIKE ? ', "#{create_at}%"]).count
@userの持つ全Bookデータのうち、created_at が入力された create_at と同じ年月日のものを取得し、数を数え、@search_book に代入します。

ルーティングの記述

  resources :users, only: [:index,:show,:edit,:update] do
    get "search" => "users#search"
  end

usersにネストします。

users/show ページの記述

users/show.html.erb

     <%= form_with url:user_search_path(@user), method: :get, local: false do |f| %>
        <%= f.date_field :created_at %>
        <%= f.submit '検索', class: "btn btn-primary" %>
      <% end %>

      <div id="search_result">
        <% if @search_book.present? %>
          <%= render 'search', search_book: @search_book %>
        <% end %>
      </div>

非同期通信にするため、form_withに local:falseを追加します。

<div id="search_result">
この部分にid名をつけることで、jsファイルでこの部分を参照できます。

<%= render 'search', search_book: @search_book %>
検索結果部分をテンプレート化し、読み込んでいます。

テンプレート化された検索結果部分は以下の通りです。

users/_search.html.erb

<h4>検索結果</h4>
<table class="table">
  <thead>
    <tr>
      <th>投稿数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><%= search_book %></td>
    </tr>
  </tbody>
</table>

jsファイルの作成

非同期通信で更新したい部分のjsファイルを作成します。

view/users/search.js.erb

$('#search_result').html("<%= j(render 'search', search_book: @search_book ) %>");

以上で完成です！