Laravel：jQueryからModalに値を渡せているのに編集ができない

Question

##問題
編集機能部分をModalで実装しましたが、なぜかjQueryから渡したい値はModalに渡せているのに編集ができません。
編集ができないというのはfolder1からfolder2に変更できないという事です。
値が渡せていることは検証上で確認しました。
更新ボタンを押してもリロードされる動作はありますが、編集はされずControllerでddメソッドを使って確認しましたが表示されなかった為Controllerに行き届いていません。

私が思うのは現時点でinputタグのvalue属性にjQueryで値を渡す際、valメソッドを使うのが原因なのかなと考えています。
他にどんなメソッドや書き方をするべきか、もしくはその他の原因があればご教示頂ければと思います。

以下Modal部分の写真です。

##編集ボタン部分
編集ボタンを押したらModalが出ます。
data-titleとdata-urlがjQueryに渡したい値で追加しています。

<a class="btn btn-outline-light mr-1 btn-sm" data-toggle="modal" data-target="#EditFolderModal" data-title="{{ $folder->title }}" data-url="{{ route('update.folder',['id' => $folder->id, 'user_id' => $user]) }}" >編集</a>

##Modal部分

<div class="modal fade" id="EditFolderModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">

    <form role="form" method="post" action="">　//ここのaction属性にdata-urlの値が渡せていることは検証上で確認しました。
    @csrf
    
        <div class="modal-dialog">
            <div class="modal-content bg-dark">
                <div class="modal-header">
                    <h4 class="modal-title text-white" id="myModalLabel">Folder編集</h4>
                </div>
                <div class="modal-body text-white">
                        <div class="form-group row">
                            <label for="title" class="text-white">フォルダ名</label>

                            <input type="text" class="form-control @error('title') is-invalid @enderror" name="title" value=""> //ここのvalue属性にはdata-titleの値が渡せている事も検証上で確認しました。

                            @error('title')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                </div>
                <div class="modal-footer">
                    <a class="btn btn-outline-light" data-dismiss="modal">閉じる</a>

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//ここの更新ボタンを押すとリロードする動作はあるが、Controllerには行ってないです。
                    <button type="submit" class="btn btn-outline-light">更新</button>
                </div>
            </div>
        </div>
    </form>
</div>

##jQuery部分

<script　type="application/javascript">
    window.addEventListener('load', function() {
        $('#EditFolderModal').on('shown.bs.modal', function (event) {
            var button = $(event.relatedTarget);//モーダルを呼び出すときに使われたボタンを取得
            var title = button.data('title');//data-titleの値を取得
            var url = button.data('url');//data-urlの値を取得
            var modal = $(this);//モーダルを取得

            //Ajaxの処理はここに
            modal.find('input').val(title);//valを使う事にに問題があると思いますがどうすればいいのか分かっていません
            modal.find('form').attr('action',url);
        });
    });
</script>

##やってみたこと
・ これの他にもModalとjQueryを同じファイル上で使っているため、上記以外コメントアウトしてみましたが更新ボタン押しても編集されませんでした。

・ 編集ボタン部分のdata-urlとjQueryのmodal.find('form').attr('action',url);を消して、action = {{ route('update.folder',['id' => $folder->id, 'user_id' => $user]) }} と入れてみましたが更新されませんでした。

・ modal.find('input').val(title);をmodal.find('input').attr('defaultValue',title);に変えてやってみましたが、input内に値表示がされなくなってしまいます。

・ jQueryで渡すのをやめてinputタグのvalueに直で記載して編集はできたのですが、値表示がうまくいきませんでした。
上手くいかなかったというのは、id=1にもid=2のデータに対しても全てfolder1が表示されてしまいます。

Comments

[m.ts10806]

>var button = $(event.relatedTarget);

上記で想定の要素が取れてますか？

[meiyin]

質問ありがとうございます。返信が遅くなり申し訳ありません。
「console.log(button);」で検証上みてみましたが、「a.btn.btn-outline-light.mr-1.btn-sm」と記載があり、取得できているという認識で大丈夫でしょうか？

あと後ほど記事も訂正しますが、検証上でaction属性を見てみると、data-urlの値が渡せていたんです。
しかし更新ボタンを押してもリロードされる動作のみで、Controllerにddメソッドを使って確認しましたが表示されずControllerに行き届きませんでした。
となるとやはりJS部分やModal部分に問題があるのでしょうか？

[m.ts10806]

ちなみに、そのurlを直にactionに入れた場合はどうですか？

[meiyin]

編集ボタン部分の「data-url」とJSの「modal.find('form').attr('action',url);」を消して、「action = {{ route('update.folder',['id' => $folder->id, 'user_id' => $user]) }} 」と入れてみましたが更新されませんでした。

route部分を追加しましたが、URLが間違っている訳でもないと思うんですよね・・・

Answer 1

以下JS部分、data-titleをmodalのvalueへの渡し方に問題がありました。
なぜなのか調べてみましたが、「valueは入力ボックスの場合は、現在の値（変更後の値）を取得します。」と記載ありましたが、よく分かりませんでした。

modal.find('input').attr('value',title);

その為JSから渡すのではなく、modalのinputタグのvalueに直接記載しました。

<input type="text" class="form-control @error('title') is-invalid @enderror" name="title" value="{{ $folder->title }}">

これで編集前の値が表示され、編集もされました。

Comments

[meiyin]

これだと編集はできるのですが、値表示がうまくいきませんでした。
上手くいかなかったというのは、id=1にもid=2のデータに対しても全てfolder1が表示されてしまいます。

Answer 2

chromeのElementsタブで属性が正しく設定されてるか確認してください。

modal.find('input').attr('value',title);
modal.find('form').attr('action',url);

https://techracho.bpsinc.jp/wingdoor/2019_07_10/76755

更新ボタンを押してもリロードされる動作はありますが、編集はされずControllerでddメソッドを使って確認しましたが表示されなかった為Controllerに行き届いていません。

更新ボタン押したら、どんなリクエスト飛ばしてるかchromeのnetworkタブで確認してみてください。
rails serverのログでどんなリクエスト来たかも確認できるので、そちらも合わせて確認してみたらどうですか。