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

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

ただいまの
回答率

90.35%

  • Ruby on Rails 4

    2566questions

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

  • Ajax

    1407questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,650

gogoackman3

score 98

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

①投稿(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が呼ばれる

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

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

// ajaxのレスポンスが帰ってきたら、コメントの値をフォームから削除
$('#comment').val('');
// コメント数をカウントアップ
$('#comment_count_num').html(@comments_count);
// コメント内容を追加表示
$('.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の中にあります)

h1.title 投稿詳細
.post_container
  p.post_user_name 
    = link_to @post.user.user_name, user_path(@post.user_id), class:'box_link user_link'
  = image_tag @post.post_image_url.url,alt:'post'

  h1.post_title #{@post.post_title}
  p.post_text #{@post.post_text}

  .post_info.clearfix
    p.view_count
      span #{@post.view_count}
      'view

    p.comment_count
      | コメント
      span#comment_count_num #{@post.comments_count}
      '件

    time.post_time = time_ago_in_words(@post.created_at) +'前'

  - if @post.comments_count > 5
    p#read_more もっと読む...

  - @comments.each do |comment|
    .comment_wrapper.clearfix#0
      .comment_container.clearfix
        = link_to user_path(comment.user_id),class:'comment_user_link' do
          p.user_name #{comment.user.user_name}

        p.comment #{comment.comment_text}
        time.comment_time = time_ago_in_words(comment.created_at) +'前'


  - if logged_in?
    .comment_form_wrapper.clearfix
      p#js_image_error.input_error
      = form_for(@comment,data:{ remote: true}) do |f|
        = f.hidden_field :user_id,value: current_user.id
        = f.hidden_field :post_id,value: @post.id
        = f.text_field :comment_text,placeholder: 'コメントする',id: 'comment',class: 'comment_form'
        = f.submit '投稿',id: 'post_comment', class: 'comment_form_btn',disable_with: '投稿しています。'
  - else
    .recommend_login_box
      p.recommend_login 新規登録/ログインしてコメントする

comments/createcontroller

def create
    @comment = current_user.comments.build(comment_params)
    if @comment.save
      @comments_count = update_comments_count(@comment.post_id)

      # render json: @comment
      # render
    else
      flash.now[:danger] = 'コメントに失敗しました。再度お試しください。'
      render 'posts/show'
    end
  end

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

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

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

.comment_container.clearfix
  = link_to user_path(@comment.user_id),class:'comment_user_link' do
    p.user_name #{@comment.user.user_name}

  p.comment #{@comment.comment_text}
  time.comment_time = time_ago_in_words(@comment.created_at) +'前'
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/30 01:48

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

    キャンセル

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

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • Ruby on Rails 4

    2566questions

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

  • Ajax

    1407questions

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