Ajax
Ajax
は、サーバからリストデータを取得してレンダリングするためのdroplabプラグインです。
使用方法
DropLab.prototype.init
またはDropLab.prototype.addHook
呼び出しの plugins 配列にAjax
オブジェクトを追加します。
Ajax
には2つの設定値、endpoint
とmethod
が必要です。
-
endpoint
はリクエストエンドポイントへの URL でなければなりません。 -
method
はsetData
またはaddData
。 -
setData
はドロップダウンをレスポンスデータで完全に置き換えます。 -
addData
レスポンスデータを現在のドロップダウンリストに追加します。
<a href="#" id="trigger" data-dropdown-trigger="#list">Toggle</a>
<ul id="list" data-dropdown><!-- ... --><ul>
const droplab = new DropLab();
const trigger = document.getElementById('trigger');
const list = document.getElementById('list');
droplab.addHook(trigger, list, [Ajax], {
Ajax: {
endpoint: '/some-endpoint',
method: 'setData',
},
});
オプションでloadingTemplate
に HTML 文字列を設定することができます。 リクエストが保留されている間、この HTML 文字列がドロップダウンリストを置き換えます。
さらに、onError
を関数に設定することで、XHRエラーをキャッチすることができます。