質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

Q&A

解決済

1回答

1156閲覧

コメント件数をリロードせずに更新させたい

kaho20181118

総合スコア2

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

0グッド

0クリップ

投稿2021/07/29 10:26

編集2021/07/29 15:13

前提・実現したいこと

コメント件数がリロードしないと更新できない。
本の感想アプリを作っています。
その他、いいね機能押し外し、コメント機能の投稿、削除は全て動作している。

発生している問題・エラーメッセージ

コメント件数がリロードしないと更新できない。 ブラウザ等にエラー文がない状態です。 一応、コメントを投稿した際と削除した際のターミナル出力情報を下記に記載します。

該当のソースコード

ターミナル(create時)

Started POST "/books/2/book_comments" for 14.10.133.132 at 2021-07-29 10:11:01 +0000 Cannot render console from 14.10.133.132! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255 Processing by BookCommentsController#create as JS Parameters: {"utf8"=>"✓", "authenticity_token"=>"VyxutmVOteHR9UwmCyf2QrAecUbNsKskoE3jkGuP9Ld4bWALMHoBR8rNFSyd1iVnLykFJ4-KWkJitfaXctAsAA", "book_comment"=>{"comment"=>"いいいいい"}, "commit"=>"送信", "book_id"=>"2"} User Load (0.1ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ? [["id", 5], ["LIMIT", 1]] ↳ /home/ec2-user/.rvm/gems/ruby-2.6.3/gems/activerecord-5.2.5/lib/active_record/log_subscriber.rb:98 Book Load (0.1ms) SELECT "books".* FROM "books" WHERE "books"."id" = ? LIMIT ? [["id", 2], ["LIMIT", 1]] ↳ app/controllers/book_comments_controller.rb:6 (0.1ms) begin transaction ↳ app/controllers/book_comments_controller.rb:10 User Load (0.1ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ? [["id", 5], ["LIMIT", 1]] ↳ app/controllers/book_comments_controller.rb:10 BookComment Create (1.3ms) INSERT INTO "book_comments" ("comment", "user_id", "book_id", "created_at", "updated_at") VALUES (?, ?, ?, ?, ?) [["comment", "いいいいい"], ["user_id", 5], ["book_id", 2], ["created_at", "2021-07-29 10:11:01.398246"], ["updated_at", "2021-07-29 10:11:01.398246"]] ↳ app/controllers/book_comments_controller.rb:10 (4.5ms) commit transaction ↳ app/controllers/book_comments_controller.rb:10 Rendering book_comments/index.js.erb BookComment Load (0.2ms) SELECT "book_comments".* FROM "book_comments" WHERE "book_comments"."book_id" = ? [["book_id", 2]] ↳ app/views/book_comments/_index.html.erb:2 User Load (0.1ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ? [["id", 3], ["LIMIT", 1]] ↳ app/views/book_comments/_index.html.erb:5 Rendered book_comments/_index.html.erb (16.0ms) Rendered book_comments/index.js.erb (19.5ms) Completed 200 OK in 49ms (Views: 25.4ms | ActiveRecord: 6.6ms)

ターミナル(destroy時)

Started DELETE "/books/2/book_comments/161" for 14.10.133.132 at 2021-07-29 10:11:39 +0000 Cannot render console from 14.10.133.132! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255 Processing by BookCommentsController#destroy as JS Parameters: {"book_id"=>"2", "id"=>"161"} User Load (0.1ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ? [["id", 5], ["LIMIT", 1]] ↳ /home/ec2-user/.rvm/gems/ruby-2.6.3/gems/activerecord-5.2.5/lib/active_record/log_subscriber.rb:98 BookComment Load (0.1ms) SELECT "book_comments".* FROM "book_comments" WHERE "book_comments"."id" = ? LIMIT ? [["id", 161], ["LIMIT", 1]] ↳ app/controllers/book_comments_controller.rb:37 (0.1ms) begin transaction ↳ app/controllers/book_comments_controller.rb:38 BookComment Destroy (0.2ms) DELETE FROM "book_comments" WHERE "book_comments"."id" = ? [["id", 161]] ↳ app/controllers/book_comments_controller.rb:38 (6.2ms) commit transaction ↳ app/controllers/book_comments_controller.rb:38 Rendering book_comments/index.js.erb Book Load (0.1ms) SELECT "books".* FROM "books" WHERE "books"."id" = ? LIMIT ? [["id", 2], ["LIMIT", 1]] ↳ app/views/book_comments/index.js.erb:2 BookComment Load (0.1ms) SELECT "book_comments".* FROM "book_comments" WHERE "book_comments"."book_id" = ? [["book_id", 2]] ↳ app/views/book_comments/_index.html.erb:2 User Load (0.1ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT ? [["id", 3], ["LIMIT", 1]] ↳ app/views/book_comments/_index.html.erb:5 Rendered book_comments/_index.html.erb (15.2ms) Rendered book_comments/index.js.erb (21.5ms) Completed 200 OK in 45ms (Views: 28.1ms | ActiveRecord: 6.9ms)

bookの詳細を載せるページ/bookers2-debug/app/views/books/show.html.erb

<div class='container'> <div class='row'> <div class='col-md-3'> <h2>User info</h2> <%= render 'users/info',user: @user %> <h2 class="mt-3">New book</h2> <%= render 'form', book: @new_book,user: @user %> </div> <div class='col-md-8 offset-md-1'> <h2>Book detail</h2> <table class='table'>         <tr>                   <td><%= link_to user_path(@book.user) do %> <%= attachment_image_tag(@book.user, :profile_image, :fill, 100, 100, fallback: "no-image-icon.jpg") %><br> <%= @book.user.name %> <% end %> </td> <td><%= link_to @book.title, book_path(@book) %></td> <td><%= @book.body %></td> <td > <div id="favorites_buttons_<%= @book.id %>" > <%= render 'favorites/favorite-btn', book: @book %> </div> </td> <td> <p>コメント数:<%= @book.book_comments.count %></p>(ここのコメント件数が変わって欲しい) </td> <% if @book.user==current_user %> <td><%= link_to 'Edit', edit_book_path(@book), class: "btn btn-sm btn-success edit_book_#{@book.id}" %></td> <td><%= link_to 'Destroy', book_path(@book), method: :delete, data: { confirm: '本当に消しますか?' }, class: "btn btn-sm btn-danger destroy_book_#{@book.id}"%></td> <% end %> </tr> </table> <div id="comment_create"> <%= render partial: 'book_comments/index', locals: { book_comments: @book_comments } %> </div> <div id="comment_create"> <%= render partial: 'book_comments/form', locals: { book_comment: @book_comment, book: @book } %> </div> </div> </div>

/bookers2-debug/app/views/book_comments/index.js.erb

$("#comment_create").html("<%= j(render 'index', { book_comments: @book_comment.book.book_comments }) %>"); $("textarea").val(''); /bookers2-debug/app/views/book_comments/_index.html.erb <table class='table'> <% book_comments.each do |book_comment| %> <tr> <td><%= link_to user_path(book_comment.user.id) do %> <%= attachment_image_tag(book_comment.user, :profile_image, :fill, 40, 40, fallback: "no-image-icon.jpg") %><br> <%= book_comment.user.name %> <% end %> </td> <td> <%= book_comment.comment %> </td> <% if book_comment.user == current_user %> <td> <%= link_to "Destroy", book_book_comment_path(book_comment.book_id, book_comment.id ), method: :delete,remote: true,class: "btn btn-sm btn-danger" %> </td> <% end %> </tr> <% end %> </table>

/bookers2-debug/app/views/book_comments/_form.html.erb

<%= form_with(model: [book, book_comment], url: book_book_comments_path(book) ) do |f| %> <%= f.text_area :comment, class: "input-mysize", size: "60x5" %> <div> <%= f.submit "送信", class: "btn btn-outline-dark comment-submit float-right" %> </div> <% end %>

/bookers2-debug/app/controllers/book_comments_controller.rb

def create @book = Book.find(params[:book_id]) @book_comment = @book.book_comments.build(book_comment_params) @book_comment.user_id = current_user.id @book_comment.save! render :index end def destroy @book_comment = BookComment.find(params[:id]) @book_comment.destroy render :index end private def book_comment_params params.require(:book_comment).permit(:comment, :book_id, :user_id) end

/bookers2-debug/app/controllers/books_controller.rb

def show @book = Book.find(params[:id]) @user=@book.user @new_book=Book.new @book_comment = BookComment.new @book_comment.user=current_user @book_comments = @book.book_comments.all end

試したこと

一度、コメント件数の範囲をコメントフォーム、コメント一覧と同様に部分テンプレートにすることを試みましたが、コメント件数は変わらなかった。
@bookと@book_commentを紐付ける記載をコントローラーにした。

補足情報(FW/ツールのバージョンなど)

ruby '2.6.3'
gem 'rails', '~> 5.2.5'

非同期通信、勉強を始めたばかりですので、未熟な点が多いとは思いますがよろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kokitail

2021/07/29 15:07

ソースコードの貼り付けはファイルごとに分けましょう 読みやすい質問でないと回答がもらいにくいと思います
kaho20181118

2021/07/29 15:17

すいません。完全に焦ってて忘れてました・・・。 ファイルごとに分けました。
guest

回答1

0

自己解決

コメント件数の部分をテンプレートファイルにして、jsファイルをcreate.js,destroy.jsに分けたら解決しました。

投稿2021/08/01 04:30

kaho20181118

総合スコア2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問