Rails5.2.1
rails-ujs
jQuery-ujs
行いたい事としては掲示板でコメントを投稿した時にコメントを非同期で投稿すると共に
コメントしたユーザーの名前と画像も載せたいということです。
現状ユーザーの名前とコメントは反映できているのですが、ActiveStorageを用いて保存している画像を
サーバー側で引っ張ってきて非同期で投稿する方法が分からないということです。
#コントローラー class CommentsController < ApplicationController def create @comment = Comment.new(params_comment) #① @comment.save! #② ajax_post = Comment.joins(:account).select('name, comment') .where(work_id: 8, account_id: 1).last render :json => ajax_post end def params_comment params.require(:t_workcomment).permit(:work_id, :account_id, :comment) end end
//Javascript function set_ajax() { { $('#ajax_sample').on('ajax:success', function(event) { data = event.detail[0]; $('#t_workcomment_comment').val(''); $(data).each(function(i, obj){ //④ $('#comments').append('<li>' + obj.name + obj.comment + '</li>') }); }); $('#ajax_sample').on('ajax:error', function(event) { alert("失敗!"); }); } } $(document).on('turbolinks:load', set_ajax);
行っている事は
①コントローラー側に送られたコメントを保存
②保存が成功したらコメントモデルに対して、アカウント(ユーザー)モデルをjoinし、whereメソッドでユーザーが投稿した一番新しい
投稿を絞り込み、selectでコメントとそのユーザーの名前を取得
③絞り込んだ内容をjsonにしてjs側に渡す
④変数dataにサーバー側から渡されたコメント、名前があるのでappendメソッドでhtmlに要素として付け加える
というものです。
しかしActiveStorageを用いてアカウントモデルにアタッチしている画像をどのように持ってきたらいいかが分かりません。
普通にrailsでActiveStorageを用いる場合は
class Account < ApplicationRecord has_one_attached :image end
のようにすれば特に何もしなくても
@account = Account.find(params[:id])
@accountの中にActiveStorageを用いて保存した画像が入っていると思います。
しかしjsと組みあわせると途端に勝手が分からないです。
まず②の部分でaccountモデルをjoinした際にActiveStorageオブジェクトも入ってきているのかが分からないのと
またjs,jquery側でどう扱えばよいかが分かりません。
#imageを取ってこれていないみたいです Comment.joins(:account).select('name, comment, image') .where(work_id: 8, account_id: 1).last
//detail[0]の中に画像は入ってくるのか data = event.detail[0]; //どのようにしてappendすればよいか $('#comments').append('<li>' + obj.name + obj.comment + '</li>')
説明不足の点が多々あると思いますが、よろしくお願い致します。
追記 schema.rb
ActiveRecord::Schema.define(version: 2019_04_25_165918) do create_table "active_storage_attachments", options: "ENGINE=InnoDB DEFAULT CHARSET=utf8", force: :cascade do |t| t.string "name", null: false t.string "record_type", null: false t.bigint "record_id", null: false t.bigint "blob_id", null: false t.datetime "created_at", null: false t.index ["blob_id"], name: "index_active_storage_attachments_on_blob_id" t.index ["record_type", "record_id", "name", "blob_id"], name: "index_active_storage_attachments_uniqueness", unique: true end create_table "active_storage_blobs", options: "ENGINE=InnoDB DEFAULT CHARSET=utf8", force: :cascade do |t| t.string "key", null: false t.string "filename", null: false t.string "content_type" t.text "metadata" t.bigint "byte_size", null: false t.string "checksum", null: false t.datetime "created_at", null: false t.index ["key"], name: "index_active_storage_blobs_on_key", unique: true end create_table "accounts", options: "ENGINE=InnoDB DEFAULT CHARSET=utf8", force: :cascade do |t| t.string "email", default: "", null: false t.string "encrypted_password", default: "", null: false t.string "reset_password_token" t.datetime "reset_password_sent_at" t.datetime "remember_created_at" t.string "confirmation_token" t.datetime "confirmed_at" t.datetime "confirmation_sent_at" t.string "unconfirmed_email" t.datetime "created_at", null: false t.datetime "updated_at", null: false t.string "name" t.integer "postaclcode" t.text "address" t.string "handlename" t.text "profile" t.bigint "m_rank_id" t.boolean "delflg" t.index ["email"], name: "index_accounts_on_email", unique: true t.index ["m_rank_id"], name: "index_accounts_on_m_rank_id" t.index ["reset_password_token"], name: "index_accounts_on_reset_password_token", unique: true end create_table "comments", options: "ENGINE=InnoDB DEFAULT CHARSET=utf8", force: :cascade do |t| t.bigint "work_id" t.bigint "account_id" t.text "comment" t.boolean "delflg" t.datetime "created_at", null: false t.datetime "updated_at", null: false t.index ["account_id"], name: "index_comments_on_account_id" t.index ["work_id"], name: "index_comments_on_work_id" end add_foreign_key "active_storage_attachments", "active_storage_blobs", column: "blob_id" add_foreign_key "comments", "accounts" add_foreign_key "comments", "works" end
回答1件
あなたの回答
tips
プレビュー