BETA

laravel6.2+JS¦componentとslotを使ってモーダルウインドウを実装するよ

投稿日:2020-05-27
最終更新:2020-05-27

やりたいこと

データを削除する前に「本当に削除しますか?」はいorいいえを選択するモーダルウインドウを実装します。

jQueryをつかって実装したらidが渡せず、bootstrapをつかったら実装できたけどcssが崩れてしまうからNGとなったり...いろいろ試行錯誤した結果、bootstrapを使わずにjQueryとlaravelのcomponentとslotを使って実装していきます('ᴗ' )

環境
・laravel 6.2
・php 7.2
・jQuery 3.2

componentとslotとは

component = いろいろな場所から呼び出せる部品
slot = componentにわたす変数
...のような感じですかね(ふんわりした説明)
実際に使い方を見るとわかりやすいです◎

componentの作成

まずcomponentを作成します。
resources/views/components/cancel_modal.blade.php

<!--- Modal --->  
<section id="modalArea" class="modalArea">  
    <div class="modalBg" id="modalBg"></div>  
        <div class="modalWrapper">  
            キャンセルしてよろしいですか?  
            <button type="button" class="modalButton" id="closeModal">いいえ</button>  
            <form method="post">  
            @csrf  
                <input name="_method" type="hidden" value="DELETE">  
                <input type="hidden" name="reservations_id" value="{{ $reservationId }}" />  
                <button type="submit" formaction="{{ route('reservations.cancel') }}" class="modalButton">予約をキャンセル</button>  
            </form>  
        </div>  
    </div>  
</section>  
<!--- Modal --->  
<script>  
$(function () {  
    $('#cancelModal').click(function(){  
        $(this).blur();   
        $('#modalArea').fadeIn();  
    });  
    $('#closeModal , #modalBg').click(function(){  
        $('#modalArea').fadeOut();  
    });  
});  
</script>  

cssは略...
ベースになるviewのキャンセルボタンにはid="cancelModal"があり、キャンセルボタンを押したらこのモーダルが現れます。

そうするとhiddenタグの部分の変数に値が入っていないため、おそらく予約をキャンセルボタンを押してもキャンセルできません。
<input type="hidden" name="reservations_id" value="{{ $reservationId }}" />

$reservationIdの値を設定するために今度はslotを書いていきます。

slot部分

ベースになるviewにまず先ほどのcomponentを追記します。
@component@endcomponentの中に$reservationIdの値を設定するためにslotを書いて行きます。

@component('components.cancel_modal')  
@slot('reservationId')  
{{ $reservation->id }}  
@endslot  
@endcomponent  

以上で完了です◎

???

今回は変数のみとしていますが、他の画面でも作成したモーダルのデザインはそのままに「予約をキャンセルする」ボタンのみルートを変えたい場合はformをまるっとslotにすることもできました。

// components/cancel_modal.blade.php  
<section id="modalArea" class="modalArea">  
    <div class="modalBg" id="modalBg"></div>  
        <div class="modalWrapper">  
            キャンセルしてよろしいですか?  
            <button type="button" class="modalButton" id="closeModal">いいえ</button>  
            {{ $cancelButton }}  
        </div>  
    </div>  
</section>  

 
ベースのview側

@component('components.cancel_modal')  
@slot('cancelButton')  
<form method="post">  
@csrf  
    <input name="_method" type="hidden" value="DELETE">  
    <input type="hidden" name="reservations_id" value="{{ $reservation->id }}" />  
    <button type="submit" formaction="{{ route('reservations.cancel') }}" class="modalButton">予約をキャンセル</button>  
</form>  
@endslot  
@endcomponent  

 

???

componentとlayoutやsectionとの違いもわかっておらずつかっていなかったのですが、使い方がわかるとめちゃくちゃ便利ですね!モーダル難しいしよくわからないし無理では...と思っていたのですが課題解決できてよかったです〜〜
まだまだ知らない機能も使いこなせるようになれたらいいなと思います('ᴗ' )

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

メモしていきますφ('ᴗ'」)

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう