LaravelでFullcalendarに登録したイベントを削除したい

Question

###実現したいこと
現在LaravelでFullcalendarの実装をしています。
イベント情報の登録、更新処理はできたのですが、削除方法がわからず困っています。
自力で試してみたのですが、JSの知識が乏しいため、なかなかうまくいかない状態です。

###該当のソースコード
現在はカレンダーが表示されていて、登録されているイベントをクリックするとモーダル更新用の画面が出てくるようになっています。
更新用のモーダルに登録ボタンと削除ボタンを設置して、削除ボタンを押したらデータが削除されるようにしたいです。

現在、データを表示させるindexアクションがajax通信の際にidを返すようにしているため、更新処理の際はvalueの取得にJSを使用しました。
通常だとformタグのaction属性にidを指定し送信すると思うのですが、idを渡すことができていないため、どのようにすればいいのかわからない状態です。

modal.blade.php

<!-- 新規登録 -->
<form id="task-form" method="POST" action="{{ route('done_task') }}">
  @csrf
  <input type="title" id="title_edit" name="title">
  <input type="date" id="start_edit" name="start">
  <input type="color" id="color_edit" name="textColor">
  <div class="modal-btn">
    <button class="modal__btn modal__btn-primary" type="submit">登録する</button>
    <a id="expire-btn"　class="modal__btn" data-micromodal-close aria-label="Close this dialog window">キャンセル</a>
  </div>
</form>

edit_modal.blade.php

<!-- 更新 -->
<form id="task-form" method="POST" action="{{ route('editEvent') }}">
  @csrf
  <input type="hidden" id="id" value="" name="id">
  <input type="title" id="title_edit" name="title" value="">
  <input type="date" id="start_edit" name="start" value="">
  <input type="color" id="color_edit" name="textColor" value="">
  <div class="modal-btn">
    <button id="task-update" class="modal__btn modal__btn-primary" type="submit">変更する</button>
    <!-- 削除ボタン -->
    <a href="#" id="delete-task" class="cancel-btn">削除する</a>
  </div>
</form>

calendar.js

$(document).ready(function () {
  $('#calendar').fullCalendar({
  firstDay: 1,
  editable: true,
  selectable: true,
  events: '/home',
 //　更新前の情報を表示
  eventClick: function(info) {
    document.getElementById("id").value = info.id;
    document.getElementById("title_edit").value = info.title
    document.getElementById("start_edit").value = info.start._i
    document.getElementById("color_edit").value = info.textColor
    MicroModal.show('modal-2');
    }                      
});
// イベント削除
$("#delete-task").on("click", function() {
  var event = calendar.getEventById(info.id);
  event.remove();
});

DoneTaskController.php

 public function index(Request $request)
    {
        $user_id = Auth::id();

        if ($request->ajax())
        {
            $data = DoneTask::select('id','title', 'start', 'textColor')->where('user_id', $user_id)->get();
            return response()->json($data);

        }

        return view('home');
    }

public function store(Done $request)
    {
        $task = new DoneTask;
        $task->user_id = Auth::id();
        $task->start = $request->input('start');
        $task->textColor = $request->input('textColor');
        if(isset($_POST['title']))
        {
            $title = implode(',', $_POST['title']);
            $task->title = $title;
        }

        $task->save();

        return redirect('/home');
    }

public function editEventDate(Request $request)
    {
        $task = DoneTask::find($request->input('id'));

        $task->start = $request->input('start');

        $task->textColor = $request->input('textColor');
        if(isset($_POST['title']))
        {
            $title = implode(',', $_POST['title']);
            $task->title = $title;
        }

        $task->save();

        return redirect('/home');
    }

web.php

Route::get('/home', 'DoneTaskController@index');
Route::post('/store', 'DoneTaskController@store')->name('done_task');
Route::post('/editEventDate', 'DoneTaskController@editEventDate')->name('editEvent');
Route::post('/deleteEvent', 'DoneTaskController@deleteEvent')->name('deleteEvent');

上記の方法だとinfo.idが取得できないので、削除できていないのだと思われますが、代替案がわからない状態です。

###補足情報
-各バージョン
-Laravel 6.x
-PHP 7.4.9
-Fullcalendar v5

初心者で申し訳ございませんが、よろしくお願いします。

Comments

[Lulucom]

> イベント情報の登録、更新処理はできた
これは、FullCalendar上の登録/更新の操作により、サーバー上のイベントを登録/更新できるようになった、という意味でしょうか。
もしそういうことなら、削除についても同じように実装すれば良いのではないかと思いました。

[aki0201]

少しわかりにくかったので、該当のソースコードの文とControllerを追記しています。
サーバー上のイベントを登録と更新処理はできるのですが、やり方が違うため、削除の処理がわからない状態です。

[Lulucom]

質問内容を理解できてきた気がします。以下も掲載されると良いのではないかと思います。
・JSで登録/更新リクエストしている部分のコード
・サーバー側で用意したAPIのうち削除のルーティング

[aki0201]

説明不足なところがあり申し訳ございませんでした。
コードを追加しています。
よろしくお願いします。

[Lulucom]

いえいえ、理解できたと思います。
今回はJSの問題だったということでしたら、質問からLaravelのタグを外していただければと思います。

[Lulucom]

あと、Fullcalendar v5と書かれていますが、現在お使いのバージョンは本当にv5でしょうか。ひょっとしてv3あたりではないかと感じたのですが・・・

Answer 1

削除のフォームも設置し、削除ボタンのイベント処理でそのフォームから送信させるのはどうでしょうか。

edit_modal.blade.php （既存の更新フォームの後辺りに削除フォームを追加）

<!-- 更新 -->
<form id="task-form" method="POST" action="{{ route('editEvent') }}">
  ...
</form>

<!-- 削除 -->
<form id="delete-task-form" method="POST" action="{{ route('deleteEvent') }}">
  @csrf
  <input type="hidden" name="id">
</form>

calendar.js （既存のイベント削除処理の中にコードを追加）

$(document).ready(function () {
  // カレンダー作成
  var calendar = $('#calendar').fullCalendar({
    ...
  });

  // イベント削除
  $("#delete-task").on("click", function() {
    var form = document.getElementById("delete-task-form"); // 削除フォームを取得
    var eventId = document.getElementById("id").value; // 削除対象のidを更新フォームから取得
    // var event = calendar.getEventById(eventId);
    // event.remove();
    form.elements['id'].value = eventId; // 削除対象のidを削除フォームにもセット
    form.submit(); // 削除フォームを送信させる
  });
});

削除対象のidを更新フォームから取得してますが、FullCalendarのeventClick関数の中で、更新フォームにidをセットしているのと同様に、削除フォームにもセットしてあげても良いかと思います。

Comments

[aki0201]

ありがとうございます！
この場合だと、JSでidを取得して、ControllerのdeleteEventで削除に関するコードを書くということでしょうか。

[Lulucom]

そうですね、更新と同様かと思っています。

[aki0201]

試したところ、consoleで TypeError: calendar.getEventById is not a functionというエラーが出てしまい、削除ができないようでした。

[Lulucom]

そうでしたか、質問に以下のコードが掲載されていましたので、そこは動くのかと思って検証していませんでした。
var event = calendar.getEventById(info.id);
event.remove();

試しに以下の2行をコメントアウトしてみてはいかがでしょうか。
var event = calendar.getEventById(eventId);
event.remove();

その直後のフォーム送信の結果、サーバー上で該当タスクの削除が成功し、リダイレクトされてページが再表示されると、該当タスクはカレンダー上から消えるのではないでしょうか。

[aki0201]

コメントアウトして確認したところ、form.elements['id'].value = eventId;のところで、Uncaught TypeError: Cannot read property 'elements' of null
というエラーが出てしまいました。

[Lulucom]

以下の部分でformという変数にうまく値が入っていない可能性があります。
var form = document.getElementById("delete-task-form"); // 削除フォーム

"delete-task-form" というidを持つ削除フォームを設置できていないとそうなる可能性がありますが、設置できていますでしょうか？

[aki0201]

できてるかと思います。現在、削除のフォームはこのようになっています。
<form id="delete-task-form" method="POST" action="{{ route('deleteTask') }}">

[Lulucom]

良さそうですね・・・

その削除フォームが設置されたページに、以下のJSは読み込まれているのですよね？

// イベント削除
$("#delete-task").on("click", function() {
var form = document.getElementById("delete-task-form"); // 削除フォームを取得
...
});

[aki0201]

読み込んでます！

[Lulucom]

そうですか。回答のコードを、より細かく書きましたので、抜けなどが無いか再確認いただけますか？

[aki0201]

腰を痛めてしまい、返信が遅くなりすみませんでした。

もう一度見直したところ、モーダルの<form>タグ内に削除フォームを入れていたため(確認ミスで申し訳ございません)、そちらを変更したところ、500エラーが出るようになりました。
deleteTaskアクションがいけないのだと思いますが、原因がわからない状態です。
現在、このように書いています。

public function deleteTask($id) {
$task = DoneTask::find($id);
$task->delete();

return redirect('/home');
}

もし解消法がわかれば、教えていただけるとありがたいです。

[Lulucom]

いえいえ、そうでしたか、お大事になさってください。

> 500エラーが出るようになりました
詳細なエラーメッセージを確認すれば原因がわかると思いますが、今の情報だけで予想すると$idに正しくない値が渡っていて、DoneTaskのfindに失敗しているのではないでしょうか。
DoneTask::find($id); を
DoneTask::findOrFail($id); にした方が良いでしょう。
こうすると、findに失敗した場合は404 (Not found)エラーになるはずです。

[aki0201]

findOrFailにしたところやはりidが取れておらず、JSでとっているのでこのように変更したところ、削除されるようになりました。

public function deleteTask(Request $request) {
$task = DoneTask::findOrFail($request->input('id'));
$task->delete();

return redirect('/home');
}

数日にわたり助けていただきありがとうございました！
本当に助かりました。

[Lulucom]

そういえばそこは更新と同様でしたね、うっかりしていました。解決されたようでよかったです。