【Laravel + jQuery 】BlockUIプラグインで非同期通信中のローディング状態を表示する

概要

Ajaxを利用した非同期通信でjQuery BlockUI Pluginを利用したので紹介します

BlockUIについて

jQuery BlockUI Pluginを使用すると、AJAX使用時にブラウザをロックすることなく、同期動作をシミュレートすることができます[1]。このプラグインを有効にすると、無効化されるまで、ページ（またはページの一部）に対するユーザーの操作を阻止します。BlockUIは、DOMに要素を追加して、ユーザーとの対話をブロックする外観と動作の両方を実現します。

やり方

CDNを<script>タグで読み込む

index.blade.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.blockUI.js"></script>

BlockUIの設定

$.blockUI()で画面をロックします

kakuオプションについては以下を参照してください

index.js

/**
 * BlockUI
 * ローディング・画面ブロック
 */
function ajaxBlockUi(message) {
    $.blockUI({
        message: message,
        css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            opacity: .5,
            color: '#fff'
        }
    });
}

非同期通信処理

index.js

const AJAX_WAIT_MESSAGES = {DEMO: "Please wait..."}
const API_DEMO = '/api/hoge';

/**
 * @summary 非同期通信デモ
 */
$(document).on('click', '#demo', function (e) {
    // ローディング開始
    ajaxBlockUi(AJAX_WAIT_MESSAGES.DEMO);

    $.ajax({
        type: "POST",
        url: API_DEMO,
        data: {id: 1},
        dataType: "json",
        scriptCharset: 'utf-8'
    }).then(function (data) {
        console.log('完了したよ');

        // ローディング終了
        $.unblockUI();
    }, function (XMLHttpRequest, textStatus, errorThrown) {
        console.log("get_staff_list failed");
        console.log("XMLHttpRequest : " + XMLHttpRequest.status);
        console.log("textStatus     : " + textStatus);
        console.log("errorThrown    : " + errorThrown.message);

        //　ローディング終了
        $.unblockUI();
    });
});

最後に

読んでいただきありがとうございます。
今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。