環境
Ruby 2.6.0
Rails 5.2
Bootstrap 4
やりたいこと
Railでアプリを作っています。
font-awesomeのマークを押すと、編集画面(モーダル)が開き、そこに文字を入力して保存出来る状態が理想です。
この画像で言えば、Modal body text goes here.という入力したテキストを投稿の内容としてsave changesを押した時に保存したいです。(post.contentというPostモデルのcontentカラム)
users/users/:id ページにおいて、ユーザーは post(投稿)を複数持っています。
困っていること
users/users/:id というURLでこの処理を行おうとしていますが、リンク先の問題でエラーが生じます。
haml
1= link_to posts_post_path(post.id), :class => "add_comment", :remote => "true" do 2 %i.fa.fa-edit{data: {toggle: "modal", target: "#modal_" + post.id.to_s}}
モーダルの開く先をこのように指定すると、マウスを載せた時のリンク先はposts/posts/:idとなり、正しそうに見えます。
しかし、こうするとモーダルが開かなくなります。。
haml
1%span{:class => "add_comment", :remote => "true"} 2 %i.fa.fa-edit{data: {toggle: "modal", target: "#modal_" + post.id.to_s}}
このようにspanにすると、モーダルは開きますが、その後テキストを入力して保存を押すと
NO ROUTE MATCHusers/users/:id [POST]
のエラーが出てきます。
コード
以下該当するところのコードです。
haml
1%span{:class => "add_comment", :remote => "true"} 2 %i.fa.fa-edit{data: {toggle: "modal", target: "#modal_" + post.id.to_s}}
haml
1- if post && current_user 2 .modal{aria: {hidden: "true", labelledby: "exampleModalCenteredLabel"}, :id => "modal_" + post.id.to_s, :role => "dialog", :tabindex => "-1"} 3 .modal-dialog.modal-dialog-centered{:role => "document"} 4 .modal-content 5 .modal-header 6 %h5#exampleModalCenteredLabel.modal-title.mb-4 7 = post.product.title 8 - post.errors.full_messages.each do |message| 9 = message 10 .modal-body.text-center 11 = form_for posts_posts_url, html: { class: 'form js-form form-group' }, remote: true do |f| 12 = f.text_field class: 'form__text-field js-form__text-field form-control', rows: '5', placeholder: '例) 商品の感想など', value: params[:content] 13 .modal-footer 14 %button.btn.btn-secondary{"data-dismiss" => "modal", :type => "button"} Close 15 = f.submit class: 'form__submit js-submit btn btn-primary'
js
1$(document).on('turbolinks:load', function () { 2 $('.add_comment').on('submit', function(e) { 3 e.preventDefault(); 4 var textField = $(post.content); 5 var content = textField.val(); 6 $.ajax({ 7 type: 'POST', 8 url: '/posts.json', 9 data: { 10 post: { 11 content: content 12 } 13 }, 14 dataType: 'json' 15 })//ajax 16 }); 17})
hamlのインデントはマークダウンでずれるせいで、変になってるかもしれません。
よろしくお願いします
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/13 16:56 編集