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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

Ruby on Rails

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

Ajax

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

Q&A

1回答

411閲覧

いいね!のような機能 ajaxで表示

tiki

総合スコア0

Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

Ruby on Rails

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

Ajax

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

0グッド

0クリップ

投稿2020/05/12 09:50

前提・実現したいこと

グループチャットの投稿に対して「見ました」を押せるような機能のajax化がしたいです。
「見ました」ボタンを押す→非同期でlooked_countが増加、「見ましたを解除」ボタンに変わる仕様にしたいです。

現状、「見ました」を押すと下記エラーが発生し、非同期で表示されないのですが、リロードすると表示が変わるので、looksのcreate,destroyは正しく実装できているものと思われます。

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

ActionView::Template::Error (undefined local variable or method `post' for #<#<Class:0x00007fe7a206ae28>:0x00007fe7a26deae8>): 1: $("#look-btn#{post.id}").html("#{j(render partial: 'looks/look', locals: { post: post })}"); app/views/looks/create.js.haml:1:in `_app_views_looks_create_js_haml__2981196551491549395_70316419644040'

該当のソースコード

ruby

1#routes.rb 2Rails.application.routes.draw do 3 devise_for :users 4 root "users#index" 5 resources :users 6 resources :groups do 7 resources :posts do 8 resource :looks, only: [:create, :destroy] 9 resources :comments, only: :create 10 end 11 end 12end

ruby

1#models/look.rb 2class Look < ApplicationRecord 3 belongs_to :post, counter_cache: :looked_count 4 belongs_to :user 5 6 validates_uniqueness_of :post_id, scope: :user_id 7end 8 9#models/post.rb 10class Post < ApplicationRecord 11 belongs_to :group 12 belongs_to :user 13 has_many :comments 14 has_many :looks, dependent: :destroy 15 16 validates :content, presence: true 17 18 mount_uploaders :files, ImageUploader 19end

ruby

1#looks_controller.rb 2class LooksController < ApplicationController 3 def create 4 @look = current_user.looks.create(post_id: params[:post_id]) 5 end 6 7 def destroy 8 @look = Look.find_by(post_id: params[:post_id], user_id: current_user.id) 9 @look.destroy 10 end 11end

haml

1#views/posts/index.html.haml 2.posts 3 = render @posts 4 5#views/posts/_post.html.haml 6 .post-content 7 = post.content 8 - if post.files.present? 9 .post-files 10 - post.files.each_index do |i| 11 = image_tag post.files[i].url, class: 'post-files__file' 12 = render partial: 'looks/look', locals: { post: post }

haml

1#views/looks/_look.html.haml 2.look 3 .looked-count 4 = icon('fa', 'check') 5 = post.looked_count 6 .look-btn 7 - if current_user.already_looked?(post) 8 = button_to '見ましたを解除', group_post_looks_path(@group, post), method: :delete, id: 'look-btn#{post.id}', remote: true 9 - else 10 = button_to '見ました', group_post_looks_path(@group, post), id: 'look-btn#{post.id}', remote: true

haml

1#views/looks/create.js.haml 2$("#look-btn#{post.id}").html("#{j(render partial: 'looks/look', locals: { post: post })}"); 3 4#views/looks/destroy.js.haml 5$("#look-btn#{post.id}").html("#{j(render partial: 'looks/look', locals: { post: post })}");

試したこと

①undefined local variable or method `post'からjs.hamlのlocals部分をlocals: { post: @post }に変更してみましたが、同じエラーが出ます。

②_look.html.hamlおよび、create.js.haml,destroy.js.hamlのid部分の#{post.id}を#{@post.id}に変更してみたところ、上記エラではなく、下記エラーが発生します。

ActionView::Template::Error (undefined method `id' for nil:NilClass): 1: $("#look-btn#{@post.id}").html("#{j(render partial: 'looks/look', locals: { post: post })}"); app/views/looks/create.js.haml:1:in `_app_views_looks_create_js_haml__2981196551491549395_70316417088080'

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

rails 5.2.3
jquery

参考にしたサイト
https://qiita.com/naberina/items/c6b5c8d7756cb882fb20
https://qiita.com/YuitoSato/items/94913d6a349a530b2ea2

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

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

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

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

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

guest

回答1

0

そもそも取り組まれていらっしゃる「javascriptの式をそのままrenderで返す」という仕組みはセキュリティ的に問題があるので、フロントのjavascriptとコントローラーとの間でjsonをやり取りする形に変更された方が宜しいかと思います。

投稿2020/05/12 11:03

zwbowy

総合スコア7

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

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

tiki

2020/05/12 13:11

回答ありがとうございます。 簡単な表記方法だったので、飛びついてしまいました。。 jsonでやり取りする形も調べてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問