カードリフレッシュプラグイン
カードリフレッシュプラグインは、Ajaxコンテンツをカードにロードする機能を提供します。
使用方法
このプラグインは、jQueryプラグインとして、またはデータAPIを使用してアクティブ化できます。
データAPI
data-card-widget="card-refresh" を持つボタンをカードに追加し、必要な data-source="/URL-TO-CONTENT" オプションを提供することで、プラグインをアクティブ化します。 これにより、プラグインは指定されたURLへのGETリクエストを自動的に作成し、返されたレスポンスをカードの .card-body セクションにレンダリングします。 レンダリング前に返されたレスポンスを処理する必要がある場合は、レスポンスを処理するためのフックを提供するjQuery APIを使用する必要があります。
jQuery
jQuery APIは、開発者がレンダリング前にリクエストを前処理し、レンダリング後に後処理できる、よりカスタマイズ可能なオプションを提供します。
$('#my-card [data-card-widget="card-refresh"]').CardRefresh(options)
オプション
| 名前 | タイプ | デフォルト | 説明 |
|---|---|---|---|
| source | 文字列 | '' | ソースのURL。 |
| sourceSelector | 文字列 | '' | セレクターのコンテンツのみを返すためのセレクター。 |
| params | オブジェクト | {} | GETクエリパラメータ（例：{search_term: 'layout'}、URL/?search_term=layoutにレンダリングされます） |
| trigger | 文字列 | [data-card-widget="card-refresh"] |
リフレッシュボタンへのCSSセレクター |
| content | 文字列 | .card-body |
コンテンツをレンダリングするターゲットへのCSSセレクター。 このセレクターはカード内に存在する必要があります。 |
| loadInContent | ブール値 | TRUE | コンテンツを自動的にレンダリングするかどうか。 |
| loadOnInit | ブール値 | TRUE | ページの読み込み時にプラグインを初期化します。 |
| loadErrorTemplate | ブール値 | TRUE | Ajaxエラーが発生した場合に、errorTemplate をカードに追加するかどうか。 |
| responseType | 文字列 | '' | レスポンスタイプ（例：'json'または'html'） |
| overlayTemplate | 文字列 | TRUE | AjaxスピナーのHTMLテンプレート |
| errorTemplate | 文字列 | '<span class="text-danger"></span>' |
AjaxエラーメッセージのHTMLテンプレート |
| onLoadStart | 関数 | 匿名関数 | Ajaxリクエストが行われる前に呼び出されます |
| onLoadDone | 関数 | 匿名関数 | Ajaxリクエストが行われた後に呼び出されます。 response パラメータは、サーバーレスポンスを保持する関数に渡されます。 |
| onLoadFail | 関数 | 匿名関数 | Ajaxリクエストが失敗した場合に呼び出されます。 jqXHR、textStatus、および errorThrown パラメータが関数に渡されます。 |
イベント
| イベントタイプ | 説明 |
|---|---|
| loaded.lte.cardrefresh | カードがリフレッシュされた後にトリガーされます。 |
| overlay.added.lte.cardrefresh | オーバーレイがカードに追加された後にトリガーされます。 |
| overlay.removed.lte.cardrefresh | オーバーレイがカードから削除された後にトリガーされます。 |
例：$('#my-card [data-card-widget="card-refresh"]').on('loaded.lte.cardrefresh', handleLoadedEvent)
メソッド
| メソッド | 説明 |
|---|---|
| load | コンテンツをリロードし、onLoadStart および onLoadDone フックを実行します |
例：$('#my-card [data-card-widget="card-refresh"]').CardRefresh('load')