LaravelでPOST結果をjqueryのモーダルで表示させたい

Question

前提・実現したいこと

Laravelでpostしたデータをjqueryのモーダルウィンドウに表示させたい

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

① postするためのsubmitボタンのclick functionでモーダルを発火させているため、dbにデータ送信完了と同時にモーダルも消えてしまう。結果、モーダルに表示されたpost内容がほぼ見れない。

②モーダルに表示させるデータは今ポストしたデータにしたいが、postと同時にモーダルのイベントが発火しているため、本来表示させたデータの１つ前のデータがモーダルに表示される。
（今のデータがpostされる前にモーダルが表示されている）

該当のソースコード

view配下にbladeファイルを作成し、html記載しています。そのbladeファイルのの一番下に

<script src="{{ asset('/js/jquery-3.5.1.min.js') }}"></script>
<script src="{{ asset('/js/main.js') }}"></script>

を記載し、イベント詳細を記載したjsファイルはpublic配下に作成しました。

試したこと

個人的には、submitボタンでdbへのデータ送信と同時にクリックファンクションが発火してしまっているのが問題だと思っています。
これをsubmitボタンでdbへpost→dbへpost終了後にjquery発火にしたいです。
このような処理の順番にしたい場合はどのように処理を記載すれば良いか困っています。
ご存知の方は教えて頂ければ幸いです。

Comments

[m.ts10806]

jQueryとmain.jsの読み込み記述だけ提示されてもできるアドバイスはありません。
再現可能なコードを全て提示してください。
そしてLaravel関係なかったら、実現できますか？
「Laravelだからできない」ようには見えませんが

Answer 1

ちょっと状況がわからないですが、ページ遷移するならロード後のページに
モーダルを表示すればいいし、しないならajaxの結果をモーダルに表示する

Comments

[CCHH]

早々のご回答ありがとうございまあす。
ページ遷移はできればしたくないと思っています。
となれば、ajaxを用いてpostしてその結果をモーダルに表示させるという事でしょうか？

[yambejp]

CORSなどの問題がなければ、APIをつくってajaxでうけた結果を
HTMLもしくはJSONデータで返してもらってください。
最悪jsonpでAPIを提供できればCORSも回避できます

[CCHH]

ajaxでpostしたjsonをhtmlで受け取る形で実装できました！
ありがとうございました！