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

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

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

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Ajax

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

Q&A

解決済

2回答

4319閲覧

【rails】【ajax】レスポンスを受け取るjsからうまくviewを変更出来ません。

gogoackman3

総合スコア109

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Ajax

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

0グッド

0クリップ

投稿2016/09/29 11:16

編集2016/09/29 16:48

簡易的な画像投稿サイトを開発しています。

①投稿(post)
②投稿へのコメント(comment)

投稿詳細画面(posts/show)で投稿(post)へのコメント(comment)をする際に、ajaxで処理したいと考えています。

現在、以下までは実装できました。

posts/showで投稿を表示
posts/showのviewからform_forでコメントをcomments/createにPOST
comments/createでcommentを保存
comments/createからcomments/create.js.slimが呼ばれる

ここまでは問題なく処理が流れています。

しかし④で以下のコードを書いたところ・・・

javascript

1// ajaxのレスポンスが帰ってきたら、コメントの値をフォームから削除 2$('#comment').val(''); 3// コメント数をカウントアップ 4$('#comment_count_num').html(@comments_count); 5// コメント内容を追加表示 6$('.comment_wrapper').append("#{ j(render "shared/comment")}").hide().fadeIn('slow');

以下のエラーになります。

ActionView::Template::Error (Unknown line indicator /home/vagrant/sample_project/app/views/comments/create.js.slim, Line 2, Column 0 $('#comment').val(''); ^

④のコードのセレクタはviews/posts/show.html.slimに存在するものです。

views/comments/create.js.slimからviews/posts/show.html.slimのセレクタは指定できないのでしょうか?

その場合、今回のように異なるcontroller間の異なるactionでajaxの処理をする場合、レスポンスを受け取るjsからどのようにレスポンスデータをview側に追加すれば良いのでしょうか?

【追記】各ページのソースは以下になります。

posts/showのview(views/postsの中にあります)

html

1h1.title 投稿詳細 2.post_container 3 p.post_user_name 4 = link_to @post.user.user_name, user_path(@post.user_id), class:'box_link user_link' 5 = image_tag @post.post_image_url.url,alt:'post' 6 7 h1.post_title #{@post.post_title} 8 p.post_text #{@post.post_text} 9 10 .post_info.clearfix 11 p.view_count 12 span #{@post.view_count} 13 'view 14 15 p.comment_count 16 | コメント 17 span#comment_count_num #{@post.comments_count} 18 '件 19 20 time.post_time = time_ago_in_words(@post.created_at) +'前' 21 22 - if @post.comments_count > 5 23 p#read_more もっと読む... 24 25 - @comments.each do |comment| 26 .comment_wrapper.clearfix#0 27 .comment_container.clearfix 28 = link_to user_path(comment.user_id),class:'comment_user_link' do 29 p.user_name #{comment.user.user_name} 30 31 p.comment #{comment.comment_text} 32 time.comment_time = time_ago_in_words(comment.created_at) +'前' 33 34 35 - if logged_in? 36 .comment_form_wrapper.clearfix 37 p#js_image_error.input_error 38 = form_for(@comment,data:{ remote: true}) do |f| 39 = f.hidden_field :user_id,value: current_user.id 40 = f.hidden_field :post_id,value: @post.id 41 = f.text_field :comment_text,placeholder: 'コメントする',id: 'comment',class: 'comment_form' 42 = f.submit '投稿',id: 'post_comment', class: 'comment_form_btn',disable_with: '投稿しています。' 43 - else 44 .recommend_login_box 45 p.recommend_login 新規登録/ログインしてコメントする

comments/createcontroller

ruby

1def create 2 @comment = current_user.comments.build(comment_params) 3 if @comment.save 4 @comments_count = update_comments_count(@comment.post_id) 5 6 # render json: @comment 7 # render 8 else 9 flash.now[:danger] = 'コメントに失敗しました。再度お試しください。' 10 render 'posts/show' 11 end 12 end

comments/createのレスポンスを受け取るviews/comments/にあるcreate.js.slimファイル。

javascript

1// ajaxのレスポンスが帰ってきたら、コメントの値をフォームから削除 2$('#comment').val(''); 3// コメント数をカウントアップ 4$('#comment_count_num').html(@comments_count); 5// コメント内容を追加表示 6$('.comment_wrapper').append("#{ j(render "shared/comment")}").hide().fadeIn('slow');

views/shared/にある_comment.html.slimファイル。
create.js.slimから呼び出したい・・・。

html

1.comment_container.clearfix 2 = link_to user_path(@comment.user_id),class:'comment_user_link' do 3 p.user_name #{@comment.user.user_name} 4 5 p.comment #{@comment.comment_text} 6 time.comment_time = time_ago_in_words(@comment.created_at) +'前'

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

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

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

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

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

guest

回答2

0

自己解決

ajaxのレスポンスを受け取るファイル(create.js.slim)の
各行の先頭に以下のように 縦棒( | ) を追加することで正しく動きました。slimでの記法なのだと思います。

javascript

1// ajaxのレスポンスが帰ってきたら、コメントの値をフォームから削除 2| $('#comment').val(''); 3// コメント数をカウントアップ 4| $('#comment_count_num').html(@comments_count); 5// コメント内容を追加表示 6| $('.comment_wrapper').append("#{ j(render 'shared/comment')}").hide().fadeIn('slow');

投稿2016/10/01 07:26

編集2016/10/01 07:27
gogoackman3

総合スコア109

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

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

0

slimのソース(全体)を貼っていただけると原因が特定しやすくなると思います。
slimでの「Unknown line indicator」は他にも経験された方がいらっしゃるようですし。
http://yoshitsugufujii.github.io/blog/2014/11/21/20141121134825/

また、以下のコードは「"」が重なっているためエラーになるような気がします(エラーにならないようならすみません)。

JavaScript

1// "#{ j(render "shared/comment")}" は"が重なっているからエラーになる? 2$('.comment_wrapper').append("#{ j(render "shared/comment")}").hide().fadeIn('slow');

投稿2016/09/29 15:11

goute

総合スコア216

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

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

gogoackman3

2016/09/29 16:48

ソースを質問下部に追記させていただきました。何か怪しい点があれば教えて 頂けると嬉しいです・・・!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問