🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

JavaScript

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

jQuery

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

1834閲覧

railsのajax処理が反映されない

suzukaze414

総合スコア8

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

JavaScript

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

jQuery

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

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

1クリップ

投稿2019/10/24 13:13

編集2019/10/24 13:33

現在railsでシステムを作っています。

コメント機能をajaxの部分テンプレートを使って更新したいのですが、上手くいきません。

投稿フォームに文字を入力してボタンを押すと、入力していた文字が消え、javasprictが反応しているはずなのですが
肝心のコメントを表示するパーシャルが動きません。

手動で更新ボタンを押すとコメント内容が反映します。

//app/controllers/comments_controller.rb class CommentsController < ApplicationController def create @micropost = Micropost.find(params[:micropost_id]) @comment = @micropost.comments.build(comment_params) @comment.user = current_user if @comment.save respond_to do |format| format.html { redirect_back(fallback_location: root_path) } format.js end else flash[:success] = "コメントできませんでした" redirect_back(fallback_location: root_path) end end def destroy @micropost = Micropost.find(params[:micropost_id]) @comment = @micropost.comments.find(params[:id]) @comment.destroy respond_to do |format| format.html { redirect_back(fallback_location: root_path) } format.js end end private def comment_params params.require(:comment).permit(:content, :post_id, :user_id) end end
//app/controllers/microposts_controller.rb class MicropostsController < ApplicationController def show @micropost = Micropost.includes(:user).find(params[:id]) @user = @micropost.user @comments = @micropost.comments.includes(:user).all @comment = @micropost.comments.build(user_id: current_user.id) if current_user end end
//app/views/microposts/show.html.slim .container div id='comments-area' = render partial: 'comments/comment_form', locals: { micropost: @micropost, comment: @comment } .container = render partial: 'comments/comments', locals: { comments: @comments }
//app/views/comments/_comment_form.html.slim = form_with(model: [micropost, comment], remote: true) do |f| .form-group.my-3 = f.text_area :content, class: 'form-control', placeholder: 'コメント(50文字以内)' .d-flex.justify-content-end = f.submit '送信', class:'btn comment-btn mt-1'
//app/views/comments/_comments.html.slim - comments.each do |comment| .d-flex.flex-wrap.my-3.ml-1 .user-image = link_to user_path(comment) do - if comment.user.avatar.attached? = image_tag comment.user.avatar, class: 'my-3 rounded-circle' - else = image_tag 'user_dummy.jpg', class: 'my-3 rounded-circle' .d-flex.flex-column.ml-2 small.text-muted = comment.user.name .comment-content small = comment.content
app/views/comments/create.js.erb $("#comments_area").html("<%=j(render 'comments', {comments: @comment.micropost.comments} ) %>"); $("textarea").val('');
app/assets/javascripts/application.js //= require jquery3 //= require popper //= require bootstrap-sprockets //= require turbolinks //= require rails-ujs //= require activestorage //= require_tree .

gem 'jquery-rails'もインストールしてあり、完全にお手上げです。

すいませんがよろしくお願いします。

ruby '2.6.3'
rails '5.2.3'

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

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

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

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

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

guest

回答1

0

ベストアンサー

.container
div id='comments-area'

 

$("#comments_area").html("<%=j(render 'comments', {comments: @comment.micropost.comments} ) %>");

よく見るとidが違います。

ブラウザのデベロッパーコンソールを見ると何らかのエラーが出ていたのではないかと思います。

投稿2019/10/24 23:05

asm

総合スコア15149

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

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

suzukaze414

2019/10/25 00:35

ありがとうございます。 解決いたしました。 これからはデベロッパーコンソールを見るように注意します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問