hero_picture
Cover Image for Laravelで削除前にJavaScriptの確認アラート(confirm)を出すプラグインのご紹介

Laravelで削除前にJavaScriptの確認アラート(confirm)を出すプラグインのご紹介

2023/04/28

こんにちは。小國です。皆さんお元気でお過ごしでしょうか。僕は元気です。

久しぶりの投稿になってしまいましたが、今回はタイトルの通り、Laravelで削除前にJavaScriptの確認アラート(confirm)を出すプラグインをご紹介したいと思います。

早速ですが、そのプラグインはこちらになります。

https://github.com/seeds-std/improved-links

元は https://github.com/Patroklo/improved-links なのですが、JavaScriptの確認アラートを出すようにしたりと改良を加えています。

それでは早速使ってみましょう。なお、環境は以下の通りで、jQueryが必要です。

  • PHP 8.2
  • Laravel 10

インストール

packagistには公開していませんので、以下のコマンドを使ってGitHubからインストールします(需要があればpackagistに公開するかも!)。

1composer.phar config repositories.patroklo/improved-links vcs https://github.com/seeds-std/improved-links
2composer require patroklo/improved-links:dev-master

config.appに追加します。

1    'providers' => [
2        // 追加
3        Patroklo\ImprovedLinks\Providers\ImprovedLinksProvider::class,
4
5    ],

最後に、php artisan vendor:publishして

  • resources/views/patroklo/links/data.blade.php
  • public/assets/js/improved-links.js

の2つのファイルが作成したら準備完了です。

使い方

作成したpublic/assets/js/improved-links.jsをapp.blade.phpで読み込み、.method-linkの<A>タグをイベントバインディングします。

1<script src="{{ asset('assets/js/improved-links.js') }}"></script>
2<script>
3    $(document).ready(function () {
4        $('a.method-link').methodLink();
5    });
6</script>

あとは、削除するタグを設置だけ!

1{{ Html::methodLink('DELETE', route('users.destroy', $user), '削除', ['class' => 'btn btn-danger', 'confirm' => '削除します。よろしいですか?']) }}

実際の動作イメージは以下のようなものになります。

以前は、以下のように書いていたコードを1行にまとめることができ+確認アラートまでできました。

1           {!! Form::open([
2               'route' => ['users.destroy', $user],
3               'method' => 'DELETE',
4           ]) !!}
5           {!! Form::button('削除', [
6               'class' => 'btn btn-danger',
7               'type' => 'submit',
8           ]) !!}
9           {!! Form::close() !!}

終わりに

今回はDELETEだけでしたが、POST/PUTに対応していたり、確認アラートも出さないこともできますので、ぜひ使ってみてください。

ということで、削除前にJavaScriptの確認アラート(confirm)を出すプラグイン https://github.com/seeds-std/improved-links のご紹介でした。

それでは、Enjoy coding!