【LaravelとjQuery】jQueryでモーダルを作成。モーダルの中身は別bladeファイルから取得して表示する。

今回はLaravelでjQueryを使ってモーダルを作成してみました。

その際にモーダルの中身は別のbladeファイルから呼び出したかった。だけど、なかなか方法が見つからなかったのでまとめます。

モーダルウインドウを作成。

モーダルの作成は以下を参考にさせていただきました。

【Laravel】モーダルウィンドウを表示するコンポーネント(blade)ファイルを作成しました。

resources/views/modal_window.blade.php

@section('modal_window')
<div id="modal-content">
    @parent
</div>

<script>
$(function(){
    //モーダルウィンドウを出現させるクリックイベント
    $("#modal-open").click( function(){

        //キーボード操作などにより、オーバーレイが多重起動するのを防止する
        $( this ).blur() ;  //ボタンからフォーカスを外す
        if( $( "#modal-overlay" )[0] ) return false ;       //新しくモーダルウィンドウを起動しない (防止策1)
        //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;     //現在のモーダルウィンドウを削除して新しく起動する (防止策2)

        //オーバーレイを出現させる
        $( "body" ).append( '<div id="modal-overlay"></div>' ) ;
        $( "#modal-overlay" ).fadeIn( "slow" ) ;

        //コンテンツをセンタリングする
        centeringModalSyncer() ;

        //コンテンツをフェードインする
        $( "#modal-content" ).fadeIn( "slow" ) ;

        //[#modal-overlay]、または[#modal-close]をクリックしたら…
        $( "#modal-overlay,#modal-close" ).unbind().click( function(){

            //[#modal-content]と[#modal-overlay]をフェードアウトした後に…
            $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){

                //[#modal-overlay]を削除する
                $('#modal-overlay').remove() ;

            } ) ;

        } ) ;

    } ) ;

    //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
    $( window ).resize( centeringModalSyncer ) ;

    //センタリングを実行する関数
    function centeringModalSyncer() {

        //画面(ウィンドウ)の幅、高さを取得
        var w = $( window ).width() ;
        var h = $( window ).height() ;

        // コンテンツ(#modal-content)の幅、高さを取得
        var cw = $( "#modal-content" ).outerWidth();
        var ch = $( "#modal-content" ).outerHeight();

        //センタリングを実行する
        $( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;
    }
});
</script>

<style>
#modal-content {
    width: 50% ;
    margin: 0 ;
    padding: 10px 20px ;
    border: 2px solid #aaa ;
    background: #fff ;
    position: fixed ;
    display: none ;
    z-index: 2 ;
}

#modal-overlay {
    z-index: 1 ;
    display: none ;
    position: fixed ;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 120% ;
    background-color: rgba( 0,0,0, 0.75 ) ;
}

.button-link {
    color: #00f ;
    text-decoration: underline ;
}

.button-link:hover {
    cursor: pointer ;
    color: #f00 ;
}
</style>
@endsection
Code language: HTML, XML (xml)

作成したモーダルウィンドウを読み込むページを作成します。

resources/views/○○○

<div id="faq_csv_modal_window">
{{-- モーダルウィンドウ --}}
@include('components.modal_window')
@section('modal_window')
    <div id="modal_open">
        <header id="modal_header">
            モーダルヘッダーです。
        </header>
        <main id="modal_main">

        </main>
        <footer id="modal_footer">
            <p><a id="modal-close" class="button-link">閉じる</a></p>
        </footer>
    </div>
@endsection
@yield('modal_window')
</div>
Code language: HTML, XML (xml)

これでモーダルが完成します。（参考サイトのままです…）

別bladeファイルをモーダルの中身に表示する。

なぜ、別ファイルにするかというと、動的にファイルの中身が変わるからです。

選択したコンテンツによってファイルの中身を変えたい。ということで、、、

コンテンツがクリックされるとajaxでデータを取得してみます。

var userId = $(this).data('id');  //クリックされた要素を取得
var hostUrl= '/download/' + userId; //post送信先のURLを定義

$.ajax({
    url: hostUrl,
    type: 'GET',
})

Code language: JavaScript (javascript)

getでurlを投げます。すると、controllerから表示したいviewを返すように書きます。

function showData($id)
{
    //取得したユーザーの情報を$userに入れてuser/download.blade.phpに返す
    $user = userPost::find($id);
    return view('user.download', compact('user')); //bladeの中身にしたいbladeファイルを返す
}

Code language: PHP (php)

こうすると、bladeファイルと必要な要素が送られてきます。

ということで、それを表示するためにjQueryに以下を追記してみましょう。

//通信が成功したとき
.done((data)=>{

    //通信が成功した時にDownloadControllerからformが記載されているviewが返されるのでそれを表示する。
    $('main').empty();
    $('main').append(data);
})
Code language: JavaScript (javascript)

これで送られてきたdataが<main></main>タグの間にbladeファイルが表示されるようになります！