モーダルからAjaxでPOSTリクエストが送れない

環境

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件

ベストアンサー

直接的な回答じゃなくて申し訳ないのですが、Rails＋Modalで作ったときに参考にしたサイトを共有させていただきます。
Bootstrapのモーダルを利用して、AJAXはRails標準のremote: trueを利用しています。
こちらに沿って作ればJavaScriptはほとんど記載しなくても、希望されていることができるかと思います。

https://qiita.com/niwaken/items/ffbce52fb024fd369f24

投稿2019/05/12 17:43