【laravel】モーダルが表示されない。

Question

前提・実現したいこと

PHP(larvel)でタスク管理システムを作っています。
経験値を保存し、indexページをリダイレクト後、モーダルを表示する機能を実装しようとしましたが、モーダルが表示されずただリダイレクトされるだけの状態です。経験値およびレベルアップ機能はできております。

モーダル表示に関して、コードにおかしな部分がないか確認いただきたいです。

該当のソースコード

// index.blade.php内

{{-- <!--完了ボタン -->--}}
        <td class="button"><form action="{{ route('todo.complete',$todo["id"]) }}" method="post">
          {{ csrf_field() }}
          {{ method_field('patch')}}
          <button type="submit" class="btn btn-success" id="openModal">完了</button>
        </form>
        </td>
      <!-- モーダルエリアここから -->
      @if (session('flash_message'))
      <section id="modalArea" class="modalArea">
       
          <div id="modalBg" class="modalBg">
          </div>
            <div class="modalWrapper">
              <div class="modalContents">
              {{ session('flash_message') }}
              </div>
              <div id="closeModal" class="closeModal">
              ×
              </div>
            </div>

      </section>
      @endif

      <main class="mt-4">
        @yield('content')
    </main>
      <!-- モーダルエリアここまで -->

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
$(function () {
  $('#openModal').load(function(){
      $('#modalArea').fadeIn();
  });
  $('#closeModal , #modalBg').click(function(){
    $('#modalArea').fadeOut();
  });
});
      </script>
  </body>

    public function complete($id) {
      // 完了日を入力
      $todo = Todo::find($id);
      $todo->completed_at = date("y-m-d");
      $todo->save();

      // 経験値を加算
      $userLevel = userlevel::whereIn('id', function ($query) {
          $query->select(DB::raw('MAX(id) As id'))->from('user_levels');
      })->first();
      $levelSetting = levelsetting::where('level', '<=', $userLevel->users_level)
      ->sum("thresold");
      $totalExp = $userLevel->experience_point;
      $totalExp += $todo->difficultyLevel;
      $userLevel->experience_point = $totalExp;
      $userLevel->save();
      // レベルを上げる
      if ($levelSetting <= $userLevel->experience_point) {
        $userLevel->users_level = $userLevel->users_level +1;
        $userLevel->save();
        session()->flash('flash_message', 'レベルが上がりました');
      }
      return redirect('todos/index');
    }

補足情報（FW/ツールのバージョンなど）

PHP 7.4.9
laravel 6.18.35
MySQL 5.7.26

Answer 1

「経験値を保存」をAjaxでされては。

Comments

[youplus40]

なるほど、Ajaxは触ったことがなかったです。
complete()はいくつかの処理がありますが、経験値の保存のみAjaxで処理する理由を教えていただけないでしょうか。

[m.ts10806]

あくまで質問内容の文章を引用しただけですが、ひとまずバックグラウンドで実行するので十分かと思います。「送信したあとにモーダル」というのは制御が難しいですし、挙動しても違和感があります。

[youplus40]

回答ありがとうございます。
なるほど、理解しました。おっしゃるとおり、モーダルの表示は制御が難しいので、
フラッシュメッセージをリダイレクトしたページに表示する方向で再度設計し直そうと思います。

Answer 2

モーダルからフラッシュメッセージに変更し、実装できました。
最終のコードを記載します。

        <!--index.blade.php -->
        <!--完了ボタン -->
        <td class="button">
            <form action="{{ route('todo.complete',$todo["id"]) }}" method="post">
                {{ csrf_field() }}
                {{ method_field('patch')}}
                <button type="submit" class="btn btn-success">完了</button>
            </form>
        </td>

    public function complete($id)
    {
        // 完了日を入力
        $todo = Todo::find($id);
        $todo->completed_at = date('y-m-d');  //完了ボタンを押した日付を保存
        $todo->save();

        // 経験値を加算
        // ユーザーレベルテーブルの取得
        $userLevel = userlevel::find(1)
            ->first();
        $levelSetting = levelsetting::where('level', '<=', $userLevel->users_level)
            ->sum('thresold'); //ユーザーレベルと同じレベルまでに必要な経験値の合計を取得
        $totalExp = $userLevel->experience_point; //現在の獲得経験値を変数に入れる
        $totalExp += $todo->difficultyLevel; //現在の獲得経験値に新たに獲得した経験値を足す
        $userLevel->experience_point = $totalExp; //足した経験値をテーブルへ入れる
        $userLevel->save();

        // レベルを上げる
        if ($levelSetting <= $userLevel->experience_point) { //獲得経験値が経験値テーブルを上回っていた場合
        $userLevel->users_level = $userLevel->users_level + 1; //ユーザーレベルを一つ上げる
        $userLevel->save();
            session()->flash('flash_message', 'レベルが上がりました！引き続き頑張りましょう！');
        }
        return redirect('todos/index');

jQuery(function ($) {
    $(function () {
        $('.checkbox').on('click', function () {
            if ($(this).prop('checked')) {
                // 一旦「なし」をクリアして再チェックする
                $('.checkbox0').prop('checked', false);
                $(this).prop('checked', true);
            }
        });
        $('.checkbox0').on('click', function () {
            if ($(this).prop('checked')) {
                // 一旦他の曜日をクリアして再チェックする
                $('.checkbox').prop('checked', false);
                $(this).prop('checked', true);
            }
        });
    });
});